More then 2 yAxes

[Tjeerd Kramer]

Hi,

I am using a Combo chart to display 3 metrics, all with very different
ranges. I am capable of adding all 3 metrics to the graph, but the
only thing I can't get to work properly is the display position of the
yAxes scales.

Part of the code:

var options = {
series:{
0:{targetAxisIndex:0, lineWidth: 1, pointSize: 3},
1:{targetAxisIndex:1, lineWidth: 1, curveType: 'function',type:
"line"},
2:{targetAxisIndex:2, lineWidth: 1, color: 'grey'}
},
vAxes:{
0:{textStyle:{color: 'blue'}, title:'Turnover'},
1:{textStyle:{color: 'red'}, title:'CPA'},
2:{textStyle:{color: 'grey'}, title:'Profits'},
}
};

The problem here is that the scales for CPA and profits are written on
top of eachother. I'd like to be able to give them a margin and send
either one 100px to the right. Can this be achieved?

Many thanks

[asgallant]

As far as I am aware, the charts support a maximum of 2 vertical axes (with the exception of AnnotatedTimeline charts, which can support 3).

[Tjeerd Kramer]

Well, I have added 3:

var options = {
title: 'Average order value for "<? echo $city_name; ?>" at <? echo
$site_domain; ?>',
series:{
0:{targetAxisIndex:0, lineWidth: 1, pointSize: 3, type: "line"},
1:{targetAxisIndex:1, lineWidth: 1, pointSize: 3, curveType:
'function', type: "line"},

2:{targetAxisIndex:2, lineWidth: 1, color: 'grey'},

3:{targetAxisIndex:2, lineWidth: 1, color: 'orange', curveType:
'function', type: "line"}
},
vAxes:{
0:{minValue: 0, textStyle:{color: 'blue'}, title:'Turnover'},
1:{textStyle:{color: 'red'}, title:'Max CPA'},
2:{textStyle:{color: 'white'}, title:'Profits'},
}
};

And it all works as expected, except for the fact that the numbers on
the 3rd yAxis should move a little to the right.

[asgallant]

Like I said, the maximum number of supported y-axes is two.  The "third" axis is probably a bug.

[Tjeerd Kramer]

O.k., thanks. Where do I file a feature request? ;-)

[asgallant]

Here: http://code.google.com/p/google-visualization-api-issues/issues/list 

[hanjar]

hi,

original :

                        vAxes:{

                                0:{textStyle:{color: 'blue'}, title:'Turnover'},

                                1:{textStyle:{color: 'red'}, title:'CPA'},

                                2:{textStyle:{color: 'grey'}, title:'Profits'},

                        }

Convert it to  :

                        vAxes:{

                                0:{textStyle:{color: 'blue'}, title:'Turnover'},

                                1:{textStyle:{color: 'red'}, title:'CPA',textPosition: 'in'},

                                2:{textStyle:{color: 'grey'}, title:'Profits',textPosition: 'out'},

                        }

best regards,

hanjar

May combine with setting chart area width to expand the label/legend area

chartArea -> width:"80%"