In this article, we introduce a customizing method for displaying radar charts. In this example, we will display radar charts for a grade report, when the record details page is displayed. This customization uses Chart.js, which is provided in the kintone CDN.
Completed image (for kintone mobile)
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||Check the "Show fields in this group" option|
|Blank space||--||Radar||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.
For the example in this article, we will use the 2016 February version: https://js.kintone.com/chartjs/v1.0.2/Chart.min.js
Access the Customization settings and paste the CDN link
For reference on functions and specifications for Chart.js, visit their website.
Add a new record to display the chart
Add a new record, and save it to view the chart data.
Chart.js radar chart on the kintone mobile
Chart.js radar chart on a PC browser