JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
axisY: {
gridThickness: 0,
stripLines: [{
value: 54, //average
color: 'green',
thickness: 2
},
{
value: 66,//upper limit
color: 'red',
thickness: 2
},
{
value: 26,//lower limit
color: 'red',
thickness: 2
}]
},
data: [{
type: "area",
dataPoints: [//array
{ x: new Date(2012, 01, 1), y: 26},
{ x: new Date(2012, 01, 3), y: 38},
{ x: new Date(2012, 01, 5), y: 43},
{ x: new Date(2012, 01, 7), y: 29},
{ x: new Date(2012, 01, 11), y: 41},
{ x: new Date(2012, 01, 13), y: 54},
{ x: new Date(2012, 01, 20), y: 66},
{ x: new Date(2012, 01, 21), y: 60},
{ x: new Date(2012, 01, 25), y: 53},
{ x: new Date(2012, 01, 27), y: 60}
]
},
{ //dummy dataSeries for legend - average
type: "line",
color: "transparent",
legendMarkerColor: "green",
showInLegend: true,
dataPoints: []
},
{ //dummy dataSeries for legend - upper limit
type: "line",
color: "transparent",
legendMarkerColor: "red",
showInLegend: true,
dataPoints: []
},
{ //dummy dataSeries for legend - lower limit
type: "line",
color: "transparent",
legendMarkerColor: "red",
showInLegend: "true",
dataPoints: []
}
]
});
chart.options.data[1].name = "average (114)";
chart.options.data[2].name = "upper limit (130)";
chart.options.data[3].name = "lower limit (90)";
chart.options.data[1].dataPoints.push({ x: new Date(chart.options.data[0].dataPoints[0].x), y: 0 });
chart.options.data[2].dataPoints.push({ x: new Date(chart.options.data[0].dataPoints[0].x), y: 0 });
chart.options.data[3].dataPoints.push({ x: new Date(chart.options.data[0].dataPoints[0].x), y: 0 });
chart.render();