Zooming functionality in dynamic chart- CanvasJS JavaScript Charts

Zooming functionality in dynamic chart- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];  
var axisXMax = 0, axisXMin = 0;
var axisX = {};
var updateRange = 0;
var resetFlag = false;

var chart = new CanvasJS.Chart("chartContainer",{
  zoomEnabled: true,
  rangeChanged: function(e) {   
    if(e.trigger === "zoom") {
      axisXMax = e.axisX[0].viewportMaximum + 1;
      axisXMin = e.axisX[0].viewportMinimum + 1;
      resetFlag = false;
      if( updateRange > 0 ) 
      	clearInterval(updateRange);
      updateRange = setInterval(function(){updateAxisRange()}, updateInterval); 
    } 
    else if(e.trigger == "reset") {
      resetFlag = true;
      clearInterval(updateRange);
    }
  }, 
  title :{
    text: "Zooming Functionality in Live Streaming Chart"
  },
  axisX: axisX,
  axisY: {						
    title: "Units"
  },
  data: [{
    type: "line",
    dataPoints : dps
  }]
});

chart.render();
var xVal = dps.length + 1;
var yVal = 15;	
var updateInterval = 1000;

// add new dataPoints
var updateChart = function () {    	   	
  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
  dps.push({x: xVal,y: yVal});   	
  xVal++;

  if (dps.length >  10 )
  {
    dps.shift();				
  } 
  //reset the range of Axis X on selecting the reset option
  if(resetFlag) {
    chart.options.axisX.viewportMinimum = null;
    chart.options.axisX.viewportMaximum = null;
  }
  chart.render();		
};

//function to update the Axis X range on zooming 
var updateAxisRange = function () {    	   	
  axisXMax += 1;
  axisXMin += 1;
  chart.options.axisX.viewportMaximum = axisXMax;
  chart.options.axisX.viewportMinimum = axisXMin;
  chart.render();		
};

setInterval(function(){updateChart()}, updateInterval);