Google Charts to Draw Multiple Bar Charts - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Bar Chart

Description

Google Charts to Draw Multiple Bar Charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w w w. j a  va  2s  .com*/
startChart();
      function startChart() {
          var data = new google.visualization.arrayToDataTable([
              ['Galaxy', 'Distance', 'Brightness'],
              ['Canis Major Dwarf', 8000, 23.3],
              ['Sagittarius Dwarf', 24000, 4.5],
              ['Ursa Major II Dwarf', 30000, 14.3],
              ['Lg. Magellanic Cloud', 50000, 0.9],
              ['Bootes I', 60000, 13.1]
          ]);
          var options = {
              width: 900,
              title: 'Nearby galaxies',
                      vAxes: {
                 0: {
                    title: 'parsecs',
                    },
                 1: {
                    title: 'apparent magnitude',
                 },
                  },
                      series: {
                 0:{
                    targetAxisIndex:0,
                    },
                 1:{
                    targetAxisIndex:1,
                    },
            },
          };
          var chart = new google.visualization.ColumnChart(document.getElementById('dual_y_div'));
          chart.draw(data, options);
  var chart1 = new google.visualization.ColumnChart(document.getElementById('dual_y_div1'));
          chart1.draw(data, options);
      }
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="dual_y_div" style="width: 900px; height: 500px;"></div> 
      <div id="dual_y_div1" style="width: 900px; height: 500px;"></div>  
   </body>
</html>

Related Tutorials