JavaScript
var chart1 = new CanvasJS.Chart("chartContainer1", {
zoomEnabled: true,
zoomType: "x", // change it to "xy" to enable zooming on both axes
title: {
text: "Chart 1"
},
toolTip:{
shared: true
},
data: [{
type: "line",
dataPoints: [
{ x: new Date(1992, 0), y: 2500000999 },
{ x: new Date(1993, 0), y: 2798000 },
{ x: new Date(1994, 0), y: 3386000 },
{ x: new Date(1995, 0), y: 6944000 },
{ x: new Date(1996, 0), y: 6026000 },
{ x: new Date(1997, 0), y: 2394000 },
{ x: new Date(1998, 0), y: 1872000 },
{ x: new Date(1999, 0), y: 2140000 },
{ x: new Date(2000, 0), y: 7289000 },
{ x: new Date(2001, 0), y: 4830000999 },
{ x: new Date(2002, 0), y: 2009000 },
{ x: new Date(2003, 0), y: 2840000 },
{ x: new Date(2004, 0), y: 2396000 },
{ x: new Date(2005, 0), y: 1613000 },
{ x: new Date(2006, 0), y: 2821000 }
]
}],
rangeChanged: syncHandler
});
var chart2 = new CanvasJS.Chart("chartContainer2", {
zoomEnabled: true,
zoomType: "x",
title: {
text: "Chart 2"
},
toolTip:{
shared: true
},
data: [{
type: "line",
dataPoints: [
{ x: new Date(1992, 0), y: 20000000000000 },
{ x: new Date(1993, 0), y: 3 },
{ x: new Date(1994, 0), y: 4 },
{ x: new Date(1995, 0), y: 5 },
{ x: new Date(1996, 0), y: 6 },
{ x: new Date(1997, 0), y: 7 },
{ x: new Date(1998, 0), y: 8 },
{ x: new Date(1999, 0), y: 9 },
{ x: new Date(2000, 0), y: 10 },
{ x: new Date(2001, 0), y: 11 },
{ x: new Date(2002, 0), y: 12 },
{ x: new Date(2003, 0), y: 13 },
{ x: new Date(2004, 0), y: 14...