Updating with static x labels

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps=[];

var chart = new CanvasJS.Chart("chartContainer",
	{
      zoomEnabled: true,
      axisX:{
        minimum: 1,
        maximum: 500,  
      	interval: 50
      },    
      data: [
      {
        type: "line",
        dataPoints: dps,
      }
      ]
    });
 chart.render();

// dynamically updating with random values
 var index = 0, updateInterval = 1000, updateLimit = 500;

function updateChart(){
     if( index <= updateLimit){
        dps.push({x: index,y: 15 - Math.random() * 10}); 
        index++; 
      	chart.render();
     }
     else
         stopUpdate();
}

var id = setInterval(updateChart, updateInterval);

function stopUpdate() {
    clearInterval(id);
}