I'm looking at further improving a combo chart I created here by making it first a dual y axis combo chart then a multiple axis combo chart.
As seen here I've figured out how to create a basic combo chart using the tutorial.
google.load("visualization", "1", {
packages: [ "corechart", "bar" ]
});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
[ 'Month', 'Col1', 'Col2', 'Col3', 'Col4', 'Col5', 'Col6' ],
[ 'Set 1', 165, 938, 522, 998, 450, 614.6 ],
[ 'Set 2', 135, 1120, 599, 1268, 288, 682 ],
[ 'Set 3', 157, 1167, 587, 807, 397, 623 ],
[ 'Set 4', 139, 1110, 615, 968, 215, 609.4 ],
[ 'Set 5', 136, 691, 629, 1026, 366, 569.6 ]
]);
var options = {
title: 'Chart title',
width: 1001,
height: 500,
vAxis: {
title: "VAxis title"
},
hAxis: {
title: "HAxis title"
},
seriesType: "bars",
series: {
5: {
type: "line"
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
}
.chartwrapper {
margin: 20px 0 12px 0;
}
#number_format_chart {
width: 100%
}
<script src="https://www.google.com/jsapi"></script>
<div class="chartwrapper">
<!--Div that will hold the bar charts -->
<div id="number_format_chart"></div>
</div>
Now moving on to changing the plain combo chart to a dual y version this is what I'm trying to achieve.
I thought adding the code below would help but no luck as the 2nd y axis isn't displayed
series: {
0: { axis: 'Col1' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'Col2' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
y: {
Col1: {
label: 'leftyaxis'
}, // Left y-axis.
Col2: {
side: 'right',
label: 'rightyaxis'
} // Right y-axis.
}
}
Any help is appreciated