Chart.js: A simple JS Chart Library

Chart.js is a JavaScript Chart Library with Open Source. It has a total of 6 in the Chart, all HTML5 based.

Below is a sample of the 6 charts provided by Chart.js, including line charts, column charts, pie charts, and so on, which makes it easy to implement the effects of dynamic graphs in HTML pages:

Line Chart	Bar Chart
Radar Chart	Pie Chart
Polar Area Chart	Doughnut Chart

Get started quickly

You can download chart.js:https://github.com/nnnick/chart.js to GitHub. Chart.js only need a. js file, you can choose the general version of the Chart.js, you can also choose the Slim version of the Chart.min.js.

After downloading from GitHub, there are 6 examples of Chart in the Samples folder. For example, after opening the samples/line.html, the browser immediately appears a line Chart:

The contents of the line.html are as follows (JavaScript section):

How to add data points dynamically?

It is a pity that Chart.js does not provide a method for dynamically increasing the number of locations. However, I took some time to study, found there is still a way. My approach is this: after modifying the contents of the datasets, call new chart again () to regenerate the chart. The following are examples of program code:

It is important to note that because Chart.js is animated when drawing, the animation must be set to Flase to turn off the animation.

You can then dynamically add data points:

Chart.js: A simple JS Chart Library