Reply To: Creating Multi Series Chart in AJAX with JSON

[Vishwas R]

@yansonalvin97,

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;
  }
  chart.render();
});

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;

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

  chart.render();
});

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

—
Vishwas R
Team CanvasJS