i'm searching for a way to define two different y axis in a google column chart. I already found some help here: Can Google Charts support dual y-axis (v-axis)? and in various other posts
I managed to get the two axis in my chart and i could allign the data correctly to the different axis.
My problem now is that i don't seem to be able to give the two y axis different attributes. Everything i write into the brakets just seems to be ignored be google charts. If i set attributes for both axis it works - but i want for example two different titles...
It seems like i'm missing something important in my code
Here is my code what i'm trying to do:
function drawChart002() {
// grab the CSV
jQuery.get("csv/compare_time_percent.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = jQuery.csv.toArrays(csvString, {onParseValue: jQuery.csv.hooks.castToScalar});
for(var i=1; i< arrayData.length; i++){
var row = arrayData[i];
for(var j=0; j< row.length; j++){
var el = row[j];
if(j == 0){
row[j] = new Date(el);
}
}
}
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data, true);
// view.setColumns([0,1]);
// set chart options
var options = {
title: "",
series:{0: {targetAxisIndex:0},
1: {targetAxisIndex:1},
2: {targetAxisIndex:1}
},
hAxis: {title: data.getColumnLabel(0)},
vAxis: {0: { title: 'Unterschied in Prozent'},
1: { title: 'Temperatur in Celsius', viewWindow: {min: -20, max: 20}}
},
curveType: 'function',
legend: { position: 'bottom' },
};
// create the chart object and draw it
var chart_div = document.getElementById('div_002');
var chart = new google.visualization.ColumnChart(document.getElementById('div_002'));
var chart_div_print = document.getElementById('div_002_link');
var chart_print = new google.visualization.ColumnChart(document.getElementById('div_002_link'));
// wait for the chart to finish drawing before calling the getImageURI() methode
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
document.getElementById('div_002_link').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
console.log(div_002);
});
chart.draw(view, options);
});
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart002);
but instead of using the titles google charts dosen't print any title for both axis, and he ignores the viewWindow option too
i hope my problem is clear and you can help me to find my mistake and help me with my problem
