JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Line and Column chart Demo"
},
axisX: {
interval:1,
intervalType: "month",
labelAngle: -45,
},
data: [
{
type: "line",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 400 },
{ x: new Date(2012, 01, 1), y: 400 },
{ x: new Date(2012, 02, 1), y: 400 },
{ x: new Date(2012, 03, 1), y: 400 },
{ x: new Date(2012, 04, 1), y: 400 },
{ x: new Date(2012, 05, 1), y: 400 },
{ x: new Date(2012, 06, 1), y: 400 },
{ x: new Date(2012, 07, 1), y: 400 },
{ x: new Date(2012, 08, 1), y: 400 },
{ x: new Date(2012, 09, 1), y: 400 },
{ x: new Date(2012, 10, 1), y: 400 },
{ x: new Date(2012, 11, 1), y: 400 }
]
},
{
type: "column",
color: "rgba(125,120,123,.4)",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 400 },
{ x: new Date(2012, 01, 1), y: 385 },
{ x: new Date(2012, 02, 1), y: 500 },
{ x: new Date(2012, 03, 1), y: 360 },
{ x: new Date(2012, 04, 1), y: 350 },
{ x: new Date(2012, 05, 1), y: 600 },
{ x: new Date(2012, 06, 1), y: 280 },
{ x: new Date(2012, 07, 1), y: 380 },
{ x: new Date(2012, 08, 1), y: 110 },
{ x: new Date(2012, 09, 1), y: 200 },
{ x: new Date(2012, 10, 1), y: 680 },
{ x: new Date(2012, 11, 1), y: 310 }
]
}
]
});
chart.render();