@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
