Re: Google Visualization API Format Secondary Y-axis different from Primary Y-Axis

4,222 views
Skip to first unread message

asgallant

unread,
Aug 7, 2012, 6:07:27 PM8/7/12
to google-visua...@googlegroups.com
You almost had it, use vAxes instead of vAxis when formatting multiple axes:

vAxes: {
    0: {format: '#,###'},
    1: {format: '#%'}
}​ 

On Tuesday, August 7, 2012 4:58:16 PM UTC-4, David Boggus wrote:
I posted this question on Stackoverflow already but have not received any responses yet so I figured this might be a better place to post it.

I have some data that I am trying to display using the Google Visualization API. I have been able to create the graph and it looks great except that the Secondary Y-Axis should be displayed as percentages instead of regular numbers. Here is my code and an image of what is produced.

google.load('visualization', '1', {packages: ['corechart']});

function drawVisualization() {
    //Some raw data (not necessarily accurate)'
    var data = google.visualization.arrayToDataTable([
        ['AuditPeriod', 'Audit Count', 'Fail Percentage'],
        ['02-11-2012',  0,      0],
        ['02-18-2012',  0,      0],
        ['02-25-2012',  0,      0],
        ...
        ['07-21-2012',  1476,   .233062],
        ['07-28-2012',  1651,   .253180],
        ['08-04-2012',  2217,   .210645]
    ]);

    var options = {
        vAxis: [0: {format: '#,###'}, 1: {format: '#%'}],
        hAxis: { title: "Week", format: 'm/d/y'},
        series: {
            0:{ type: "bars", targetAxisIndex: 0 },
            1: { type: "line", targetAxisIndex: 1}
        }
    }

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}        
google.setOnLoadCallback(drawVisualization);

enter image description here

If I set vAxis:{format: '#%'} then both axes are formated as Percentages which I don't want. Is there a way to format the second axis different form the first?


David Boggus

unread,
Aug 9, 2012, 6:56:32 PM8/9/12
to google-visua...@googlegroups.com
Wow, Thanks for the response. Is this stuff, using a secondary axis documented somewhere? I've only been able to find information for it on these groups.

asgallant

unread,
Aug 9, 2012, 7:02:34 PM8/9/12
to google-visua...@googlegroups.com
vAxes is documented in the configuration options for each chart that supports multiple vertical axes (ex: line charts: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options).

David Boggus

unread,
Aug 9, 2012, 7:14:30 PM8/9/12
to google-visua...@googlegroups.com
Thanks again. I remember seeing it but I guess it just didn't click.

Ashish Sharma

unread,
Apr 22, 2014, 6:11:47 AM4/22/14
to google-visua...@googlegroups.com
How can i apply different title for different Y-AXIS ?

Andrew Gallant

unread,
Apr 22, 2014, 11:57:11 AM4/22/14
to google-visua...@googlegroups.com
Set the vAxes.1.title option:

vAxes: {
    0: {
        // options for left y-axis
    },
    1: {
        // options for right y-axis
        title: 'Right y-axis title'
    }
}

Gary Gilbert

unread,
Sep 13, 2019, 10:33:13 AM9/13/19
to Google Visualization API

given this fiddle 


how would you only apply the style to the right axes?

specifying  options['vAxis']['0']['format'] = this.value; does nothing

Thanks in advance
Reply all
Reply to author
Forward
0 new messages