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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With