Sync Zooming and Panning Across Multiple Charts - CanvasJS JavaScript Charts

Sync Zooming and Panning Across Multiple 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>

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 ---------------//
 var chart1 = new $("#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.render();

 //--------------- Chart 2 ---------------//
 var chart2 = new $("#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.render();

 //--------------- Chart 2 ---------------//
 var chart3 = new $("#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.render();

 //--------------- 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; i++) {
     var chart =...