Zoom & Pan with Back Button - CanvasJS JavaScript Charts

Zoom & Pan with Back Button

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
    					var graphDataArr=[{"type":"line","showInLegend":true,"legendText":"test","dataPoints":[{"x":0.16,"meaQuantityId":null,"meaResultId":null,"nodeName":"BLOWBY_1","nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":"lpm","isHugeData":null,"value":null,"count":14,"color":"#1BCDD1"},{"x":0.13,"meaQuantityId":null,"meaResultId":null,"nodeName":null,"nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":null,"isHugeData":null,"value":null,"count":0,"color":"#EC5657"},{"x":0.14,"meaQuantityId":null,"meaResultId":null,"nodeName":null,"nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":null,"isHugeData":null,"value":null,"count":0,"color":"#4661EE"},{"x":0.14,"meaQuantityId":null,"meaResultId":null,"nodeName":null,"nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":null,"isHugeData":null,"value":null,"count":0,"color":"#8FAABB"}]}]
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {

      title:{
      text: "Earthquakes - per month"
      },
      toolTip: {
     				shared: true,
     				borderColor: "#191919",
     				contentFormatter: function (e) {
     					var content = " ";
     
     					console.log('graphDataArr::'+JSON.stringify(graphDataArr))
     					for (var i = 0; i < graphDataArr.length; i++) {
     						for (var j = 0; j < e.entries.length; j++) {
     							if(i==j){
     								e.entries[i].dataSeries.name=graphDataArr[i].legendText;
     							}
     						}
     					}
     					console.log(e.entries)
     					for (var i = 0; i < e.entries.length; i++) {
     						content += e.entries[i].dataSeries.name + " " /*+ "<strong>" + e.entries[i].dataPoint.y + "</strong>"*/;
     						content += "<br/>";
     					}
     					return content;
     				}
   ...