00_Timeline_Workshop.md

No Server Data Visualization: Build a Timeline Generator!

Thank you for attending our Kintone x Timeline workshop!

Use the following CSV file, CDN URLs, JavaScript file, and PDF files for the hands-on section!

Download Links

Click here or the button on the upper right corner for all the code, data, & slide you need for our workshop!

Getting your FREE Kintone Database

Step 1 - Sign Up for Kintone Developer Account (Website)

• bit.ly/KDP_signup
  • ⚠ Do NOT use Safari
  • ⚡Accept Cookies First
  • ✅ Use Chrome & Firefox

Step 2 - Create a Kintone Subdomain (Environment)

• bit.ly/K_DevLic
  • ⚡ Only use lowercase, numbers, & hyphens in your subdomain
  • ⚠ Do not use uppercase nor special characters

Quick video on the sign-up process

https://youtu.be/Gzz8SbTuoFg

01_Data.csv

02_CDN_URLs.txt

// ⚠️ Order matters when inserting CDN URLs into Kintone App settings

https://cdn.amcharts.com/lib/4/core.js
https://cdn.amcharts.com/lib/4/charts.js
https://cdn.amcharts.com/lib/4/plugins/timeline.js
https://cdn.amcharts.com/lib/4/plugins/bullets.js
https://cdn.amcharts.com/lib/4/themes/animated.js

03_Script.js

// amChart TimeLine x Kintone

