00_Bar_Chart_Race_Workshop.md

No Server Data Visualization: Build a Bar Chart Race Project!

Thank you for attending our Kintone x Bar Chart Race 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://www.amcharts.com/lib/4/core.js
https://www.amcharts.com/lib/4/charts.js
https://cdn.amcharts.com/lib/4/themes/animated.js

03_Script.js

(function () {
  'use strict';

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

    // Retrieve & configure the space element below the record list's header
    var spaceDiv = kintone.app.getHeaderSpaceElement();
    spaceDiv.style.height = '500px';
    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
    var chart = am4core.create(spaceDiv, am4charts.XYChart);
    chart.padding(40, 40, 40, 40);

    // Shorting numbers by units: K, M, B (Thousands, Millions, Billions)
    chart.numberFormatter.bigNumberPrefixes = [{
        'number': 1e+3,
        'suffix': 'K'
      },
      {
        'number': 1e+6,
        'suffix': 'M'
      },
      {
        'number': 1e+9,
        'suffix': 'B'
      }
    ];

    // The label displaying the year
    var label = chart.plotContainer.createChild(am4core.Label);
    label.x = am4core.percent(97);
    label.y = am4core.percent(95);
    label.horizontalCenter = 'right';
    label.verticalCenter = 'middle';
    label.dx = -15;
    label.fontSize = 50;

    var stepDuration = 4000;

    // Left side content with company names
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = 'Manufacturer';
    categoryAxis.renderer.minGridDistance = 1;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = true;

    // X-axis unit information
    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.rangeChangeEasing = am4core.ease.linear;
    valueAxis.rangeChangeDuration = stepDuration;
    valueAxis.extraMax = 0.1;

    // Y-axis unit information
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY = 'Manufacturer';
    series.dataFields.valueX = 'value';
    series.tooltipText = '{valueX.value}';
    series.columns.template.strokeOpacity = 0;
    series.columns.template.column.cornerRadiusBottomRight = 5;
    series.columns.template.column.cornerRadiusTopRight = 5;
    series.interpolationDuration = stepDuration;
    series.interpolationEasing = am4core.ease.linear;

    // The 'bar' changing shape
    var labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.horizontalCenter = 'right';
    labelBullet.label.text = '{values.valueX.workingValue.formatNumber(\'#.0as\')}';
    labelBullet.label.textAlign = 'end';
    labelBullet.label.dx = -10;

    chart.zoomOutButton.disabled = true;

    // Color is set to columns with chart.colors color set
    series.columns.template.adapter.add('fill', function (fill, target) {
      return chart.colors.getIndex(target.dataItem.index);
    });

    var year = 2005;
    label.text = year.toString();

    var interval;

    function play() {
      interval = setInterval(function () {
        nextYear();
      }, stepDuration);
    }

    function stop() {
      if (interval) {
        clearInterval(interval);
      }
    }

    // Incrementing the years
    function nextYear() {
      year++;

      if (year > 2014) {
        stop();
        return;
      }

      // Only display the Manufacturers with phones sold
      var newData = allData[year];
      var itemsWithNonZero = 0;
      for (var i = 0; i < chart.data.length; i++) {
        chart.data[i].value = newData[i].value;
        if (chart.data[i].value > 0) {
          itemsWithNonZero++;
        }
      }

      // Following two are animation setting using time (in milliseconds) values
      // Animating the bars increase/decreasing based on value changes
      series.interpolationDuration = stepDuration;
      // Animating the zooming in/out on the bars based on the number of bars being displayed
      valueAxis.rangeChangeDuration = stepDuration;

      // Transition the bars & redraw the graph based on the next years data without complete re-parsing of data
      chart.invalidateRawData();
      label.text = year.toString();

      // Set the current zoom (data range) with the start & end values set between 0 to 1 (beginning to end)
      categoryAxis.zoom({
        start: 0,
        end: itemsWithNonZero / categoryAxis.dataItems.length
      });
    }

    // Resort the series based on new data in descending order
    categoryAxis.sortBySeries = series;

    // Kintone REST API Request
    // kintone.api(pathOrUrl, method, params, opt_callback, opt_errback)
    // pathOrUrl = kintone.api.url('/k/v1/records', true);

    var body = {
      'app': kintone.app.getId(),
      'query': kintone.app.getQueryCondition() + 'limit 500'
    };

    var allData = {};

    // Array [Array] based on year, Manufacturer: value
    // On slide - Algorithm to generate this output
    // Default Field Codes: Year = Number; Manufacturer = Drop_down; PhonesSold = Number_0
    kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body,
      function (resp) {
        // Successful API Call

        var records = resp.records;
        records.forEach(function (record) {

          if (allData.hasOwnProperty(record.Number.value)) {
            allData[record.Number.value].push({
              Manufacturer: record.Drop_down.value,
              value: record.Number_0.value
            });
            return;
          }

          allData[record.Number.value] = [{
            Manufacturer: record.Drop_down.value,
            value: record.Number_0.value
          }];

          console.log(allData);
        });

        chart.data = JSON.parse(JSON.stringify(allData[year]));

        categoryAxis.zoom({
          start: 0,
          end: 1 / chart.data.length
        });

      },
      function (error) {
        // Error
        console.log(error);
      });

    // Register the auto play function
    series.events.on('inited', function () {
      play();
    });
  });
})();

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 💰️ $100 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 Bar Chart Race x Kintone customizations.

Kintone Events

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

Kintone REST API

• Kintone REST API Request - kintone.api()
• Get Records - /k/v1/records
• Get App ID - kintone.app.getId()
• Get Record List Query - kintone.app.getQueryCondition()

---

amCharts Getting Started Tutorials

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

amCharts Animation

• Animation & animated.js
• series.interpolationDuration
• valueAxis.rangeChangeDuration = stepDuration;

am4charts.XYChart

• Anatomy of an XY Chart
• XYChart Class

am4core.Label

• Label Class
• Placing labels anywhere on the chart
• chart.plotContainer.createChild(am4core.Label)
• am4core.percent()
• horizontalCenter
• verticalCenter
• dx

am4charts.CategoryAxis

• CategoryAxis Class
• categoryAxis.renderer
• Axis General Concept
• categoryAxis.dataFields
• categoryAxis.zoom
• categoryAxis.sortBySeries

am4charts.ValueAxis

• valueAxis Class

am4charts.ColumnSeries

• ColumnSeries Class
• series.events.on('inited', function () {...}
  • "inited" Event Class Document
  • Example Usage

am4charts.LabelBullet

• LabelBullet Class

amCharts Coloring

• Different column fill colors for positive and negative values
• Colors, Gradients, Patterns

amCharts Data

• chart.invalidateRawData()
• Manipulating existing data points

amCharts Bar Chart Race

• Bar chart race Demo

amCharts Extra Configurations

• Modifying big number prefixes
• chart.zoomOutButton
  • Configuring the zoom out button

z_Slide.pdf