Dual-Y Example

An example of a Google Dual-Y Line Chart.

by btipling

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['line', 'corechart']}]}"></script>
     <button id="change-chart">Change to Classic</button>
  <br><br>
  <div id="chart_div"></div>

JavaScript

google.load('visualization', '1.1', {packages: ['line', 'corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Month');
      data.addColumn('number', "Downloads");

      data.addRows([
        [new Date(2014, 0), 2],
        [new Date(2014, 1), 8.7],
        [new Date(2014, 2), 12],
        [new Date(2014, 3), 15.3],
        [new Date(2014, 4), 18.6],
        [new Date(2014, 5), 20.9],
        [new Date(2014, 6), 19.8],
        [new Date(2014, 7), 16.6],
        [new Date(2014, 8), 13.3],
        [new Date(2014, 9), 9.9],
        [new Date(2014, 10),6.6],
        [new Date(2014, 11), 4.5]
      ]);

      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };

      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new...