Hello Arthur, I couldn't figure out why your code wasn't working so I started over. Two ways of doing this came to mind, one way is to draw the charts then use a button to toggle the display property of the divs on and off. The other way was to redraw the charts on a button click in a single div.
Method 1 - hide/display the chart divs I used https://developers.google.com/chart/interactive/docs/basic_multiple_charts as a starting point and added a button to show or hide the chart divs. The code for this is: <script type="text/javaScript"> // Create a namespace var pizzas = (function() { // Load Charts and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Draw the pie chart for Sara's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawSaraChart); // Draw the pie chart for the Tony's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawTonyChart); // Callback that draws the pie chart for Sara's pizza. function drawSaraChart() { // Create the data table for Sara's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); // Set options for Sara's pie chart. var options = {title:'How Much Pizza Sara Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for sara's pizza. var chart = new google.visualization.PieChart(document.getElementById('sara_chart_div')); chart.draw(data, options); } // Callback that draws the pie chart for tony's pizza. function drawTonyChart() { // Create the data table for Tony's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 2], ['Onions', 2], ['Olives', 2], ['Zucchini', 0], ['Pepperoni', 3] ]); // Set options for Tony's pie chart. var options = {title:'How Much Pizza Tony Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Tony's pizza. var chart = new google.visualization.PieChart(document.getElementById('tony_chart_div')); chart.draw(data, options); } })(); </script> and the HTML is: <button onclick="showhidePizza()">Toggle Charts</button> <div id="sara_chart_div" style="display:none;"></div> <!-- <div id="sara_chart_div"></div> --> <div id="tony_chart_div"></div> and the code for the button is: <script language="javaScript"> function showhidePizza() { var saraDiv = document.getElementById("sara_chart_div"); var tonyDiv = document.getElementById("tony_chart_div"); if (saraDiv.style.display === "none") { saraDiv.style.display = "block"; tonyDiv.style.display = "none"; } else { saraDiv.style.display = "none"; tonyDiv.style.display = "block"; } } </script> Method 2: - redraw the charts on a button click This was adapted from https://stackoverflow.com/questions/38161862/change-google-chart-data-and-appearance-with-button - WhiteHat who worte the original is a genius with the Chart API. The script is: <script language="javaScript"> // Create a namespace var speakers = (function() { google.charts.load('current', { 'callback': function () { var data1 = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Cat 1', 26], ['Cat 3', 16], ['Cat 2', 30] ]); var data2 = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Cat 1', 100], ['Cat 3', 200], ['Cat 2', 300] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 1: {offset: 0.2}, 2: {offset: 0.3}, 3: {offset: 0.4}, 4: {offset: 0.5}, }, animation: { startup:true, duration: 1000, easing: 'in' } }; var chart = new google.visualization.PieChart(document.getElementById('language_div')); chart.draw(data1, options); document.getElementById('toggleData').addEventListener('click', function () { var btnValue = document.getElementById('toggleData').value; if (btnValue == "0"){ chart.draw(data1, options); btnValue = "1";} else { chart.draw(data2, options); btnValue = "0";} document.getElementById('toggleData').value = btnValue; }, false); document.getElementById('data1').addEventListener('click', function () { chart.draw(data1, options); }, false); document.getElementById('data2').addEventListener('click', function () { chart.draw(data2, options); }, false); }, 'packages':['corechart'] }); })(); </script> The HTML is: <button id="toggleData" value="1">Toggle Charts</button> <input type="button" id="data1" value="Data1" /> <input type="button" id="data2" value="Data2" /> <div id="language_div"></div> I added both methods to the bottom of https://brisray.com/google-charts/multiple.htm so you can see them in action. On Monday, April 24, 2023 at 11:15:51 AM UTC-4 Arthur Hebert wrote: > I see that this is an old post. I'm trying to figure out the same problem. > > Chrome developer tools can be opened with Shift+Ctrl+J. I got 2 errors. > I apparently fixed 1 with <!DOCTYPE html>. > The other one is a navigator error or something. Still lost. > > On Thursday, November 29, 2018 at 3:48:50 PM UTC-6 essasen wrote: > >> Here is my HTML file with the JavaScript >> >> >> My problem is I cannot get anything to appear. What am i doing wrong. >> >> <html> >> <head> >> <script type="text/javascript" src=" >> https://www.gstatic.com/charts/loader.js";></script> >> <script type="text/javascript"> >> >> // Load the Visualization API and the piechart package. >> google.visualization.load('current', {'packages':['corechart']}); >> >> // Set a callback to run when the Google Visualization API is >> loaded. >> google.visualization.setOnLoadCallback(drawChart); >> >> var data1 = google.visualization.arrayToDataTable([ >> ['Language', 'Speakers (in millions)'], >> ['Cat 1', 26], ['Cat 3', 16], ['Cat 2', 30], >> ['Total', 100] >> ]); >> var data2 = google.visualization.arrayToDataTable([ >> ['Language', 'Speakers (in millions)'], >> ['Cat 1', 100], ['Cat 3', 200], ['Cat 2', 300], >> ['Total', 400] >> ]); >> >> var options = { >> title: 'Indian Language Use', >> legend: 'none', >> pieSliceText: 'label', >> slices: { 1: {offset: 0.2}, >> 2: {offset: 0.3}, >> 3: {offset: 0.4}, >> 4: {offset: 0.5}, >> }, >> animation: { >> startup:true, >> duration: 1000, >> easing: 'in' >> } >> }; >> >> >> var current = 0; >> >> var data = []; >> data[0] = google.visualization.arrayToDataTable(data1); >> data[1] = google.visualization.arrayToDataTable(data2); >> >> var chart = new >> google.visualization.PieChart(document.getElementById('piechart')); >> var button = document.getElementById('b1'); >> >> >> function drawChart() { >> // Disabling the button while the chart is drawing. >> button.disabled = true; >> google.visualization.events.addListener(chart, 'ready', >> function() { >> button.disabled = false; >> button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee'); >> }); >> options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' >> Production by Country'; >> >> chart.draw(data[current], options); >> } >> >> >> >> button.onclick = function() { >> current = 1 - current; >> drawChart(); >> } >> >> drawChart(); >> >> >> </script> >> </head> >> <body> >> <div id="piechart"></div> >> <div id="b1"></div> >> </body> >> </html> >> >> >> If someone could explain why the charts or the button is not being drawn. >> I would be much appreciative. >> >> Thank you. >> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/43b795c1-b81b-403b-9bb6-5a29f5ad305an%40googlegroups.com.
