Display radar charts with chart.js

Introduction

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.

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

Completed image (for kintone mobile)

US_1.PNG

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

Check the "Show fields in this group" option

Blank space

--

Radar

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.

US_2.PNG

 

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

Access your App's settings, and go to “JavaScript and CSS Customization”. Under "Upload JavaScript for PC", click on “Add Link”, and paste the CDN URL. Do the same for for the "Upload JavaScript File for Mobile Devices" option.

Upload custom JavaScript

Copy the below code to a text editor, and save it as a .js file. Also add this file to “JavaScript and CSS Customization” and "Upload JavaScript File for Mobile Devices" through the "Add file" option.

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

US_1.PNG

 

Chart.js radar chart on a PC browser

US_3.PNG

 

Was this article helpful?
1 out of 1 found this helpful
Comments
Please sign in to leave a comment.