Display Radar Charts

Contents

Overview

This article introduces how to display radar charts on Kintone’s Record Detail page. Data from 5 Number fields are retrieved, and are set on a radar chart created with Chart.js (External link). Chart.js (External link) is a JavaScript library that draws pie charts, line charts, bar graphs, and radar charts.

Sample Image

In this example, when the user navigates to the Record Detail page, a radar chart of a student’s grade is displayed.

A screenshot of the Record Details page with a radar chart on the Desktop View.

The radar chart can also be viewed through the mobile view (External link).

A screenshot of the Record Details page with a radar chart on the Mobile View.

Prepare the App

Create the form

Create an App (External link) named “Student Grades” with the following fields and settings.

Field Type Field Name Field Code
(or Element ID)
Notes
Text Name name
Blank space radar_space
Number Language Arts language_arts
Number Math math
Number Science science
Number Social Studies social_studies
Number P.E. pe
Calculated Total total Set the formula as
language_arts + math + science + social_studies + pe
Calculated Average average Set the formula as
total/5

The form should look like the below screenshot.

A screenshot of the created form.

After creating the App, add a few records inside.

Set the library

This example uses Chart.js (External link) v3.6.0. Set the following URL from the Kintone CDN into the App’s JavaScript and CSS Customization settings (External link).

  • https://js.kintone.com/chartjs/v3.6.0/Chart.min.js

Sample code

Type the following code into a text editor and save it as a JavaScript file. Upload it to the App’s JavaScript and CSS Customization settings (External link).

 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/*
 * Radar chart sample program
 * Copyright (c) 2022 kintone Corp
 * Licensed under the MIT License
 * Uses ChartJS v3.6.0
 *   https://js.kintone.com/chartjs/v3.6.0/Chart.min.js
 */

(function() {
  'use strict';

  // Display the chart on the record details page (PC and mobile)
  var eventsDetailShow = [
    'app.record.detail.show',
    'mobile.app.record.detail.show'
  ];

  kintone.events.on(eventsDetailShow, function(event) {
    var record = event.record;
    var inputTitle = record.Name.value + '\'s Grade';

    // Configure the Radar chart's options
    var inputOptions = {
      plugins: {
        title: {
          display: true,
          text: inputTitle
        }
      }
    };

    // Configure the data to be displayed
    var inputData = {
      labels: ['Language Arts', 'Math', 'Science', 'Social Studies', 'P.E.'],
      datasets: [{
        // Format for the data points
        label: 'Score',
        borderColor: 'rgba(0,140,232,.4)',
        radius: 6,
        pointRadius: 6,
        pointBackgroundColor: 'rgba(0,140,232,.4)',
        pointBorderWidth: 3,
        backgroundColor: 'rgba(0,140,232,.4)',

        // Extracting data from Kintone fields
        data: [
          record.language_arts.value,
          record.math.value,
          record.science.value,
          record.social_studies.value,
          record.pe.value
        ]
      }]
    };

    var elRadar;
    var elCanvas = document.createElement('canvas');
    elCanvas.id = 'canvas';

    // Display radar chart onto the Blank space
    // Edit display size depending on PC or mobile
    if (event.type === 'mobile.app.record.detail.show') {
      elRadar = kintone.mobile.app.getHeaderSpaceElement();

      // Hide the 'chart_group' Group field when in Mobile view
      kintone.mobile.app.record.setFieldShown('chart_group', false);
      elCanvas.style.position = 'relative';
      elCanvas.style.top = '10px';
      elCanvas.style.left = '10px';
      elCanvas.height = '300';
      elCanvas.width = '300';
    } else {
      // PC view
      elRadar = kintone.app.record.getSpaceElement('Radar');
      elCanvas.height = '400';
      elCanvas.width = '400';
    }

    elRadar.appendChild(elCanvas);
    var Chart_Configuration = {
      type: 'radar',
      data: inputData,
      title: inputTitle,
      options: inputOptions
    };

    var myChart = new Chart(elCanvas.getContext('2d'), Chart_Configuration);
    console.log(Chart_Configuration);
  });
})();
caution
Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the Chart.js library is uploaded before the JavaScript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

After saving the settings and clicking on Update App, navigate to the Record Details page of a record. The number fields in the record should be displayed as a Radar chart. This can also be viewed on the mobile view.

Customization displayed in Kintone's Mobile view

Reference