Here is you code in a jsfiddle: https://jsfiddle.net/r93vkoau/2/ Where it appears to work. Can you change it to show how you add additional rows, so we can see what problem comes up?
On Wed, Jun 20, 2018 at 11:47 AM Chelsea Pitcher < chel...@literacysanantonio.com> wrote: > Hello! > > I am attempting to draw eight Google bar charts on one page: two per row, > with four rows. > I was able to draw two charts on one row, but I cannot figure out how to > add additional rows of the same type of chart. When I attempted to add > additional rows of charts, all charts disappeared. > > Here is my code for the two bar charts on one row (Note I'm a total > beginner at all of this): > > <html> > <head> > <script type="text/javascript" src=" > https://www.gstatic.com/charts/loader.js";></script> > <script type="text/javascript"> > google.charts.load('current', { 'packages': ['corechart', 'bar'] > }); > google.charts.setOnLoadCallback(drawChart); > > function drawChart() { > var query1= new google.visualization.Query(" > https://docs.google.com/spreadsheets/d/1fftN5LIwU-xvaZKLCO5WMJu_Sy9CxPceZ1vmucqm8TU/edit#gid=0?range=A1:C10 > "); > query1.send(handleQueryResponse1); > var query2 = new google.visualization.Query(" > https://docs.google.com/spreadsheets/d/1SrF-uFSspEsdTWow6kAstEcOvB0bPUa7WPEF2lJdYQk/edit#gid=0?range=A1:C10 > "); > query2.send(handleQueryResponse2); > > } > > function handleQueryResponse1(response) { > var data = response.getDataTable(); > var chart = new > google.visualization.BarChart(document.getElementById('student_chart1')); > var options = { > isStacked: 'percent', > title: 'School Year 2016-17 Baseline: pre-SBRI', > curveType: 'function', > legend: { position: 'bottom' }, > colors: ['red', 'green'], > pointSize: 20, > series: { > vAxis: {format: 'percent'}, > hAxis: { minValue: '2012-13', maxValue: '2016-17' } > } > }; > > chart.draw(data, options); > } > function handleQueryResponse2(response) { > var data = response.getDataTable(); > var chart = new > google.visualization.BarChart(document.getElementById('student_chart2')); > var options = { > isStacked: 'percent', > title: 'School Year 2017-18 Year one of SBRI', > curveType: 'function', > legend: { position: 'bottom' }, > colors: ['red', 'green'], > pointSize: 20, > series: { > vAxis: {format: 'percent'}, > hAxis: { minValue: '2012-13', maxValue: '2016-17' } > } > }; > > chart.draw(data, options); > } > > </script> > </head> > <body> > <table class="columns"> > <tr> > <td><div id="student_chart1" style="width: 700px; height: > 700px"></div></td> > <td><div id="student_chart2" style="width: 700px; height: > 700px"></div></td> > </tr> > </table> > > </body> > </html> > > 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 google-visualization-api+unsubscr...@googlegroups.com. > To post to this group, send email to > google-visualization-api@googlegroups.com. > Visit this group at > https://groups.google.com/group/google-visualization-api. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-visualization-api/a9caac2d-6030-4cb1-a387-f8601ecb6b6f%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/a9caac2d-6030-4cb1-a387-f8601ecb6b6f%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> dlalibe...@google.com <dlalibe...@google.com> 5CC, Cambridge MA -- 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 google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJNq%3DFT6RzLyqExjKc4cx5J%2BWDuLHym6ng3HROkvbn5PzA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
