Chart.js

Chart.js is a simple chart generator for the HTML5 Canvas. It will dynamically change with changed data, and supports multiple lines in the same chart.

chart

The Chart.js is released under GNU GPL and is free for everyone to use or modify. If you find the script useful, or make modifications improving it’s functionallity, please let us know and we’ll try to keep this site up to date with the latest changes.

Installation

Download the script from here (current version 1.4):

Include it in your javascript and you’re good to go.

Documentation

The API documentation for Chart.js can be found here.

Example

Here is the code of a pretty straigtforward usage example:


var cv = document.createElement( "CANVAS" );
document.getElementById( "someElement" ).appendChild( cv );
cv.height = cv.scrollHeight;
cv.width = cv.scrollWidth;

var cData = {
  span: {
    minX: 0,
    minY: 0,
     maxX: 100
   },
   labels: {
     "00":0,
     "10":10,
     "15":15,
     "50":50,
     "99":99
   },
   datasets: [
     {
       label: "Test1",
       fillColor: "rgba( 250, 200, 200, 0.2 )",
       strokeColor: "rgba( 250,200,200,1 )",
       strokeWidth: 2,
       pointSize: 3,
       pointStrokeColor: "rgba(0,0,220,0.7)",
       data: { 0:15, 10:20, 20:23, 25:20, 39: 8, 42: 10, 90: 18, 100: 20, 120: 10 }
     },
     {
       label: "Test2",
       fillColor: "rgba( 200, 250, 200, 0.2 )",
       strokeColor: {0:"rgba( 200,250,200,1 )", 100:"rgba( 0,0,0,0.2)"},
       strokeWidth: 3,
       pointSize: 3,
       pointColor: "rgba( 0, 255, 0, 0.7 )",
       data: { 0:12, 10:16, 20:18, 30:15, 40: 14.2, 50: 19.3, 60: 24, 70: 25, 80: 12, 90: 10, 100: {value:8, pointColor:"red"} }
     }
   ]
 };

 var chart = new Chart( cv.getContext( "2d" ) );
 chart.setData( cData );

Configuration

The chart is generated from a data structure as seen above.
The initial span object defines the outer perimeters of the chart, and if any – or all – of the perimeters is omitted the chart will automatically calculate the value from the supplied data sets. (maxX, maxY, minX, minY)

The following labels object lists all the labels on the X-axis on the format ”label”:X-value. This will place the label on the corresponding position along the X-axis during rendering.

The datasets array contains dataset objects defining the properties of one line each. If fillColor is omitted no filling will be done under the line. If a pointSize is given every datapoint will have a circle representing it, filled with the optional pointFillColor and stroked with the optional pointColor styles.

The data object contains all the data points for the given line on the format [X]:[Y].

Support

If you have any questions or ideas, don’t hesitate to contact us.

Change log

Version 1.0, 2016-01-14
Initial release

Version 1.1, 2016-01-15
The [y] portion of the data point can be replaced with an object {value:Y, pointColor:”#000#, pointStrokeColor:”yellow”}, where the pointColor and pointStrokeColor can be omitted. If supplied however this will change the color of this specific data point.
chart_1.1

Also, by specifying chart.type = chart.TYPE_SQUARE before assigning data and rendering the chart it will render a square chart instead of the line chart.

sqare

For square charts the fillColor of each data point can be assigned in the object that replaces the [Y] value.
Also added the showXlabels, and showYlabels flags making hiding the labels for the X- and Y-axis possible.

Version 1.2, 2016-03-31
Added methods for dynamically loading data via AJAX call.
Added support for gradient colors using an object as fill- or strokeColor like {val:col,val2:col2} adding gradient on the Y axis between value val and val2 spanning the colors col and col2.

Version 1.3, 2016-04-01
Added callback for update, ie. set chart.callback=function(data){} and the function will be called after every update with the latest dataset
Added headers, chart.showHeaders=true will show headers to the right of the chart (default), false to hide them
Added nearest value display, chart.showClosest=true will show a div with the values of the closest datapoint of each dataset, false will hide (default)
chart1.3

Version 1.31, 2016-04-13
Added backgroundStyle to determine how to fill the background of the chart when rendering. Default value is rgba(255,255,255,0.8) which gives a somewhat transparent white. Change this by setting chart.backgroundStyle to a proper fillStyle value.
Bugfix regarding negative Y-values in span. Now the scale is correct for negative spans as well.

Version 1.4, 2017-06-02
Added a method to append data points to the chart, either allowing it to grow, or truncating older data keeping the total span constant.
The syntax is appendData( data, grow ), where data is an object on the form {x:x-value, datasets:[value1, value2, value3]} where the respective value in the datasets array will be added to the corresponding dataset in the chart. The grow parameter is a boolean, wether or not the span is allowed to grow.

  chart.appendData( {x: 123, datasets:[5,4,6]}, false );