javascript - Google chart redraw onclick - Stack Overflow

admin管理员组

文章数量:1345115

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

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

• javascript
• jquery
• drop-down-menu
• charts
• google-visualization

Share Improve this question Follow asked Jun 4, 2015 at 9:56 Amst3lAmst3l 5511 gold badge22 silver badges77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

    });
});

本文标签： javascriptGoogle chart redraw onclickStack Overflow