Reply To: how can i get the max, min, avg and current value of any multi series chart

[PaulFansare]

i am using this script everything works fine until that click function runs. the data from ajax is ajax which gets selected multiple selection values…and show them in the chart
returning data is like this

[{
		type: "line",
		name: "ADA Volume",
		markerSize: 0,
		toolTipContent: "Date: {x}<br>{name}: {y}",
		showInLegend: true,
		xValueType: "dateTime",
		dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
	}

….. and so on..

<script>
window.onload = function () {
 
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	zoomEnabled: true,
	rangeChanged: rangeChanged,
	theme: "dark2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Binance Volume Analyser"
	},
		axisX:{
		title: ""
	},
	axisY:{
		title: "",
		titleFontColor: "#4F81BC",
		lineColor: "#4F81BC",
		labelFontColor: "#4F81BC",
		tickColor: "#4F81BC"
	},
	legend:{
		cursor: "pointer",
		dockInsidePlotArea: true,
		itemclick: toggleDataSeries
	},
	data: [{
		type: "line",
		name: "ADA Volume",
		markerSize: 0,
		toolTipContent: "Date: {x}<br>{name}: {y}",
		showInLegend: true,
		xValueType: "dateTime",
		dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
	},{
		type: "line",
		name: "BAT Volume",
		markerSize: 0,
		toolTipContent: "Date: {x}<br>{name}: {y}",
		showInLegend: true,
		xValueType: "dateTime",
		dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
	},{
		type: "line",
		name: "BCC Volume",
		markerSize: 0,
		toolTipContent: "Date: {x}<br>{name}: {y}",
		showInLegend: true,
		xValueType: "dateTime",
		dataPoints: <?php echo json_encode($dataPoints3, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();
$("#mybtn").click(function(){
     var val = $('.selectpicker').val();
     var newSeries=$.ajax({

                type: 'GET',
                url: '/feature-4-chart.php',
                data: {"coins":val,},
                beforeSend: function(){
		        	$('#imagee').show();
			    },
			    complete: function(){
			        $('#imagee').hide();
			    },
	            success: function(data){
                //If the success function is execute,
                //then the Ajax request was successful.
                //Add the data we received in our Ajax
                //request to the "content" div.
				//newSeries= data.d.responseText;  
				},
                error: function (xhr, ajaxOptions, thrownError) {
                    var errorMsg = 'Ajax request failed: ' + xhr.responseText;
                    $('.chartContainer').html(errorMsg);
                  }
            }).responseText; 
    
    chart.options.data.push(newSeries);
    //chart.options.data[0].dataPoints.push({ x: 100, y: 14});
    chart.render();
});
 function rangeChanged(e) {
  var dpsInViewPort = [], currentYValue;
  $("#tr0").remove();$("#tr1").remove();$("#tr2").remove();
  for (var i = 0; i < e.chart.data.length; i++) {
    var row = $("<tr id='tr" + i + "'>");
    for(var j = 0; j < 5; j++){
      row.append($("<td id='td" + j +"'>"));
    }
    $('tr.email').after(row);
  }
  if(e.trigger === "reset") {
    for (var j = 0; j < e.chart.data.length; j++) {
    	dpsInViewPort = [];
      for (var i = 0; i < e.chart.data[j].dataPoints.length; i++) {      	
      	dpsInViewPort.push(e.chart.data[j].dataPoints[i].y);
      }
      currentYValue = e.chart.data[j].dataPoints[e.chart.data[j].dataPoints.length-1].y;
      performCalculations(dpsInViewPort, currentYValue, j);
    }
  }
  else {
    for (var j = 0; j < e.chart.data.length; j++) {
      dpsInViewPort = [];
      for (var i = 0; i < e.chart.data[j].dataPoints.length; i++) {
        if (e.chart.data[j].dataPoints[i].x >= parseInt(e.axisX[0].viewportMinimum.toFixed(0)) && e.chart.data[j].dataPoints[i].x < parseInt(e.axisX[0].viewportMaximum.toFixed(0))) {
          dpsInViewPort.push(e.chart.data[j].dataPoints[i].y);
          currentYValue = e.chart.data[j].dataPoints[i].y;
        }
      }
      performCalculations(dpsInViewPort, currentYValue, j);
    }
  }
}

function performCalculations(dataPointValue, currentValue, seriesIndex) {  
  sum = 0;
  for( var j = 0; j<dataPointValue.length; j++ )
    sum = sum - (-dataPointValue[j]);
  average = sum / dataPointValue.length;
  seriesIndex = seriesIndex + 1;

  $("tr:eq("+seriesIndex+") #td" + 0).html(seriesIndex)
  $("tr:eq("+seriesIndex+") #td" + 1).html(Math.min.apply(null, dataPointValue))
  $("tr:eq("+seriesIndex+") #td" + 2).html(Math.max.apply(null, dataPointValue))
  $("tr:eq("+seriesIndex+") #td" + 3).html(average.toFixed(2))
  $("tr:eq("+seriesIndex+") #td" + 4).html(currentValue)
}
function toggleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else{
		e.dataSeries.visible = true;
	}
	chart.render();
}

} 
</script>