Dual-Y Example

An example of a Google Dual-Y Scatter Chart.

by shakedk

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="scatterchart_material"></div>

JavaScript

google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();        
/*         data.addColumn('number', 'Bus Counts');
        data.addColumn({type:'string',role:'tooltip'});
        data.addColumn('number', 'Bus Speeds');
        data.addColumn({type:'string',role:'tooltip'}); */
        data.addColumn('string', 'Year');        
        data.addColumn('number', 'Sales');
        // A column for custom tooltip content
				data.addColumn({type: 'string',role: 'tooltip',});
        
     data.addRows([
        ['Name1', 1000, 'Tooltip string'],
        ['Name2', 1170, 'Tooltip string'],
        ['Name3', 660, 'Tooltip string'],
      ]);
/*         data.addRows([
        [6,32,'9'],
        [6,22,'10'],
        [10,18,'14'],
        [4,34,'15'],
        [1,22,'17'],
        [9,30,'18'],
        [6,20,'19'],
        [9,33,'22'],
        [10,21,'23'],
        
        ]);
         */
        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Bus Speeds/Counts',            
          },
          hAxis: {title: 'Bus Counts'},
          vAxis: {title: 'Bus Speeds'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }