Zoom & Pan with Back Button - CanvasJS JavaScript Charts

Zoom & Pan with Back Button

HTML

<script src="http://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">Back</button>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

#button{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;    
    position: absolute;
    z-index: 100;
    margin-left: 10px;
    visibility: hidden;
}
.btn-back {
    display: inline-block;
    position: absolute;
    z-index: 1;
    padding: 0 10px 0 30px;
    line-height: 44px;
    color: #000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
}
.btn-back:before {
    content: '';    
    position: absolute;
    box-sizing: border-box;
    left: 20px;
    right: 0;
    height: 34px;
    margin-top: 5px;
    z-index: -1;    
    border: 1px solid #b3b3b3;
    border-left-width: 0;
    border-radius: 5px;  
    background: #d9d9d9;
}

.btn-back:after {
    content: '';    
    position: absolute;
    box-sizing: border-box;
    left: 11px;
    height: 27px;
    width: 26px;
    top: 8px;
    z-index: -2;    
    border: 1px solid #b3b3b3;
    border-top: 0 transparent;
    border-right: 0 transparent;
    border-radius: 7px 5px 5px 7px;  
    background: #d9d9d9;    
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

JavaScript

var backButton = document.getElementById("button");
var axisX = [{}];
var limit = 1000; //increase number of dataPoints by increasing this
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);
      backButton.style.visibility = "visible";
    }
    
    if(e.trigger === "reset") {
      axisX[0].viewportMinimum = null;
      axisX[0].viewportMaximum = null;
      e.chart.render();
      e.chart.options.viewportMinStack = [];
      e.chart.options.viewportMaxStack = [];
      backButton.style.visibility = "hidden";
    }
  },
  
  title: {
    text: "Zoom & Pan with Back button"
  },
  
  axisX: axisX,
  data: data,
});
chart.render();

//Function for back button
function back() {
	var viewportMinStack = chart.options.viewportMinStack;
  var viewportMaxStack = chart.options.viewportMaxStack;

  if(viewportMinStack.length > 1) {
    viewportMinStack.pop();
    viewportMaxStack.pop();
    axisX[0].viewportMinimum = viewportMinStack[viewportMinStack.length-1];
    axisX[0].viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
  }  else {
    axisX[0].viewportMinimum = null;
    axisX[0].viewportMaximum = null;
    backButton.style.visibility = "hidden";
  }
  
  chart.render();
}

backButton.addEventListener( "click",  back);