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

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

by katsukino

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;"/>

JavaScript

window.onload = function () {
  //--------------- 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: "xy", // 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: "xy", // 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: "xy", // 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...