Home Forums Feature Requests & Feedback Creating Multi Series Chart in AJAX with JSON Reply To: Creating Multi Series Chart in AJAX with JSON



You can add dropdown to either course or college or based on both and updating the chart options according to the drop-down option that has been selected will work fine. Please find the code-snippet below.

var data = chart.options.data;
var selectedChartType = 'stackedColumn';
var chartType = document.getElementById('chartType');
chartType.addEventListener( "change",  function(){
  selectedChartType = chartType.options[chartType.selectedIndex].value;
  for(var i= 0; i < chart.options.data.length; i++){
    chart.options.data[i].type = chartType.options[chartType.selectedIndex].value;

var college = document.getElementById('college');
college.addEventListener( "change",  function(){
  var dataSeries;    
  chart.options.data = [];
  for(var i= 0; i < data.length; i++){
    if(data[i].college === college.options[college.selectedIndex].value){        			
      dataSeries = data[i];
      dataSeries.type = selectedChartType;

    else if(college.options[college.selectedIndex].value === ""){
      for(var i = 0; i < data.length; i++){
        data[i].type = selectedChartType;
      chart.options.data = data;    


Please take a look at this updated JSFiddle for complete code.

Vishwas R
Team CanvasJS