I am trying to make a chart from which the data is selectable through various dropdown menu's and a date selector. I can't seem to find a way to pass new data in the chart on a click event. I got it working so far that onClick, it draws an entire new chart. But this doesn't seem the way to me.

So is there an other way to do this?
HTML:

<div id=piechart style=width: 450px; height: 500px;></div>

     <div class=date-selector-container>

       <div class=btn-group>

          <button type=button class=btn btn-primary dropdown-toggle data-toggle=dropdown aria-expanded=false>

                        Jaar <span class=caret></span>

           </button>

           <ul class=dropdown-menu role=menu>

              <li><a class=2015-btn href=#>2015</a></li>

              <li><a href=#>2014</a></li>

              <li><a href=#>2013</a></li>

           </ul>

</div>

JS:

google.load(visualization, 1, {packages:[corechart], callback: drawChart});

google.setOnLoadCallback(drawChart);



function drawChart() {



var data = google.visualization.arrayToDataTable([

    ['Task', 'Hours per Day'],

    ['Work',     1],

    ['Eat',      22],

    ['Commute',  32],

    ['Watch TV', 42],

    ['Sleep',    75]

]);



var options = {



    chartArea: {width:'100%',height:'100%'},



    forceIFrame: 'false',



    is3D: 'true',



    pieSliceText: 'value',



    sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.



    titlePosition: 'none'



};





var chart = new google.visualization.PieChart(document.getElementById('piechart'));



chart.draw(data, options);

}





});



//On button click, load new data

$(.2015-btn).click(function(){

google.load(visualization, 1, {packages:[corechart], callback: drawChart});

google.setOnLoadCallback(drawChart);



function drawChart() {



var data = google.visualization.arrayToDataTable([

    ['Task', 'Hours per Day'],

    ['Work',     11],

    ['Eat',      2],

    ['Commute',  2],

    ['Watch TV', 2],

    ['Sleep',    7]

]);



var options = {



    chartArea: {width:'100%',height:'100%'},



    forceIFrame: 'false',



    is3D: 'true',



    pieSliceText: 'value',



    sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.



    titlePosition: 'none'



};





var chart = new google.visualization.PieChart(document.getElementById('piechart'));



chart.draw(data, options);

}

});