Use the Chart. js chart library to create a beautiful Response Form and Chart. js chart library form

Use the Chart. js chart library to create a beautiful Response Form and Chart. js chart library form

Basics

Chart. js is an open-source HTML5-based Chart library that allows you to easily and easily draw beautiful charts.

Main features include:

1. Six different table types are supported: graph, bar chart, pie chart, radar chart, polar region chart, and cycle chart.
2. HTML5-based development, supporting all browsers (including IE7/8 ).
3. It does not depend on any other database and is only 4.5k in size and can be customized.

Chart. js is a responsive, flexible, lightweight Chart Library Based on HTML5 canvas. The Library provides six different chart types, each with a series of custom options. If this is not enough, you can create your own chart type.

Chart. the code for the six chart types in js is only 11 kb in total, and gzip compression is performed. In addition, the Library is modular and you can only use the chart types you need, this further saves space. Below is the 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

Chart. js allows you to change almost all the features of a Chart, from the prompt information to the animation effect (Note: tool tip refers to the prompt information popped up when you move the mouse over an element. In this section, I will modify some settings to show how Chart. js is created. We will start with the following HTML code:

XHTML

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

For the first demonstration, I will create a line chart. To make the chart meaningful, there are several basic options to be set. A line chart requires a tag array and a dataset. The labels are displayed on the X axis. I have already simulated some data for the line chart, which are separated into an array. Each data has its own fill color, line, and point set.

In this example, I set fillColor to transparent. If you do not set the fillColor value, the default value is black or gray. This applies to other values. Colors are defined in RGBA, RGB, hex, or HSL format, which is the same as CSS.

JavaScript

var lineData = { labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4',       'Data 5', 'Data 6', 'Data 7'], datasets: [{  fillColor: 'rgba(0,0,0,0)',  strokeColor: 'rgba(220,180,0,1)',  pointColor: 'rgba(220,180,0,1)',  data: [20, 30, 80, 20, 40, 10, 60] }, {  fillColor: 'rgba(0,0,0,0)',  strokeColor: 'rgba(151,187,205,1)',  pointColor: 'rgba(151,187,205,1)',  data: [60, 10, 40, 30, 80, 30, 20] }]}

Set Global Options

I have set some global values in the code. AnimationSteps determines the animation duration. You can modify more options, such as scaleLineColor and scaleIntegersOnly. I suggest you browse the Chart. js document to view other options 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 exclusive chart options

In addition to global options, there are also some configuration options for specific chart types. In this line chart, I will set this type of options 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}

Charts generated by Chart. js are non-responsive by default. Setting responsive to true can convert it to a responsive chart. If you want to make every chart responsive, we recommend that you set global values like this:

JavaScript

Chart.defaults.global.responsive = true;

The following shows an example of this line chart:

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

Add and remove Dynamic Data

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

First, we need to write code to fill the dynamic data into the chart. I use the function expression to generate a random value and then assign it to the variable dData. These values provide random data as needed. As in the previous example, I created a tag array and dataset and set any fillColor.

JavaScript

var dData = function() { return Math.round(Math.random() * 90) + 10;};var barData = { labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',      'dD 5', 'dD 6', 'dD 7', 'dD 8'], datasets: [{  fillColor: 'rgba(0,60,100,1)',  strokeColor: 'black',  data: [dData(), dData(), dData(), dData(),      dData(), dData(), dData(), dData()] }]}

Now it is time to write code to delete and add a column for our chart. At the beginning, we initialized the index value to 11. I used two methods: removeData () and addData (valuesArray, label ). Call the removeData () method of the instance to delete the first value of all datasets in the chart. In the barChartDemo example, the first value of the dataset is removed. Call addData () to pass an array value along the label and add a new data node at the end of the chart. The following code snippet updates the chart every 3 seconds.

JavaScript

var index = 11;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 the chart value is to directly set the value. In the following example, the first row sets the value of the second column of the First dataset to 60. If you update the column at this time, the animation changes its current value to 60.

JavaScript

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

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

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

Conclusion

This tutorial covers some important functions of Chart. js. The first example shows how to use some global settings. Chart. js also provides exclusive custom settings for each Chart type. If currently available charts cannot meet your needs, you can also create your own chart types. I recommend that you browse the document to learn more about what the database can do and what it cannot do.