Thank you so much Daniel! That did the trick! I appreciate your patience and kindness :)
Chelsea Pitcher | SAReads Analyst Literacy San Antonio, Inc. 10730 Gulfdale Dr. | San Antonio, TX 78216 Website <http://sareads.com/> | Facebook <https://www.facebook.com/SAReads> | Twitter <https://twitter.com/sareads> | Instagram <http://instagram.com/sareads> On Wed, Jun 20, 2018 at 1:23 PM, 'Daniel LaLiberte' via Google Visualization API <[email protected]> wrote: > You mostly just need to add tr wrappers around the cells of each row. But > also, you need 100% width on the table, and move your 50% width to the tds > rather than the divs inside. > > https://jsfiddle.net/r93vkoau/17/ > > On Wed, Jun 20, 2018 at 2:02 PM Chelsea Pitcher < > [email protected]> wrote: > >> Hi Daniel! Thanks so much for your response. I updated JS Fiddle and it >> looks like my problem is that charts 3 and 4 are on the same row as charts >> 1 and 2 (but I'm glad they are now appearing!). The goal is to get charts 1 >> and 2 on the first row, and charts 2 and 3 on the second row, and so on. >> >> https://jsfiddle.net/r93vkoau/12/ >> >> For example: >> Chart 1 | Chart 2 >> Chart 3 | Chart 4 >> Chart 5| Chart 6 >> Chart 7 | Chart 8 >> >> On Wednesday, June 20, 2018 at 10:47:05 AM UTC-5, Chelsea Pitcher 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("ht >>> tps://docs.google.com/spreadsheets/d/1fftN5LIwU-xvaZKLCO5WMJu_ >>> Sy9CxPceZ1vmucqm8TU/edit#gid=0?range=A1:C10"); >>> query1.send(handleQueryResponse1); >>> var query2 = new google.visualization.Query("ht >>> tps://docs.google.com/spreadsheets/d/1SrF-uFSspEsdTWow6kAstEcOvB0bPUa7WP >>> EF2lJdYQk/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 [email protected]. >> 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/6de5cd04-145c-42fa-b0cc- >> e2a6de22b411%40googlegroups.com >> <https://groups.google.com/d/msgid/google-visualization-api/6de5cd04-145c-42fa-b0cc-e2a6de22b411%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> > [email protected] <[email protected]> 5CC, Cambridge MA > > -- > You received this message because you are subscribed to a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit https://groups.google.com/d/ > topic/google-visualization-api/yMKZbji6LYQ/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > 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/CAOtcSJPfC9ZYRnWJ1RDu%3DtXH6X4vBB6LXBW- > VSZP8ORQpgq0Dg%40mail.gmail.com > <https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPfC9ZYRnWJ1RDu%3DtXH6X4vBB6LXBW-VSZP8ORQpgq0Dg%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- 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 post to this group, send email to [email protected]. 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/CAARuXCQnc%3DqN0oqEo0j-sgk8S0WCb9tWVGwnJ9mgmFBzDRD4EA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
