Can Google Charts support dual y-axis (v-axis)?

Question

The Flot chart api supports dual v-axis scales, as shown by this example.

I'm using Google Charts - is this possible also with Google? I've had a look through the examples and docs, but can't find any examples / references to indicate it does support dual axis charts.

Pericycle

Answer 1

It took me a while, to figure this out, but Google Charts does support dual Y-axis (v-axis). I want to use the Javascript API and not the HTML interface.

This example can be tested here: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

Replace all of that code with this code showing how to have two different Y-axis scales:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addColumn('number', 'Blanket 2');
  data.addRow(["A", 1, 1, 0.5]);
  data.addRow(["B", 2, 0.5, 1]);
  data.addRow(["C", 4, 1, 0.5]);
  data.addRow(["D", 8, 0.5, 1]);
  data.addRow(["E", 7, 1, 0.5]);
  data.addRow(["F", 7, 0.5, 1]);
  data.addRow(["G", 8, 1, 0.5]);
  data.addRow(["H", 4, 0.5, 1]);
  data.addRow(["I", 2, 1, 0.5]);
  data.addRow(["J", 3.5, 0.5, 1]);
  data.addRow(["K", 3, 1, 0.5]);
  data.addRow(["L", 3.5, 0.5, 1]);
  data.addRow(["M", 1, 1, 0.5]);
  data.addRow(["N", 1, 0.5, 1]);


  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function", width: 500, height: 400,
    vAxes: {0: {logScale: false},
            1: {logScale: false, maxValue: 2}},
    series:{
       0:{targetAxisIndex:0},
       1:{targetAxisIndex:1},
       2:{targetAxisIndex:1}}}
          );
}

By adding maxValue: 2 to the code, and setting series 1 & 2 to that axis, they work properly on a second axis.

Morrissey

Note that the above example does not show two different Y-axis scales (despite saying it does) only because the second vAxis is set to maxValue: 10, if you set the two vAxes to different maxValue values you will see two different scales. – Haphazard

@JamieKitson the answer does now. Someone should've edited it – Vladamir

This answer would be improved by adding titles to the two vertical axes, since that would fit 99% of users' requirements when adding a second axis. – Openair

It worked for me thanks but only issue am facing is Multiple Titles is there any fix for that ? – Chewink

Another jsfiddle, where Y axes have different data formats, one is number and other is timeofday jsfiddle.net/zb7u9e6L – Gombroon

I was unable to get axis labels working for multiple haxes on the BarChart, but for ColumnChart it is possible to get multiple vaxes labels appearing. – Loiret

Answer 2

Non-JavaScript solution

Assuming that you are looking for a series that shares that same X-axis (horizontal) but has different values (and scales) for the Y-axis (vertical) then you can do this without recourse to JavaScript as follows:

1. Select Insert | Chart from the menu.
2. Double-click the chart, and in the chart editor select Chart Type | Line chart.
3. Click the grid icon in the "Data range" box to get the data range dialog.
4. Click the worksheet containing the data you're interested in for the Y-axis lines and highlight from the top left to the bottom right so you cover all the Y-axis lines. You can tidy up the columns later.
5. Click OK and you'll see a collection of series has been extracted. Use the "dot menu" for each series to remove those you're not interested in.
6. Click the grid icon in the "X-axis" box to the get the data range dialog once again.
7. Click the worksheet containing the data you're interested in for the X-axis line and highlight from the top to the bottom.
8. Click OK and you'll see the X-axis has been filled in and both Y-axis lines are sharing the same left axis label.
9. Click on the line you want to use the right axis label for and use the "Axis" box in the chart editor dialog to select "Right axis".

You can now edit the various other properties of the chart to get it to look the way you want in terms of presentation.

Frech

Specifically, the option is in Chart Editor -> Customize -> Series -> Axis – Murderous

Answer 3

I did it.

1. Click on the data series
2. A small box will appear with 2 small squares with only two bold sides each
3. Click on the second one

Might be done then.

Hijacker

Could you add a concrete example of yours to explicit your answer ? – Ericerica