JavaScript Line Charts with Zoom and Pan not working-CodePudding

Line Charts like any other chart in library support zooming and panning. It is one of the most important features of chart, especially when dealing with large amount of data. You can zoom along X, Y or both axes.

I am trying to execute this code, but i am getting error

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    zoomEnabled: true,
    title:{
        text: "Try Zooming and Panning" 
    },
    data: data  // random generator below
});
chart.render();

}

var limit = 1000;

var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i  = 1) {
    y  = (Math.random() * 10 - 5);
    
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);               

</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;">
</div>
</body>
</html>

CodePudding user response：

just edit your last for loop in JS with this code

for (var i = 0; i < limit; i  = 1) {
    y  = (Math.random() * 10 - 5);
    dataPoints.push({
        x: i - limit / 2,
        y: y                
    });
}