Zoom & Pan with Back Button - CanvasJS JavaScript Charts

Zoom & Pan with Back Button

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 -->
<button class="btn-back" id="button">&#8634;</button>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

#button{    
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    
    z-index: 100;
    display: inline-block;
    position: absolute;
    padding: 0px;
    border: 0;
    right: 10px;
    width: 40px;
    height: 26px;
    line-height: 0;
    top: 27px;
    font-size: 20px
}
#button:hover{
  color: white;
  background-color: rgb(33, 150, 243)
}

JavaScript

var axisX = {};
var limit = 1000;    //increase number of dataPoints by increasing this
document.getElementById("button").style.visibility = "hidden";
var y = 0;
var data = []; var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
  y += (Math.random() * 10 - 5);
  dataPoints.push({
    x: i - limit / 2,
    y: y
  });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
var chart = new CanvasJS.Chart("chartContainer",
                               {
  zoomEnabled: true,
  rangeChanged: function(e){
    if (!e.chart.options.viewportMinStack){
      e.chart.options.viewportMinStack = [];
      e.chart.options.viewportMaxStack = [];
    }
    if(e.trigger === "zoom"){
      e.chart.options.viewportMinStack.push(e.axisX[0].viewportMinimum);
      e.chart.options.viewportMaxStack.push(e.axisX[0].viewportMaximum);
      document.getElementById("button").style.visibility = "visible";
    }
    if(e.trigger === "reset"){
      axisX.viewportMinimum = null;
      axisX.viewportMaximum = null;
      e.chart.render();
      e.chart.options.viewportMinStack=[];
      e.chart.options.viewportMinStack=[];
      document.getElementById("button").style.visibility = "hidden";
    }
  },
  title:{
    text: "Zoom & Pan with Back button"
  },
  axisX: axisX,
  data: data,  // random generator below
});
chart.render();


//Function for back button
function back(){
  var viewportMinStack = chart.options.viewportMinStack;
  var viewportMaxStack = chart.options.viewportMaxStack;
  //if(!chart.axisX){
  //		chart.axisX = {};
  //	}
  if(viewportMinStack.length>1){
    viewportMinStack.pop();
    viewportMaxStack.pop();
    axisX.viewportMinimum = viewportMinStack[viewportMinStack.length-1];
    axisX.viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
  }
  else{
    axisX.viewportMinimum = null;
    axisX.viewportMaximum = null;
    document.getElementById("button").style.visibility = "hidden";
  }
  chart.render();
}
var...