Display Census Data as Heatmaps

Overview
Sample Image
Prepare the App
Sample Code

Overview

This article introduces a sample customization using Amcharts5 . The sample displays the record list in a US Census App in the form of a heatmap:

The colors set in the heatmap will vary according to the value of the population field of the Census App.
The heatmap will be displayed on the Header Space Element of the App, which lies above the list of records.

Sample Image

The heatmap is displayed when the user navigates to the Record List page of the App.

Prepare the App

Create the form

Create an App with the following fields.

Field Type	Field Name	Field Code
Text	State	state
Text	Code	code
Number	Population	population

Populate the App with Data

The map needs to be populated with data. One convenient way is to import large amounts of data via a CSV file. Create a CSV file in the following format:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


state,code,population
Alabama,US-AL,5074296
Alaska,US-AK,733583
Arizona,US-AZ,7359197
Arkansas,US-AR,3045637
California,US-CA,39029342
Colorado,US-CO,5839926
Connecticut,US-CT,3626205
Delaware,US-DE,1018396
District of Columbia,US-DC,671803
Florida,US-FL,22244823
Georgia,US-GA,10912876
Hawaii,US-HI,1440196
Idaho,US-ID,1939033
Illinois,US-IL,12582032
Indiana,US-IN,6833037
Iowa,US-IA,3200517
Kansas,US-KS,2937150
Kentucky,US-KY,4512310
Louisiana,US-LA,4590241
Maine,US-ME,1385340
Maryland,US-MD,6164660
Massachusetts,US-MA,6981974
Michigan,US-MI,10034113
Minnesota,US-MN,5717184
Mississippi,US-MS,2940057
Missouri,US-MO,6177957
Montana,US-MT,1122867
Nebraska,US-NE,1967923
Nevada,US-NV,3177772
New Hampshire,US-NH,1395231
New Jersey,US-NJ,9261699
New Mexico,US-NM,2113344
New York,US-NY,19677151
North Carolina,US-NC,10698973
North Dakota,US-ND,779261
Ohio,US-OH,11756058
Oklahoma,US-OK,4019800
Oregon,US-OR,4240137
Pennsylvania,US-PA,12972008
Rhode Island,US-RI,1093734
South Carolina,US-SC,5282634
South Dakota,US-SD,909824
Tennessee,US-TN,7051339
Texas,US-TX,30029572
Utah,US-UT,3380800
Vermont,US-VT,647064
Virginia,US-VA,8683619
Washington,US-WA,7785786
West Virginia,US-WV,1775156
Wisconsin,US-WI,5892539
Wyoming,US-WY,581381

The CSV can then be imported from the list of records page. For more information on importing record data from files, refer to the Importing Record Data from a File into an App article.

Set up the JavaScript Settings

This example uses the Amcharts5 CDN. For more information on the specific JavaScript libraries offered, refer to the Amcharts5 Download Page . Set the following URLs into the Upload JavaScript/CSS Files for PC option of the App's JavaScript and CSS Customization settings .

https://cdn.amcharts.com/lib/5/index.js
https://cdn.amcharts.com/lib/5/map.js
https://cdn.amcharts.com/lib/5/themes/Animated.js
https://cdn.amcharts.com/lib/5/geodata/usaLow.js

Sample Code

Set the JavaScript file

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript/CSS Files for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68


/*
 sample-amcharts5.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';

    // Create root
    var root = am5.Root.new(spaceDiv);

    // Set the animation theme
    root.setThemes([
      am5themes_Animated.new(root)
    ]);

    // Create chart. The projection will vary depending on the region your map will display.
    var chart = root.container.children.push(
      am5map.MapChart.new(root, {
        panX: 'rotateX',
        panY: 'none',
        projection: am5map.geoAlbersUsa()
      })
    );

    // Create polygon series
    var polygonSeries = chart.series.push(
      am5map.MapPolygonSeries.new(root, {
        geoJSON: am5geodata_usaLow,
        valueField: 'value',
        calculateAggregates: true
      })
    );

    // Edit the tooltip to be displayed when hovering over the map
    polygonSeries.mapPolygons.template.setAll({
      tooltipText: '{name}: {value}'
    });

    // Create a new theme for the heatmap functionality
    polygonSeries.set('heatRules', [{
      target: polygonSeries.mapPolygons.template,
      dataField: 'value',
      min: am5.color(0xff621f),
      max: am5.color(0x661f00),
      key: 'fill'
    }]);

    // Create JSON object from Kintone records & pass it onto amCharts
    var polygonData = event.records.map(function(record) {
      return {
        'id': record.code.value,
        'value': Number(record.population.value)
      };
    });
    polygonSeries.data.setAll(polygonData);
  });
})();

Update the Settings

The files set in the JavaScript and CSS Customization settings should look like the following.

Attention

The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the Amcharts5 libraries are uploaded before the sample JavaScript file. The order of the uploads can be changed by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

Click Save, and then on Update App. Navigate to any view inside the Kintone App, a heatmap of the United States population should be displayed above the record data for the app.