Google chart redraw onclick

Estoy tratando de hacer un gráfico desde el cual se puedan seleccionar los datos a través de varios menús desplegables y un selector de fecha. Parece que no puedo encontrar una manera de pasar nuevos datos en el gráfico en un evento de clic. Lo tengo funcionando tan bien que onClick dibuja un gráfico completamente nuevo. Pero esto no me parece el camino.

Entonces, ¿hay otra manera de hacer esto? HTML:

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

Cambia tu js para que se vea a continuación.

Cree una variable de gráfico fuera de la función drawChart y en lugar de crear un nuevo uso de gráfico en cualquier lugar que ya tenga.

Ejemplo de trabajo aquí 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); }); });