Finding Minimum & Maximum Y Value in the Range - CanvasJS JavaScript Charts

Finding Minimum & Maximum Y Value in the Range - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Finding Minimum & Maximum Y Value in the Range"
  },
  zoomEnabled: "true",  
  rangeChanging: function(e) {
  		findMinMaxValue(e.chart);
  },
	data: [{
		type: "line",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 40 },
			{ x: 80, y: 34 },
			{ x: 90, y: 40 },
      { x: 100, y: 60 },
      { x: 110, y: 40 },
			{ x: 120, y: 30 },
			{ x: 130, y: 20 },
			{ x: 140, y: 43 },
			{ x: 150, y: 63 },
			{ x: 160, y: 80 },
			{ x: 170, y: 98 },
			{ x: 180, y: 60 },
			{ x: 190, y: 50 }
		]
	}]
});

chart.render();
findMinMaxValue(chart);

function findMinMaxValue(chart) {
  var maxY = -Infinity;
  var minY = Infinity;
  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++){

    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;
    }
    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;
    }
  }  
  console.log("Minimum Y Value: " + minY + ", Maximum Y Value: " + maxY);
};