[PaulFansare]

Thanks. That’s what i need.

[PaulFansare]

@Vishwas R Thanks for your help. It worked for me and i am very happy with your solution. Just one thing i need in that graph.
Your given js fiddle works only when we drag reset or zoom in. But it doesn’t work when it loads. In other words i want that if a graph is loaded the table should automatically show their respective series data (while i call with ajax it should work too). if user do any actions on graph like drag or anything else than your function would work. Can you tell me that how can achieve that.

[PaulFansare]

@Vishwas_R, your jsfiddle https://jsfiddle.net/canvasjs/k3wyfv2c/ is working fine enough, but it messed up when you change data series using ajax call.
here is an expamle please check this website. http://www.coinproof.co/feature-4/
Here i am using your js fiddle. it works nice if i use it for only 3 multiple data-series but if i use it for more than 3 it all get messed up and cannot work either.
Please check this http://www.coinproof.co/feature-4/
and provide me proper solution for this

[PaulFansare]

can you please tell me that how can put a new data series on click event of a button.
i want that old data to be removed and new data to be inserted.
that’s all

[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>

[PaulFansare]

i have implemented it and it is working fine it solved my problem. But i am facing an issue, i want to add data series using a multiselect dropdown, when i select title names their respective data series should come from an ajax request. and previous data series should disappear. how can i do that.

[PaulFansare]

will it work if i increase series