0👍
✅
Keeping in mind that only data will be changed because you want the same canvas for everything, you can create a function which draw the data on the canvas everytime is called (See the function receive as first parameter the data that will be displayed in the canvas)
function selectData(id){
if(id == 1){
var data = []; //whatever i want to draw when option 1 is selected!
DrawChart(data);
}
if(id == 2){
var data = []; //whatever i want to draw when option 2 is selected!
DrawChart(data);
}
}
function DrawChart(data){
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas).Pie(data);
//Demo with official documentation http://www.chartjs.org/docs/
//var myPieChart = new Chart(ctx[0]).Pie(data,options);
//var myDoughnutChart = new Chart(ctx[1]).Doughnut(data,options);
}
so, you are not using a html Select widget, you are using a UL for this, you can use :
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="javascript:void(0)" onclick="selectData(1);">Browsers</a></li>
<li><a href="javascript:void(0)" onclick="selectData(2);">Other things</a></li>
</ul>
Although you can design a better mode to solve your problem, this is a quick solution that will help you to understand how to draw data dinamically with Chart.js