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.

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