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>
  <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");
      currentData = 2.4;
      var growthRate = .2;
      dataSet = [];
	  for (var i = 0; i < 12; i++) {
          dataSet.push([new Date(2016, i), currentData]);
          currentData = currentData + (currentData * growthRate);
      }
      data.addRows(dataSet);

      var materialOptions = {
        chart: {
          title: 'Downloads in millions'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Downloads'},
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Downloads in Millions'},
          }
        }
      };

     

      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
      }

      drawMaterialChart();

    }