Display radar charts with chart.js

Introduction

This article introduces a customizing method for displaying radar charts in a Kintone record. An example grade report app is used in this article where student's grades are displayed in a radar chart form when the record is opened. This customization uses Chart.js, which is provided in the Kintone CDN.

Chart.js
is a JavaScript library that draws pie charts, line charts, bar graphs, and radar charts.

The customization result for Kintone mobile view

Customization displayed in Kintone's Mobile view

Create the App

The Kintone App first needs to have the following fields and settings.

Field Type Field Name Field Code
(or Element ID)
Notes
Text Name name --
Field group Chart chart_group Check the "Show fields in this group" option
Blank space -- radar_space Set this filed inside the Field Group
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

App Form Settings

This is what the layout would look like on the Form settings.

Kintone's Form setting with Name field on top, the Chart Field group, with Bank space field inside, appears next, then Language Arts, Math, Science, Social Studies, and P.E. Number fields are lines up. Lastly, the Total and Average calculation fields are placed.

 

Copy the URL of Chart.js from Kintone CDN.

Copy the Chart.js library link from the Kintone CDN page.
The example code below will use Chart.js v2.7.3.
https://js.kintone.com/chartjs/v2.7.3/Chart.min.js

Access the Customization settings and paste the CDN link

Access the App's setting and go to JavaScript and CSS Customization. Under both Upload JavaScript for PC and Upload JavaScript File for Mobile Devices, add the CDN URL by clicking on Add Link.

Upload custom JavaScript

Save the JavaScript code below as a .js file. Add this file to JavaScript and CSS Customization and Upload JavaScript File for Mobile Devices with the Add file option.

For reference on functions and specifications for Chart.js, visit their website.

The Customization Result

Add a new record to display the chart.

 

Chart.js radar chart on the Kintone mobile

Customization displayed in Kintone's Mobile view

 

Chart.js radar chart on a PC browser

Customization displayed in Kintone's PC/ Desktop view

 

Finally

The Chart.js website provides extensive information to take full advantage of their charting JavaScript library.
For more examples of charts created with Chart.js, refer to their Samples webpage.
Want to customize the chart further? Check out their Chart.JS Getting Started tutorial for more details on chart options and configurations.

For another example of a chart integration with Kintone, refer to Display Gantt Charts article.

As always, for any questions or concerns with Kintone customization, please post on the Kintone Developer Program community.

Was this article helpful?
1 out of 1 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!