Dynamic Chart with Static X-axis Labels using Multiple X-Axis - CanvasJS JavaScript Charts

Dynamic Chart with Static X-axis Labels using Multiple X-Axis - 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 = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Live Random Data"
  },
  axisX: [{
    tickLength: 0,
    lineThickness: 0,
    labelFormatter: function(e) {
      return "";
    },
    margin: -5
  }, {
    viewportMinimum: -60,
    viewportMaximum: 60,
    interval: 15,
    stripLines: [{
      value: 0,
      label: "Now",
      labelPlacement: "outside"
    }]
  }],

  data: [{
    type: "line",
    dataPoints: dps
  }]
});

var xVal = new Date(2015, 8).getTime();
var yVal = 100;
var updateInterval = 500;
var dataLength = 120; // number of dataPoints visible at any point


var updateChart = function(count) {
  count = count || 1;
  // count is number of times loop runs to generate random dataPoints.

  for (var j = 0; j < count; j++) {
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
    dps.push({
      x: new Date(xVal),
      y: yVal
    });
    xVal += 1000;
  };
  if (dps.length > dataLength) {
    dps.shift();
  }

  chart.render();

};

// generates first set of dataPoints
updateChart(dataLength);

// update chart after specified time. 
setInterval(function() {
  updateChart()
}, updateInterval);