Sync Zooming and Panning Across Multiple Jquery Charts - CanvasJS JavaScript Charts

Sync Zooming and Panning Across Multiple Jquery Charts - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
<div id="chartContainer3" style="height: 300px; width: 100%;"></div>
<input id="test" type="button" value="Scale Change" onclick="scaleChange();return false;"/>

<script type="text/javascript">
function scaleChange(){
	var chart = $("#chartContainer1").CanvasJSChart();
  chart.axisY[0].set("maximum",100);
  chart.axisY[0].set("minimum",-100);

  chart = $("#chartContainer2").CanvasJSChart();
  chart.axisY[0].set("maximum",100);
  chart.axisY[0].set("minimum",-100);  

  chart = $("#chartContainer3").CanvasJSChart();
  chart.axisY[0].set("maximum",100);
  chart.axisY[0].set("minimum",-100);
  $(".canvasjs-chart-toolbar").css("display", "none");
}
</script>

JavaScript

//--------------- DataPoints Generator ---------------//
 function dataPointsGenerator(limit) {
   var y = 0;
   var dataPoints = [];
   for (var i = 0; i < limit; i += 1) {
     y += Math.round(5 + Math.random() * (-5 - 5));
     dataPoints.push({
       x: i,
       y: y
     });
   }
   return dataPoints;
 }

 var dataPoints1 = dataPointsGenerator(100);
 var dataPoints2 = dataPointsGenerator(100)
 var dataPoints3 = dataPointsGenerator(100)

 //--------------- Chart 1 ---------------//
 $("#chartContainer1").CanvasJSChart({
   //var chart1 = new CanvasJS.Chart("chartContainer1", {
   zoomEnabled: true,
   zoomType: "x", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart1 - Try Zooming / Panning"
   },
   data: [{
     type: "line",
     dataPoints: dataPoints1
   }],
   rangeChanged: syncHandler
 });

 chart1 = $("#chartContainer1").CanvasJSChart();

 //--------------- Chart 2 ---------------//
 $("#chartContainer2").CanvasJSChart({
   //var chart2 = new CanvasJS.Chart("chartContainer2", {
   zoomEnabled: true,
   zoomType: "x", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart2 - Try Zooming / Panning"
   },
   data: [{
     type: "line",
     dataPoints: dataPoints2
   }],
   rangeChanged: syncHandler
 });

 chart2 = $("#chartContainer2").CanvasJSChart()

 //--------------- Chart 2 ---------------//
 $("#chartContainer3").CanvasJSChart({
   //var chart3 = new CanvasJS.Chart("chartContainer3", {
   zoomEnabled: true,
   zoomType: "x", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart3 - Try Zooming / Panning"
   },
   data: [{
     type: "line",
     dataPoints: dataPoints3
   }],
   rangeChanged: syncHandler
 });

 chart3 = $("#chartContainer3").CanvasJSChart()

 //--------------- Syncing the charts ---------------//
 var charts = [chart1, chart2, chart3]; // add all charts (with axes) to be synced

 function syncHandler(e) {

   for (var i = 0; i < charts.length;...