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.

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

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.

After creating the App, add a few records inside.

Set the library

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

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

(() => {
  'use strict';

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

  kintone.events.on(eventsDetailShow, (event) => {
    let record = event.record;
    let inputTitle = record.name.value + '\'s Grade';

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

    // Configure the data to be displayed
    let 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
        ]
      }]
    };

    let elRadar;
    let 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();

      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_space');
      elCanvas.height = '400';
      elCanvas.width = '400';
    }

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

    let 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.

Reference