JavaScript
var chart1 = new CanvasJS.Chart("chartContainer1", {
title: {
text: "Stock Data"
},
toolTip:{
shared: true
},
axisX: {
labelAutoFit: false,
crosshair: {
enabled: true
}
},
axisY: {
includeZero:false,
crosshair: {
enabled: true
}
},
data: [
{
type: "candlestick",
dataPoints: [
{x: new Date(2012,02,01),y:[313.8 , 316.41, 311.00, 315.54]},
{x: new Date(2012,03,01),y:[313.25, 317.33, 309.51, 316.80]},
{x: new Date(2012,04,01),y:[316.36, 320.00, 313.92, 317.54]},
{x: new Date(2012,05,01),y:[317.3 , 318.00, 301.23, 307.54]},
{x: new Date(2012,06,01),y:[308.56, 310.70, 304.54, 308.85]},
{x: new Date(2012,07,01),y:[305.44, 310.32, 305.04, 306.52]},
{x: new Date(2012,08,01),y:[306.50, 308.26, 300.60, 305.20]},
{x: new Date(2012,09,01),y:[302.00, 308.00, 301.00, 303.70]},
{x: new Date(2012,10,01),y:[300.10, 313.39, 300.00, 313.26]},
{x: new Date(2012,11,01),y:[312.00, 318.63, 311.04, 311.23]},
{x: new Date(2013,00,01),y:[314.60, 316.98, 311.26, 315.13]},
{x: new Date(2013,01,01),y:[314.63, 329.01, 313.75, 328.91]},
{x: new Date(2013,02,01),y:[330.45, 341.44, 330.02, 341.02]},
{x: new Date(2013,03,01),y:[340.93, 344.22, 336.50, 339.02]},
{x: new Date(2013,04,01),y:[341.01, 347.44, 336.89, 337.89]},
{x: new Date(2013,05,01),y:[342.04, 343.89, 335.76, 343.45]},
{x: new Date(2013,06,01),y:[344.9 , 346.73, 337.57, 338.86]},
{x: new Date(2013,07,01),y:[340.26, 341.48, 330.29, 331.10]},
{x: new Date(2013,08,01),y:[332.7 , 333.10, 325.04, 328.98]},
{x: new Date(2013,09,01),y:[329.58, 333.73, 327.20, 331.66]}
]
}
]
});
var chart2 = new CanvasJS.Chart("chartContainer2", {
title: {
text: " Price Volume Trend"
},
toolTip:{
shared: true
},
axisX: {
labelAutoFit: false,
crosshair: {
enabled: true
}
...