Replace a Canvas Pie Chart Onclick

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

Leave a comment