Blog

Scatter Chart with Dual Y-axis

Following is an example of material scatter chart with a dual Y-axis. We’ve already seen the configuration used to draw this chart in the Google Charts Configuration Syntax chapter. So, let’s see the complete example.

Configurations

We’ve used axes.y configuration to show dual y-axes.

// Set chart options
var options = { 
   axes: {
      y: {
         'hours studied': {label: 'Hours Studied'},
         'final grade': {label: 'Final Exam Grade'}
      }
   }
};

Example

googlecharts_scatter_dualy.htm

<html>
   <head>
      <title>Google Charts </title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart','scatter']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Student ID');
            data.addColumn('number', 'Hours Studied');
            data.addColumn('number', 'Final');
 
            data.addRows([
               [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
               [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
               [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
               [9, 9, 80],  [10, 10, 82], [11, 0, 75],
               [12, 5, 80], [13, 3, 90],  [14, 1, 72],
               [15, 5, 75], [16, 6, 68],  [17, 7, 98],
               [18, 3, 82], [19, 9, 94],  [20, 2, 79],
               [21, 2, 95], [22, 2, 86],  [23, 3, 67],
               [24, 4, 60], [25, 2, 80],  [26, 6, 92],
               [27, 2, 81], [28, 8, 79],  [29, 9, 83]
            ]);
 
            var options = {
               chart: {
                  title: 'Students\' Final Grades',
                  subtitle: 'based on hours studied'
               },
               width: 800,
               height: 500,
               series: {
                  0: {axis: 'hours studied'},
                  1: {axis: 'final grade'}
               },
               axes: {
                  y: {
                     'hours studied': {label: 'Hours Studied'},
                     'final grade': {label: 'Final Exam Grade'}
                  }
               }
            };
            // Instantiate and draw the chart.
            var chart = new google.charts.Scatter(document.getElementById('container'));
            chart.draw(data, google.charts.Scatter.convertOptions(options));
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

This Post Has One Comment

Leave a Reply