Dynamic Line Chart with axisX minimum set to 0 - CanvasJS JavaScript Charts

Dynamic Line Chart with axisX minimum set to 0 - CanvasJS JavaScript Charts

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 = [{x: 0, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];

var chart = new CanvasJS.Chart("chartContainer",{
    title :{
      text: "Live Data"
    },
    axisX: {
      title: "Axis X Title",
      minimum: 0
    },
    axisY: {
      title: "Units"
    },
    data: [{
      type: "line",
      dataPoints : dps
    }]
});

chart.render();
var xVal = dps.length + 1;
var yVal = 15;
var updateInterval = 1000;
var updateChart = function () {
    chart.options.axisX.minimum = null;
    yVal = yVal + Math.round(5 + Math.random() *(-5-5));
    dps.push({x: xVal,y: yVal});

    xVal++;
    if (dps.length > 10 )
    {
      dps.shift();
    }

    chart.render();
  };

setInterval(function(){updateChart()}, updateInterval);