Draw Four Rows of Google Bar Charts On One Page

Chelsea Pitcher

unread,

Jun 20, 2018, 11:47:05 AM6/20/18

to Google Visualization API

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!

Daniel LaLiberte

unread,

Jun 20, 2018, 12:43:41 PM6/20/18

to Google Visualization API

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?

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Chelsea Pitcher

unread,

Jun 20, 2018, 2:02:00 PM6/20/18

to Google Visualization API

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

Daniel LaLiberte

unread,

Jun 20, 2018, 2:23:34 PM6/20/18

to Google Visualization API

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/

--

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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

For more options, visit https://groups.google.com/d/optout.

Chelsea Pitcher

unread,

Jun 21, 2018, 9:20:41 AM6/21/18

to google-visua...@googlegroups.com

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 | Facebook | Twitter | Instagram

On Wed, Jun 20, 2018 at 1:23 PM, 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com> 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/

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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/6de5cd04-145c-42fa-b0cc-e2a6de22b411%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte
dlaliberte@Google.com 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 google-visualization-api+unsub...@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/CAOtcSJPfC9ZYRnWJ1RDu%3DtXH6X4vBB6LXBW-VSZP8ORQpgq0Dg%40mail.gmail.com.

Reply all

Reply to author

Forward