Multiple X axis labels in google bar charts - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Multiple X axis labels in google bar charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
      function drawStuff() {//  w  ww .j  a  va2 s .com
        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: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', 
          series: {
            0: { axis: 'distance' }, 
            1: { axis: 'brightness' }
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, 
              brightness: {side: 'top', label: 'apparent magnitude'} 
            }
          }
        };
      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    
      </script> 
   </head> 
   <body> 
      <div id="dual_x_div" style="width: 900px; height: 500px;"></div>  
   </body>
</html>

Related Tutorials