Use Chart.js Chart Gallery to make beautiful responsive forms _javascript tips

Basics of Getting Started

Chart.js is an open source chart library based on HTML5, which makes it easy to draw beautiful graphs.

Key features include:

1, support 6 kinds of different forms: graphs, columns, pie, radar, polar coordinates area map, ring diagram.
2, based on HTML5 development, support all browsers (including IE7/8).
3, do not rely on any other library, only 4.5k size, and can be customized.

Chart.js is a responsive, flexible, lightweight chart library based on HTML5 canvas. There are six different types of charts available in the library, each with a series of custom options. If that's not enough, you can also create your own chart type.

Chart.js's six chart type code is only one KB large, and gzip compression processing, in addition to the library is modular, you can only use the chart type you need to further save space. The following is a CDNJS link that contains the library.

Javascript

<script src= "Https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" ></script>

Available Settings items

From the tip to the animation effect (Note: Tool tip refers to a pop-up message that moves the mouse over an element), Chart.js allows you to change almost all the features of the chart. In this section, I'll modify some of the settings to show how Chart.js was created. We'll start with the following HTML code:

Xhtml

<canvas id= "Canvas" ></canvas>

For the first presentation, I'll create a line chart. To make the chart meaningful, here are a few basic options to set. A line chart requires an array of labels and a dataset. The label will be displayed on the X axis. I've simulated some data for a line chart, which is separated into an array, each with its own fill color, a polyline, and a set of points.

In this example, I set the fillcolor to transparent. If you do not set the FillColor value, the default setting is black or gray. This also applies to other values. Colors are defined using the RGBA, RGB, Hex, or HSL formats, and are the same as CSS.

Javascript

var linedata = {
 Labels: [' Data 1 ', ' Data 2 ', ' Data 3 ', ' Data 4 ', ' Data 
      5 ', ' Data 6 ', ' Data 7 '],
 datasets: [{ C6/>fillcolor: ' Rgba (0,0,0,0) ',
  strokecolor: ' Rgba (220,180,0,1) ',
  pointcolor: ' Rgba (220,180,0,1) '
  , Data: [A, M, p, m]
 }, {
  fillcolor: ' Rgba (0,0,0,0) ',
  strokecolor: ' Rgba (151,187,205,1) ', C13/>pointcolor: ' Rgba (151,187,205,1) ', data: [A, M, M, N]
}]}

Set global options

I've set some global values in the code. Animationsteps determines the duration of the animation. Depending on your needs, you can modify more options, such as Scalelinecolor and scaleintegersonly. I recommend browsing the Chart.js document to see the other options available in the library.

Javascript

Chart.defaults.global = {
 animationsteps:50,
 tooltipypadding:16,
 tooltipcornerradius:0,
 Tooltiptitlefontstyle: ' normal ',
 tooltipfillcolor: ' Rgba (0,160,0,0.8) ',
 animationeasing: ' Easeoutbounce ',
 scalelinecolor: ' Black ',
 scalefontsize:16
}

Set up a proprietary chart option

In addition to the global options, there are some configuration options for a particular chart type. In this line chart, I'm going to set up this type of option, and I want to inspire you:

Javascript

Chart.defaults.global = {
animationsteps:50,
tooltipypadding:16,
tooltipcornerradius:0,
Tooltiptitlefontstyle: ' normal ',
tooltipfillcolor: ' Rgba (0,160,0,0.8) ',
animationeasing: ' Easeoutbounce ',
scalelinecolor: ' Black ',
scalefontsize:16
}

The chart.js generated chart defaults to a non responsive type. Set responsive to true to turn it into a response chart. If you need to make each chart responsive, I recommend setting a global value, like this:

Javascript

Chart.defaults.global.responsive = true;

Below you will see an example of this line chart:

The Pen chart.js responsive line Chart Demo by SitePoint (@SitePoint) on Codepen.

Adding and removing Dynamic Data

Sometimes you need to show data that is constantly changing. The stock market is a typical example of this application scenario. In this section, I will create a column chart and add data while the data is deleted dynamically. I'll use some random data, and in this case I'll show the data through a column chart. Most of the code in this example is similar to the previous example. Once we have our own HTML (as in the previous example), we can add our own JavaScript.

First we need to write code to populate the chart with Dynamic Data. I use a function expression to generate a random value and then assign it to a variable ddata. These values provide us with random data when we need to change. As in previous examples, I created a tag array and dataset, and set up an arbitrary fillcolor.

Javascript

var ddata = function () {return
 Math.Round (Math.random () *) +;
};
var bardata = {
 Labels: [' DD 1 ', ' DD 2 ', ' dd 3 ', ' DD 4 ',
      ' dd 5 ', ' DD 6 ', ' DD 7 ', ' DD 8 '],
 datasets: [{
  fil Lcolor: ' Rgba (0,60,100,1) ',
  strokecolor: ' Black ',
  data: [Ddata (), Ddata (), Ddata (), Ddata (), Ddata (),
      Ddata (), Ddata (), Ddata ()]}
 ]
}

It's time to write code to delete and add columns to our chart. At first we initialized the value of index 11, and I used two methods: Removedata () and AddData (Valuesarray,label). The Removedata () method of the calling instance deletes the first value of all datasets in the chart. In the case of Barchartdemo, the first value of the dataset is removed. Call AddData () passes an array value along the label, adding a new data node at the end of the chart. The following code fragment updates the chart every 3 seconds.

Javascript

var index = one;
var ctx = document.getElementById (' canvas '). GetContext (' 2d ');
var Bardemo = new Chart (CTX). Bar (BarData, {
 responsive:true
});
SetInterval (function () {
 bardemo.removedata ();
 Bardemo.adddata ([Ddata ()], ' DD ' + index);
 index++;
}, 3000);

Another way to update chart values is to set numeric values directly. In the following example, the first row sets the value of the second column of the first dataset to 60. If you update at this point, the column will animate its current value to 60.

Javascript

Bardemo.datasets[0].bars[2].value =;
Bardemo.update ();

Here is an example of a column chart (created by SitePoint on Codepen):

The Pen chart.js responsive Bar Chart Demo by SitePoint (@SitePoint) on Codepen.

Conclusion

This tutorial covers some of the important features of Chart.js. The first example shows the use of some global settings, and Chart.js also provides specific customizations for each chart type. If the currently available chart doesn't meet your needs, you can also create your own chart type. I recommend browsing the documentation to deepen your understanding of what the library can do and what it cannot do.