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>
<!DOCTYPE HTML>
<html>

  <head>
    <script type="text/javascript">
      var graphDataArr = [{
        "type": "line",
        "showInLegend": true,
        "legendText": "ACSIDEVI(-)",
        "name": "ACSIDEVI(-)",
        toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: {y}",
        "dataPoints": [{
          "x": 0,
          "y": null,
          "meaQuantityId": null,
          "meaResultId": null,
          "nodeName": "ACSIDEVI",
          "nodeType": null,
          "y1": null,
          "x1": null,
          "interval": null,
          "yUnitName": null,
          "xUnitName": "-",
          "isHugeData": null,
          "value": "..................................................",
          "count": 2
        }, {
          "x": 1,
          "y": null,
          "meaQuantityId": null,
          "meaResultId": null,
          "nodeName": null,
          "nodeType": null,
          "y1": null,
          "x1": null,
          "interval": null,
          "yUnitName": null,
          "xUnitName": null,
          "isHugeData": null,
          "value": "..................................................",
          "count": 0
        }],
        "color": "#1BCDD1"
      }, {
        "type": "line",
        "showInLegend": true,
        "legendText": "AVL_INDEP_TIME(Unknown)",
        "name": "AVL_INDEP_TIME(Unknown)",
        toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: {y}",
        "dataPoints": [{
          "x": 0,
          "y": 42108.69891052081,
          "meaQuantityId": null,
          "meaResultId": null,
          "nodeName": "AVL_INDEP_TIME",
          "nodeType": null,
          "y1": null,
          "x1": null,
          "interval": null,
          "yUnitName": null,
          "xUnitName": "Unknown",
          "isHugeData": null,
          "value": null,
          "count": 2
        }, {
          "x": 1,
          "y":...