Re: [visualization-api] Getting multiple charts on one site

140 views

Skip to first unread message

Yolanda Davis

unread,

Jul 6, 2012, 9:16:42 PM7/6/12

to google-visua...@googlegroups.com

Try changing the following:

var chart2= new google.Visualization.ColumnChart(document.getElementById('Visualization2'))

//lower case v in the getElementById

var chart2= new google.Visualization.ColumnChart(document.getElementById('visualization2'))

I think it's case sensitive.

Yolanda

On Fri, Jul 6, 2012 at 12:59 PM, Dustin Powers <blackha...@gmail.com> wrote:

I'm brand new to google charts and I'm trying to create multiple stacked column charts on a single page, the first chart is rendering fine but the second chart is blank (the space is there for the height but nothing is showing) any help would be much appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Sprocket Dashboard
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});

    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Account', 'Open WOs', 'Open PMs'],
        ['AFV 51',1163,1161]
        ])

        // Create and draw the visualization.
        var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization')).
            draw(data,
                 {'isStacked': true, title:"Open WOs and PMs by location",
                  width:1200, height:600,
                  hAxis: {title: "Site"}}

            );
      }

    function drawVisualization2() {
        // Create and populate the data table.
        var data2 = google.Visualization.arrayToDataTable([
          ['Account', 'Closed WOs MTD', 'Closed PMs MTD'],
        ['AFV 51',64,61]
        ])

        // Create and draw the Visualization.
        var chart2= new google.Visualization.ColumnChart(document.getElementById('Visualization2')).
            draw(data2,
                 {'isStacked': true, title:"Open WOs and PMs by location",
                  width:1200, height:600,
                  hAxis: {title: "Site2"}}

            );
      }

      google.setOnLoadCallback(drawVisualization);
    google.setOnLoadCallback(drawVisualization2);
    </script>
</head>
<body style="font-family: Calibri;border: 0 none;">
    <div id="visualization" style="width: 1200px; height: 600px;"></div>
    <br><br><br><br><br>
    <div id="visualization2" style="width: 1200px; height: 600px;"></div>
</body> </html>

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/uFDIPhfDCX8J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

asgallant

unread,

Jul 9, 2012, 11:59:48 AM7/9/12

to google-visua...@googlegroups.com

All of the "V"'s need to be lowercase, as it is all case-sensitive; change the "Visualization" to "visualization" when creating the DataTable, when creating the chart, and in the #getElementById call.

Yolanda

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

Reply all

Reply to author

Forward

0 new messages