Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 509
Kevin Avatar asked Aug 31 '11 12:08

Kevin


People also ask

Can Google sheets have two Y axis?

You can add a second Y-axis to a line, area, or column chart. On your computer, open a spreadsheet in Google Sheets. Double-click the chart you want to change. At the right, click Customize.

Can you have 2 y axis on a graph?

When the data values in a chart vary widely from data series to data series, or when you have mixed types of data (for example, currency and percentages), you can plot one or more data series on a secondary vertical (Y) axis.

What is a dual axis chart?

A dual axis chart (also called a multiple axes chart) uses two axes to easily illustrate the relationships between two variables with different magnitudes and scales of measurement. The relationship between two variables is referred to as correlation.


1 Answers

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.

like image 89
QLeap Avatar answered Oct 23 '22 19:10

QLeap