Dynamic Chart with Minimum and Maximum Datapoint Highlighted by Marker and StripLine - CanvasJS JavaScript Charts

Dynamic Chart with Minimum and Maximum Datapoint Highlighted by Marker and 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 = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer",{
  title :{
    text: "Dynamic Chart with Min / Max Datapoint Highlighted"
  },
  axisY: {
  	includeZero: false,
  	stripLines: [{},{}]
  },
  data: [{
    type: "line",
    markerSize: 0,
    dataPoints: dps 
  }]
});

chart.render();

var yVal = 100;	
var updateInterval = 1000;


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));//assign y-value here
    dps.push({
      y: yVal
    });
  };

  chart.render();		
	setMarker(chart);
};

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

function setMarker(chart){
	var maxY = -Infinity;
  var minY = Infinity;
  var maxYIndex, minYIndex;
  var viewportMinimum = chart.axisX[0].get("viewportMinimum");
  var viewportMaximum = chart.axisX[0].get("viewportMaximum");
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
		chart.options.data[0].dataPoints[i].markerType = "none";
    chart.options.data[0].dataPoints[i].indexLabel = " ";
    if(chart.data[0].dataPoints[i].x >= viewportMinimum && chart.data[0].dataPoints[i].x <= viewportMaximum && chart.data[0].dataPoints[i].y >= maxY){
      maxY = chart.data[0].dataPoints[i].y;
      maxYIndex = i;
    }
    if(chart.data[0].dataPoints[i].x >= viewportMinimum && chart.data[0].dataPoints[i].x <= viewportMaximum && chart.data[0].dataPoints[i].y <= minY){
      minY = chart.data[0].dataPoints[i].y;
      minYIndex = i;
    }
  }
  chart.options.data[0].dataPoints[minYIndex].markerSize = chart.options.data[0].dataPoints[maxYIndex].markerSize = 8;
  
  chart.options.data[0].dataPoints[maxYIndex].markerType = "triangle";
  chart.options.data[0].dataPoints[maxYIndex].markerColor = "red";
  chart.options.data[0].dataPoints[maxYIndex].indexLabel = "Highest";
  
  chart.options.data[0].dataPoints[minYIndex].markerType =...