070_010_Line

Previous Chapter          Previous Page          Next Page          Next Chapter          Table of content

Line

var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40],
        title : "Year 2014"
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100],
        title : "Year 2013"
    }
]
}

The line chart requires an array of labels for each of the data points. This is show on the X axis.

The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.

For each line, you can give a “title”.

Instead of assigning a real color to the fillColor, strokeColor, pointColor and/or pointStrokeColor variable, you can assign a function that returns a color. See chapter “Color Function” later on.

Line with points not associated to the labels

In previous description, we have seen how to draw a line where the X value is associated to a label : you can not draw a point located in the middle of two month !

The structure has been extended so that you can draw graphs with points in the middle of two labels.

You will be able to draw graph like this :

(28/07/2014 - documentation will be available soon)

Draw math function

It's possible to draw the mean or standard deviation as a part of a line chart.
Example: (math.html)
How to include and more inforation about these math functions: Math functions

Previous Chapter          Previous Page          Next Page          Next Chapter          Top of Page