Geographic Information Systems Asked by Dilettante on June 13, 2021
I am trying to display a pie chart on the click of a button using JavaScript/HTML. The pie chart displays fine without button click. But it doesn’t work with the button. I have tried the following:
<div id="chart_div" style="border: 1px solid #ccc"></div>
<button class="btn btn-danger navbar-btn" onclick="drawChart(new google.visualization.PieChart(document.getElementById('chart_div')))">Button</button>
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawAssistChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Golazo');
data.addColumn('number', 'Gol');
data.addRows([
['Messi', 12],
['Eto,o', 8],
['Gomez', 8],
['Ronaldo', 6],
['Soldado', 6],
['Raul', 5]
]);
// Set chart options
var options = {'title':'Top Goal Scorers 2010-11',
'width':300,
'height':200};
// Instantiate and draw our chart, passing in some options.
//var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
//chart.draw(data, options);
}
Could someone kindly suggest a solution?
In order for the button to work, the drawChart() function needs to be used in the HTML without any arguments. You must also remove the line:
“google.charts.setOnLoadCallback(drawChart)”
because this will load the chart before the button can be clicked and used. Make sure to also uncomment the line:
“chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options);”
because this will help the pie chart to be created when using the button. However, using this code doesn’t toggle the chart, it just turns it on. In order to toggle you may want to put an or if statement. I left the code down below. I hope this helps!
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data;
var chart;
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// * We don't need this if the button calls this function *
// google.charts.setOnLoadCallback(drawChart);
// Not sure what this does. I left it in and it worked fine
google.charts.setOnLoadCallback(drawAssistChart);
// Function that defines and draws the chart
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Golazo');
data.addColumn('number', 'Gol');
data.addRows([
['Messi', 12],
['Eto,o', 8],
['Gomez', 8],
['Ronaldo', 6],
['Soldado', 6],
['Raul', 5]
]);
// Set chart options
var options = {'title':'Top Goal Scorers 2010-11',
'width':300,
'height':200};
// Instantiate and draw our chart, passing in some options.
google.visualization.PieChart(document.getElementById('chart_div'));
// took out this line that adds an event listener for the select and alert function.
// google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- the div placeholder for the chart. this is referenced by its id, when we create the chart.-->
<div id="chart_div" style="border: 1px solid #ccc"></div>
<!-- the actual button placeholder in the HTML document, with an event handler-->
<button class="btn btn-danger navbar-btn" onclick="drawChart()">Button</button>
</body>
</html>
Correct answer by monica_pagan on June 13, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP