Live Chart with Static StripLine - CanvasJS JavaScript Charts

Live Chart with Static StripLine - 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: 1, 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 stripLineValue = 8;
var chart = new CanvasJS.Chart("chartContainer", {
  title :{
    text: "Live Chart with Static StripLine"
  },
  axisX: {
    stripLines: [
      {
      	value:stripLineValue
      }
    ]
  },
  data: [{
    type: "line",
    dataPoints : dps
  }]
});

chart.render();

var xVal = dps.length + 1;
var yVal = 15;	
var updateInterval = 1000;

var updateChart = function () {
  chart.options.axisX.stripLines[0].value = ++stripLineValue;
  
  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);