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.
The customization result for Kintone 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)
|Field group||Chart||chart_group||Check the "Show fields in this group" option|
|Blank space||--||radar_space||Set this filed inside the Field Group|
|Calculated||Total||total|| Set the formula as
language_arts + math + science + social_studies + pe
|Calculated||Average||average||Set the formula as
App Form Settings
This is what the layout would look like on the Form settings.
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.
Access the Customization settings and paste the CDN link
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
Chart.js radar chart on a PC browser
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.