Dual-Y Example

An example of a Google Dual-Y Column Chart.

by xawixawxaw

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawStuff);

      function drawStuff() {
          var data = new google.visualization.arrayToDataTable([
              ['Galaxy', 'Distance', 'Brightness'],
              ['ARMM', 4000, 3],
              ['CAR', 5000, 3],
              ['NCR', 13000, 12],
              ['I', 8000, 5],
              ['II', 2000, 3],
              ['III', 7000, 5],
              ['IV-A', 8000, 5.5],
              ['IV-B', 13000, 9],
              ['V', 6000, 7],
              ['VI', 13000, 6],
              ['VII', 5000, 3.1],
              ['VIII', 8000, 9],
              ['IX', 9000, 7],
              ['X', 10000, 8],
              ['XI', 12000, 9],
              ['XII', 11000, 10],
              ['XIII', 8000, 5],

              ]);

          var options = {
              colors:'#000',
              width: 1387,
              chart: {
                  title: 'Nearby galaxies',
                  subtitle: 'distance on the left, brightness on the right'
              },
              series: {
                  0: {
                      axis: 'distance'
                       
                  }, // Bind series 0 to an axis named 'distance'.
                  1: {
                      axis: 'brightness'
                  } // Bind series 1 to an axis named 'brightness'.
              },
              axes: {
                  y: {
                      distance: {
                          label: 'parsecs'
                      }, // Left y-axis.
                      brightness: {
                          side: 'right',
                          label: 'apparent magnitude'
                      } // Right y-axis.
                  }
              }
          };

          var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
          chart.draw(data, options);
      };