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.

Standard deviation

It's possible to add deviation lines into line charts.(math.html)
You can specify which datasets should use a maths function using drawMathDeviation. Every deviation has a

• deviationStrokeColor (default: rgba(220,220,220,1))
• deviationWidth which is the length of the horizontal lines at the top and bottopm of the vertical line (default: 0px)

var LineData = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{
			fillColor : "rgba(129, 172, 123, 0.5)",
			strokeColor : "rgba(129, 172, 123, 1)",
			pointColor : "rgba(129, 172, 123, 1)",
			pointStrokeColor : "#fff",
			drawMathDeviation: "stddev",
			deviationStrokeColor: "#000",
			deviationWidth: 5,
			data : [60,70,75,65,75,80,65],
      title : "line 1"
		}
	]
}

Previous Chapter          Previous Page          Next Page          Next Chapter          Top of Page