Google chart redraw onclick

Question

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);
}
});

Answer 1

Change your js to look like below.

Create chart variable outside the drawChart function and instead of creating new chart use everywhere the one you already have.

Working example here jsfiddle

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

var chart;

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'

    };


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

    chart.draw(data, options);
}


$(document).ready(function(){
//On button click, load new data
    $(".2015-btn").click(function() {

        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'

        };
        chart.draw(data, options);

    });
});