Zooming & Panning Tutorial in Chart - 0 | JSFiddle Sample Code

Zooming & Panning Tutorial in Chart - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  <div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/" target="_blank" title="Zooming &amp; Panning Tutorial in Chart ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/</a></div>

JavaScript

window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true, 
      title:{
        text: "Try Zooming And Panning" 
      },
      axisY:{
        includeZero: false
      },
      legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
           
                } else {
                    e.dataSeries.visible = true;
                }

                e.chart.render();
            }
        },
      data: data,  // random generator below
      
   });

    chart.render();
  }
       
   var limit = 1000;    //increase number of dataPoints by increasing this
    
    var y = 0;
    var data = []; var dataSeries = { type: "line", showInLegend: true, 
        name: 'Normal fft' };
    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);