(function () {
  'use strict';

  // Color HEX code for the political parties
  const partyColor = {
    'Democratic': '#2502fe',
    'Democratic-Republican': '#0e7003',
    'Federalist': '#e28665',
    'Republican': '#e0001b',
    'Unaffiliated': '#d5d5d5',
    'Whig': '#ebbd50'
  };

  // Imgur's Image Hash
  const imgCode = ['', 'gk1cP2u', '9FR7eva', 'aumfl2F', 'kx8BdCT', 'z6Yd9Lm', '4HLWKcB', 'mmTyKJ1', 'PCb7ly6', 'UgN4EA7', 'rVoiW4X', 'i3euA9w', 'kt92UVi', 'oo5aw5x', 'BZI7FTa', 'XLkIWAs', 'qB4GVSv', '5kAZ3NJ', 'drQysn9', 'UqvMVTH', 'Wte60Q6', '3DAK1C1', 'h6b7Vw5', 'ctHNmhA', '18zBca0', 'hb94eO2', '12hJdg0', 'Bl8oRVY', 'HQ1xV6H', 'pj4oAjR', 'QuzzGmm', 'zpE50Pa', '4zSuesA', 'mevGXAh', '5zq1fDg', 'EcUoEs2', 'S5BJfEO', 'bMW0Ltr', 'hutxiiz', 'hRBgyF1', 'gHP21eA', '3QtuHuW', 'XSwwVLh', 'wnbeSN1', 'Uw18RFA', '4APgxYd', 'S5wCZcd'];

  // Kintone event triggered after the record list page is displayed.
  kintone.events.on('app.record.index.show', function (event) {

    // Peak inside Kintone's data
    console.log('event.records');
    console.log(event.records);

    // Retrieve & configure the space element below the record list's header
    const spaceDiv = kintone.app.getHeaderSpaceElement();
    spaceDiv.style.height = '650px';
    spaceDiv.style.marginLeft = '25px';
    spaceDiv.style.marginRight = '25px';
    spaceDiv.style.border = 'solid';
    spaceDiv.style.borderColor = '#ED7B84';

    // Automatically enable all amCharts animations
    am4core.useTheme(am4themes_animated);

    // Create chart instance
    const chart = am4core.create(spaceDiv, am4plugins_timeline.SerpentineChart);
    // Space between the chart & border
    chart.paddingTop = 100;
    // Number of straight lines of serpentine shape
    chart.levelCount = 5;
    // Allow bullets to 'bleed' over the edge
    chart.maskBullets = false;
    // Input & Output Date format
    chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd';
    chart.dateFormatter.dateFormat = 'yyyy-MM-dd';
    // Font size
    chart.fontSize = 12;
    chart.tooltipContainer.fontSize = 12;

    // Input Kintone data into the chart
    chart.data = event.records.map((rec, index) => {
      return {
        // Text above the PinBullet; President's name
        'text': `${rec.Text.value}\n${rec.Text_0.value}`,
        // PinBullet's & time period's color; Party color
        'color': partyColor[rec.Drop_down.value],
        // Time period's start; Term's start
        'start': rec.Date.value,
        // Time period's end; Term's end
        'end': rec.Date_0.value,
        // Icon inside the PinBullet; President's icon
        'icon': `https://i.imgur.com/${imgCode[rec.Record_number.value]}.png`,
        // Timeline category; only 1 is needed
        'category': ''
      }
    });

    console.log('chart.data');
    console.log(chart.data);

    // Create 1 timeline with all the US Presidents
    const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = 'category';

    // Axis using date & time scale
    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    // Gray, dashed lines for date axis
    dateAxis.renderer.line.strokeDasharray = '1,4';
    dateAxis.renderer.line.strokeOpacity = 1;
    // Place the label in the middle of the axis
    dateAxis.renderer.labels.template.verticalCenter = 'middle';

    // Series containing the US Presidents and their terms
    const series = chart.series.push(new am4plugins_timeline.CurveColumnSeries());
    series.dataFields.openDateX = 'start';
    series.dataFields.dateX = 'end';
    series.dataFields.categoryY = 'category';
    series.baseAxis = categoryAxis;
    // Coloring of the Presidential terms
    series.columns.template.height = am4core.percent(15);
    series.columns.template.propertyFields.fill = 'color';
    series.columns.template.propertyFields.stroke = 'color';
    series.columns.template.strokeOpacity = 0;
    series.columns.template.fillOpacity = 0.6;

    // Create the PinBullet (Circles)
    const pinBullet = series.bullets.push(new am4plugins_bullets.PinBullet());
    pinBullet.locationX = 1; //Place the PinBullet at their term's start
    pinBullet.propertyFields.stroke = 'color';
    pinBullet.background.propertyFields.fill = 'color';
    pinBullet.image = new am4core.Image();
    pinBullet.image.propertyFields.href = 'icon';

    // President's name over the icon
    const labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.propertyFields.text = 'text';
    labelBullet.label.textAlign = 'middle';
    labelBullet.locationX = 1; // Place the labelBullet at their term's start
    labelBullet.dy = -80; // Raising text above the icon

    // Scrollbar used to focus the timeline
    chart.scrollbarX = new am4core.Scrollbar();
    chart.scrollbarX.align = 'center'
    chart.scrollbarX.width = am4core.percent(75);
    chart.scrollbarX.parent = chart.bottomAxesContainer;

    // Year appearing when hovering over the chart axis
    const cursor = new am4plugins_timeline.CurveCursor();
    chart.cursor = cursor;
    dateAxis.tooltipDateFormat = 'yyyy-MMM';
    cursor.xAxis = dateAxis;
    cursor.lineY.disabled = true; // Disable Y line highlight

    // Optional - Enable export
    chart.exporting.menu = new am4core.ExportMenu();
    // Remove unneeded Scrollbar & tooltip
    chart.scrollbarX.exportable = false;
    dateAxis.tooltip.exportable = false;
  });
})();

04_Post_Event_Survey.md

Thank you for attending our workshop!

Your Feedback Please 🙇

Please fill out this quick survey for a chance to win 💰️ $25 Amazon Gift Card:

bit.ly/KDP_Q ↢

Next Step

For those wanting more visualization projects:

• Try linking to different amChart libraries, and reuse the code we used in the workshop!

For those wanting to create projects on Kintone and want to retrieve & store data from public APIs:

• Call public APIs from Kintone!

For those wanting to use Kintone as a back-end database:

• Check out Deploy a REST API calling node.js App to Heroku tutorial!

