JavaScript
$(function () {
$("#chartContainer").CanvasJSChart(
{
animationEnabled: true,
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisX: {
intervalType: "day",
valueFormatString: "MMM DD| h TT",
//labelAngle: -20
},
axisY:{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{x: new Date( 2012, 01, 1, 1,0), y: 26 },
{x: new Date( 2012, 01, 1,2,0 ), y: 38 },
{x: new Date( 2012, 01, 1,3,0), y: 43 },
{x: new Date( 2012, 01, 1,4,0), y: 29},
{x: new Date( 2012, 01, 1,5,0), y: 41},
{x: new Date( 2012, 01, 1,6,0), y: 54},
{x: new Date( 2012, 01, 1,7,0), y: 66},
{x: new Date( 2012, 01, 1,8,0), y: 60},
{x: new Date( 2012, 01, 1,9,0), y: 53},
{x: new Date( 2012, 01, 1,10,0), y: 60}
]
},{
type: "spline",
showInLegend: true,
dataPoints: [
{ x: new Date( 2012, 01, 1, 1,0), y: 20 },
{ x: new Date( 2012, 01, 1, 2,0), y: 44},
{ x: new Date( 2012, 01, 1, 3,0), y: 35 },
{ x: new Date( 2012, 01, 1, 4,0), y: 40 },
{ x: new Date( 2012, 01, 1, 5,0), y: 90 },
{ x: new Date( 2012, 01, 1, 6,0), y: 50 },
{ x: new Date( 2012, 01, 1, 7,0), y: 18 },
{ x: new Date( 2012, 01, 1, 8,0), y: 30 },
{ x: new Date( 2012, 01, 1, 9,0), y: 11}
]
},
{
type: "line",
showInLegend: true,
dataPoints: [
{ x: new Date( 2012, 01, 1, 1,0), y: 20 },
{ x: new Date( 2012, 01, 1, 2,0), y: 44},
{ x: new Date( 2012, 01, 1, 3,0), y: 35...