Google charts two bar charts on one page

Question

I need to create two bar charts on a single webpage. I've read through and tried the solutions in every related question on stackoverflow and I just can't work out why I can view one chart but not two with my current code. As far as I can see, my code is the same as some of the solutions. What do I need to change to create two bar charts on a single webpage?

This code, compiled from google and other online sources, creates one chart (file is saved as .html):

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create the data table.
     var data = google.visualization.arrayToDataTable([
    ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
    ['Var A',   .5 , '', .5,  ''],
    ['Var B', .9, '', .1,  ''],
  ]);

  var options = {
    width: 250,
    height: 150,
    backgroundColor: '#FFFFF0',
    legend: { position: 'none'},
    hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
    bar: { groupWidth: '75%' },
    isStacked: true,
    colors: ['#FF6600', '#FFFFF0'],
  };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
    draw(chart);
    </script>
  </head>

<body>
<!--Div that will hold the bar chart-->
<div id="chart_div"></div>
</body>

Based on my research, I believe the following code should create two charts, but a single chart appears. This is the code I need to change:

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create the data table.
     var data = google.visualization.arrayToDataTable([
        ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
        ['Var A',   .5 , '', .5,  ''],
        ['Var B', .9, '', .1,  ''],
    ]);
     var data2 = google.visualization.arrayToDataTable([
        ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
        ['Var A',   .2 , '', .8,  ''],
        ['Var B', .8, '', .2,  ''],
    ]);

     var options = {
       width: 250,
       height: 150,
       backgroundColor: '#FFFFF0',
       legend: { position: 'none'},
       hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
       bar: { groupWidth: '75%' },
       isStacked: true,
       colors: ['#FF6600', '#FFFFF0'],
     };

    // Instantiate and draw our chart, passing in some options.
     var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
     chart.draw(data, options);
     var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
     chart.draw(data2, options2);
  }
    draw(chart);
    draw(chart2);
</script>
</head>

<body>
<!--Div that will hold the bar charts-->
<div id="chart_div"></div>
<div id="chart_div2"></div>
</body>

UPDATE: Here is the working code, debugged:

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> 

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = google.visualization.arrayToDataTable([
    ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
    ['Var A',   .5 , '', .5,  ''],
    ['Var B', .9, '', .1,  ''],
]);
var data2 = google.visualization.arrayToDataTable([
    ['Item', 'Yes', { role: 'tooltip' } ,'No',  { role: 'tooltip' } ],
    ['Var A',   .2 , '', .8,  ''],
    ['Var B', .8, '', .2,  ''],
]);

var options = {
    width: 250,
    height: 150,
    backgroundColor: '#FFFFF0',
    legend: { position: 'none'},
    hAxis:{ textPosition: 'none', gridlines: {color:'grey', count: 2}},
    bar: { groupWidth: '75%' },
    isStacked: true,
    colors: ['#FF6600', '#FFFFF0'],
 };

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart.draw(data2, options2);
}

draw(chart);
draw(chart2);
</script>
</head>

<body>
<!--Div that will hold the bar charts-->
<div id="chart_div"></div>
<div id="chart_div2"></div>
</body>

Answer 1

options2 is not defined in your code, and you call the draw method of chart twice instead of calling it on chart2 :

chart.draw(data2, options2);

You can either reuse options for the second chart, or you can create a new options object. This might be what you want to use:

chart2.draw(data2, options);

Google charts two bar charts on one page

Question

1 answers

solution1
1 ACCPTED 2014-08-21 01:09:50

Google charts two bar charts on one page

Question

1 answers

solution1 1 ACCPTED 2014-08-21 01:09:50

solution1
1 ACCPTED 2014-08-21 01:09:50