Where to Get Help?

• Kintone Developer Community forum
• Stack Overflow

05_xkcd.js

(function () {
  'use strict';
  var url = "https://xkcd.com/327/info.0.json";

  kintone.events.on('app.record.index.show', function (event) {
    kintone.proxy(url, 'GET', {}, {}, function (success) {
      var jsonResponse = JSON.parse(success);
      console.log(jsonResponse);
      window.open(jsonResponse.img, "", "width=800, height=200, top=200");
    }, function (error) {
      console.log(error);
    });
    return event;
  });
})();

06_References.md

amCharts & Kintone References

Following are documentations refereed when creating the Timeline Chart x Kintone customizations.

Kintone Events

• Kintone Events - app.record.index.show
• Get Record List Header Element - kintone.app.getHeaderSpaceElement

amCharts Getting Started Tutorials

• amCharts core.js & charts.js CDN
• Working with JavaScript x amCharts

amCharts Animation

• Animation & animated.js

Timeline

• Timeline
• Anatomy of a TimeLine Chart
• Creating Timeline Charts
• Customizing chart scrollbar
• Setting position of the chart scrollbars
• Date Axis

Plugin: Bullets

• Plugin: Bullets

To have the PinBullets linkable to their Wiki_URL, take a look at the following docs

• PinBullet – amCharts 4 Documentation
• Label – amCharts 4 Documentation

Other Parts

• Array.prototype.map() - JavaScript | MDN
• Imgur API

07_Debugging.js

// amChart TimeLine x Kintone
// Use this version if you imported the CSV file without changing the Party field to a Drop_down field

