Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chart veritcal axis with percentage sign

Im using google chart api to show line chart in my application, in that chart now i want to show the vertical axis values with percentage sign. for that i tried the following option

chart.draw(data, {vAxis: {format:'#%'} } );

as mentioned in

How do you set percentage in Google Visualization Chart API?

by 'B Seven'

when using this method, the vertical axis values got multiplied by 100. i.e instead of '12%' - im getting 1200% in vaxis!!!!

i have checked in https://developers.google.com documents also, i cant find any approach to do this.

Is there any alternate to show percentage sign in vaxis.

like image 584
Gnanz Avatar asked Mar 18 '14 07:03

Gnanz


People also ask

When should you use a column chart?

Column charts are useful for showing data changes over a period of time or for illustrating comparisons among items. In column charts, categories are typically organized along the horizontal axis and values along the vertical axis.


2 Answers

Escaping the percentage sign in format works for me.

chart.draw(data, {vAxis: {format: '#\'%\''} } );

This shows Y axis labels with percentage sign without any data update as I expected.

like image 110
Gnanz Avatar answered Oct 31 '22 00:10

Gnanz


Problem is that there is no data type percentage but only number, date... Google docs describes hAxis.format and vAxis.format as:

For number axis labels, this is a subset of the decimal formatting ICU pattern set. For instance, {format:'#,###%'} will display values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.

And ICU pattern set states:

%   Prefix or suffix    Yes Multiply by 100 and show as percentage

So, it seems that the only option is to divide values with 100 on server or client side.

like image 33
Anto Jurković Avatar answered Oct 31 '22 01:10

Anto Jurković