How to get min/max values for two data sets in one canvasJS chart

I have a chart with two data sets and I am trying to get the min/max values for both data sets but for the moment I don't even get for any of the data sets! With the same principle of code for one data set graph it work perfectly.

See my code for two data set graph:

window.onload = function() {
    // first data set for PM2.5
    var $dataPointsP2m5 = <?php echo json_encode($dataPoints_p2m5, JSON_PRETTY_PRINT | JSON_PRESERVE_ZERO_FRACTION | JSON_NUMERIC_CHECK); ?>;
    // second data set for PM1.0
    var $dataPointsP1m0 = <?php echo json_encode($dataPoints_p1m0, JSON_PRETTY_PRINT | JSON_PRESERVE_ZERO_FRACTION | JSON_NUMERIC_CHECK); ?>;
    
    var chartPm = new CanvasJS.Chart("chartContainer_pm", {
        zoomEnabled: true,
        theme: "light2",
        title: {
            text: "Air Quality Index PM2.5 & PM1.0"
        },
        axisX:{
            title: "chart updates every " + updateInterval / 1000 + " secs"
        },
        axisY:{
            suffix: " Î¼g/m3"
        },
        data: [
        {
            type: "line",
            yValueFormatString: "##.##",
            xValueFormatString: "hh:mm:ss TT",
            showInLegend: true,
            legendText: "{name} " + yValueP2m5 + " Î¼g/m3",
            toolTipContent: "{y} Î¼g/m3",
            dataPoints: $dataPointsP2m5
        },
        {
            type: "line",
            yValueFormatString: "##.##",
            xValueFormatString: "hh:mm:ss TT",
            showInLegend: true,
            legendText: "{name} " + yValueP1m0 + " Î¼g/m3",
            toolTipContent: "{y} Î¼g/m3",
            dataPoints: $dataPointsP1m0
        }]
    });
    chartPm.render();

    document.getElementById("getMinMaxdataPoints").addEventListener("click",function(){
        var maxYp2m5 = -Infinity;
        var minYp2m5 = Infinity;
        var viewportMinimum = chartPm.axisX[0].get("viewportMinimum");
        var viewportMaximum = chartPm.axisX[0].get("viewportMaximum");
        for(var i = 0; i < chartPm.data[0].dataPoints.length; i++){
            if(chartPm.data[0].dataPoints[i].x >= viewportMinimum && chartPm.data[0].dataPoints[i].x <= viewportMaximum && chartPm.data[0].dataPoints[i].y > maxYp2m5){
                maxYp2m5 = charPm.data[0].dataPoints[i].y;
            }
            if(chartPm.data[0].dataPoints[i].x >= viewportMinimum && chartPm.data[0].dataPoints[i].x <= viewportMaximum && chartPm.data[0].dataPoints[i].y < minYp2m5){
                minYp2m5 = chartPm.data[0].dataPoints[i].y;
            }
        }
        document.getElementById("MinimumP2m5Value").innerHTML = " min. "+ minYp2m5;
        document.getElementById("MaximumP2m5Value").innerHTML = " max. "+ maxYp2m5;
    });

and my html part is:

<body>
    <div class="flex-container">
      <div>
        <button id="getMinMaxdataPoints">Get min/max.</button><br/>
      </div>
      <div>
        <span>PM2.5 & PM1.0</span><br/>
        <span id="MinimumP2m5Value"></span><br/>
        <span id="MaximumP2m5Value"></span><br/>
      </div>
    </div>
</body>

Solution

In the above code, you have just looped through the dataPoints of first dataSeries. Whereas, you need to first loop through each dataSeries then through the respective dataPoints.

Here is a JSFiddle example for the same.

document.getElementById("getMinMaxdataPoints").addEventListener("click",function(){
    var minContent = "";
  var maxContent = "";
  
  var viewportMinimum = chart.axisX[0].get("viewportMinimum");
  var viewportMaximum = chart.axisX[0].get("viewportMaximum");
  
  for( i = 0; i < chart.data.length; i++){
    var maxYp2m5 = -Infinity;
    var minYp2m5 = Infinity;
    for(var j = 0; j < chart.data[i].dataPoints.length; j++){
      if(chart.data[i].dataPoints[j].x >= viewportMinimum && chart.data[i].dataPoints[j].x <= viewportMaximum && chart.data[i].dataPoints[j].y > maxYp2m5){
        maxYp2m5 = chart.data[i].dataPoints[j].y;
      }
      if(chart.data[i].dataPoints[j].x >= viewportMinimum && chart.data[i].dataPoints[j].x <= viewportMaximum && chart.data[i].dataPoints[j].y < minYp2m5){
        minYp2m5 = chart.data[i].dataPoints[j].y;
      }
    }
    minContent += "Series " + (i + 1) + " min. Y value " + minYp2m5 + " | ";
    maxContent += "Series " + (i + 1) + " max. Y value " + maxYp2m5 + " | ";
    
  }
  document.getElementById("MinimumYValue").innerHTML = minContent;
  document.getElementById("MaximumYValue").innerHTML = maxContent;
});