(function () {
  'use strict';

  // Color HEX code for the political parties
  const partyColor = {
    'Democratic': '#2502fe',
    'Democratic-Republican': '#0e7003',
    'Federalist': '#e28665',
    'Republican': '#e0001b',
    'Unaffiliated': '#d5d5d5',
    'Whig': '#ebbd50'
  };

  // Imgur's Image Hash
  const imgCode = ['', 'gk1cP2u', '9FR7eva', 'aumfl2F', 'kx8BdCT', 'z6Yd9Lm', '4HLWKcB', 'mmTyKJ1', 'PCb7ly6', 'UgN4EA7', 'rVoiW4X', 'i3euA9w', 'kt92UVi', 'oo5aw5x', 'BZI7FTa', 'XLkIWAs', 'qB4GVSv', '5kAZ3NJ', 'drQysn9', 'UqvMVTH', 'Wte60Q6', '3DAK1C1', 'h6b7Vw5', 'ctHNmhA', '18zBca0', 'hb94eO2', '12hJdg0', 'Bl8oRVY', 'HQ1xV6H', 'pj4oAjR', 'QuzzGmm', 'zpE50Pa', '4zSuesA', 'mevGXAh', '5zq1fDg', 'EcUoEs2', 'S5BJfEO', 'bMW0Ltr', 'hutxiiz', 'hRBgyF1', 'gHP21eA', '3QtuHuW', 'XSwwVLh', 'wnbeSN1', 'Uw18RFA', '4APgxYd', 'S5wCZcd'];

  // Kintone event triggered after the record list page is displayed.
  kintone.events.on('app.record.index.show', function (event) {

    // Peak inside Kintone's data
    console.log('event.records');
    console.log(event.records);

    // Retrieve & configure the space element below the record list's header
    const spaceDiv = kintone.app.getHeaderSpaceElement();
    spaceDiv.style.height = '650px';
    spaceDiv.style.marginLeft = '25px';
    spaceDiv.style.marginRight = '25px';
    spaceDiv.style.border = 'solid';
    spaceDiv.style.borderColor = '#ED7B84';

    // Automatically enable all amCharts animations
    am4core.useTheme(am4themes_animated);

    // Create chart instance
    const chart = am4core.create(spaceDiv, am4plugins_timeline.SerpentineChart);
    // Space between the chart & border
    chart.paddingTop = 100;
    // Number of straight lines of serpentine shape
    chart.levelCount = 5;
    // Allow bullets to 'bleed' over the edge
    chart.maskBullets = false;
    // Input & Output Date format
    chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd';
    chart.dateFormatter.dateFormat = 'yyyy-MM-dd';
    // Font size
    chart.fontSize = 12;
    chart.tooltipContainer.fontSize = 12;

    // Input Kintone data into the chart
    chart.data = event.records.map((rec, index) => {
      return {
        // Text above the PinBullet; President's name
        'text': `${rec.Text.value}\n${rec.Text_0.value}`,
        // PinBullet's & time period's color; Party color
        'color': partyColor[rec.Text_1.value],
        // Time period's start; Term's start
        'start': rec.Date.value,
        // Time period's end; Term's end
        'end': rec.Date_0.value,
        // Icon inside the PinBullet; President's icon
        'icon': `https://i.imgur.com/${imgCode[rec.Record_number.value]}.png`,
        // Timeline category; only 1 is needed
        'category': ''
      }
    });

    console.log('chart.data');
    console.log(chart.data);

    // Create 1 timeline with all the US Presidents
    const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = 'category';

    // Axis using date & time scale
    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    // Gray, dashed lines for date axis
    dateAxis.renderer.line.strokeDasharray = '1,4';
    dateAxis.renderer.line.strokeOpacity = 1;
    // Place the label in the middle of the axis
    dateAxis.renderer.labels.template.verticalCenter = 'middle';

    // Series containing the US Presidents and their terms
    const series = chart.series.push(new am4plugins_timeline.CurveColumnSeries());
    series.dataFields.openDateX = 'start';
    series.dataFields.dateX = 'end';
    series.dataFields.categoryY = 'category';
    series.baseAxis = categoryAxis;
    // Coloring of the Presidential terms
    series.columns.template.height = am4core.percent(15);
    series.columns.template.propertyFields.fill = 'color';
    series.columns.template.propertyFields.stroke = 'color';
    series.columns.template.strokeOpacity = 0;
    series.columns.template.fillOpacity = 0.6;

    // Create the PinBullet (Circles)
    const pinBullet = series.bullets.push(new am4plugins_bullets.PinBullet());
    pinBullet.locationX = 1; //Place the PinBullet at their term's start
    pinBullet.propertyFields.stroke = 'color';
    pinBullet.background.propertyFields.fill = 'color';
    pinBullet.image = new am4core.Image();
    pinBullet.image.propertyFields.href = 'icon';

    // President's name over the icon
    const labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.propertyFields.text = 'text';
    labelBullet.label.textAlign = 'middle';
    labelBullet.locationX = 1; // Place the labelBullet at their term's start
    labelBullet.dy = -80; // Raising text above the icon

    // Scrollbar used to focus the timeline
    chart.scrollbarX = new am4core.Scrollbar();
    chart.scrollbarX.align = 'center'
    chart.scrollbarX.width = am4core.percent(75);
    chart.scrollbarX.parent = chart.bottomAxesContainer;

    // Year appearing when hovering over the chart axis
    const cursor = new am4plugins_timeline.CurveCursor();
    chart.cursor = cursor;
    dateAxis.tooltipDateFormat = 'yyyy-MMM';
    cursor.xAxis = dateAxis;
    cursor.lineY.disabled = true; // Disable Y line highlight

    // Optional - Enable export
    chart.exporting.menu = new am4core.ExportMenu();
    // Remove unneeded Scrollbar & tooltip
    chart.scrollbarX.exportable = false;
    dateAxis.tooltip.exportable = false;
  });
})();

z_Slides.pdf

Hello there,
I have tried to download the zip file but is corrupted it cannot be extracted

Hello @pizzou , thank you for your comment. Please try again. I was able to just confirm that the zip file properly downloaded.

You can also try downloading this gist by directly using “Download Zip” button at the top of this page.

Confirmed it in MacOS, Chrome.