Can we draw google chart with two y-axis one with

问题:

I need to use google chart with two y-axis and one x-axis, like (https://en.wikipedia.org/wiki/Spirometry#/media/File:Flow-volume-loop.svg). Does google chart support this type of graph?

回答1:

to create a graph as referenced by the link
use a single y-axis, with negative values for the bottom portion

then use object notation to set both the value (v:) and the formatted value (f:)
{v: -8, f: '8'}

then use the same notation for the y-axis tick marks (ticks:)

the chart will display the formatted value on the axis as well as tooltips

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['X', 'Y'],
      [1.5,  8],
      [2.5,  4],
      [3.5,  1],
      [1.5, {v: -8, f: '8'}],
      [2.5, {v: -4, f: '4'}],
      [3.5, {v: -1, f: '1'}],
    ]);

    var ticksX = [0, 2, 4, 6];
    var ticksY = [{v: -10, f: '10'}, {v: -8, f: '8'}, {v: -6, f: '6'}, {v: -4, f: '4'}, {v: -2, f: '2'}, 0, 2, 4, 6, 8, 10];

    var options = {
      hAxis: {
        title: 'h axis',
        ticks: ticksX
      },
      vAxis: {
        title: 'v axis',
        ticks: ticksY,
        viewWindow: {
          min: -10,
          max: 10
        }
      },
      height: 600,
      width: 600,
      chartArea: {
        height: '75%',
        width: '75%'
      }
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>