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

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.

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.

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:
Select Insert | Chart from the menu.
Double-click the chart, and in the chart editor select Chart Type | Line chart.
Click the grid icon in the "Data range" box to get the data range dialog.
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.
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.
Click the grid icon in the "X-axis" box to the get the data range dialog once again.
Click the worksheet containing the data you're interested in for the X-axis line and highlight from the top to the bottom.
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.
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.

Answer 3

I did it.
Click on the data series
A small box will appear with 2 small squares with only two bold sides each
Click on the second one
Might be done then.