How to set axis options in googleVis

Setting axis options in googleVis charts can be a bit tricky. Here I present two examples where I set several options to customise the layout of a line and combo chart with two axes.

The parameters have to be set in line with the Google Chart Tools API, which uses a JavaScript syntax. In googleVis chart options are set via a list in the options argument. Some of the list items can be a bit more complex, often wrapped in {} brackets, e.g. for various formatting options or in [] brackets, if there are multiple series to consider. Within those brackets sub-options are set via argument : value, using the : character for assignments.

There are many other options as part of the Google Chart Tools API, which are not supported by googleVis yet, such as columns roles, controls and dashboards, etc. Please get in touch if you have ideas in this regard and/or would like to collaborate.

In my first example I display two series of dummy data in a line chart with two axes. The left hand scale is in percentages and the right hand scale in amounts. Note in the code below how I set the various parameters and the placements of the different kinds of brackets.

In my second example I plot the data in a combo chart, with the amounts in millions to be displayed in bars and the percentage values as a line. Again, I set the various parameters in the options argument. For more details see the help pages and examples of gvisComboChart and other googleVis charts. Note that the options do vary from chart type to chart type, particularly for a motion chart.

I should add that date values in the x-axis of line, bar, combo and other core charts were introduced with googleVis version 0.4.2, published about 3 weeks ago.

Session Info

R version 3.0.0 (2013-04-03)
Platform: x86_64-apple-darwin10.8.0 (64-bit)

[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] googleVis_0.4.2

loaded via a namespace (and not attached):
[1] RJSONIO_1.0-3 tools_3.0.0 


Jeuel said...

Do you know any real database with free access? for research and development?

Markus Gesmann said...

Take a look at Google's Public Data Explorer:

flights to jeddah said...

I recently came across your blog and have been reading along. I thought I would leave my first

comment. I dont know what to say except that I have enjoyed reading. Nice blog.

I will keep visiting this blog very often.

flights to Umrah

cheap flight to jeddah

flights to jeddah

umrah jeddah flights

umrah flights from London

cheap flights to umrah

Aharach said...

Brilliant work!

Just want to know more about the option in vAxis with minValue and maxValue. I've tried to add "minValue:100000,maxValue:320000" to restrict the vAxis for "Millions", but it keeps showing range 0 to 400,000. Do you know the correct way to configure it?


Markus Gesmann said...

minValue and maxValue are rounded to the next nearest gridline, see the help file for more details. Hence, you have to fiddle around with the number of gridlines in your chart. Insert "gridlines:{color:'red', count:10}," before your "minValue:100000" statement and play around with the count value.

tjday said...

Is there a way to set axis limits outside the data range? As. I have a time series x-axis that has data from 1-1-2009 to 1-1-2012 (monthly), but I want to limits to be 2004 to 2013.
Actually, I haven't really seen how to set date limits. But I will keep trying.

Markus Gesmann said...

Good question. I don't know the answer, but I am sure the guys on the Google Visualisation API forum can help.

tjday said...

Yes, they were helpful.
in the hAxis settings you may use:
viewWindow: {min: new Date(2002,0,0), max: new Date(2013,5,0)}

Anyway, thanks for your work.

Markus Gesmann said...

Here are a few more details about how to set the axes ranges:

Dong Li said...

Hi, I was wondering if there's a way to make the scale of the two y-axes automatically adjust to the data. I have two sets of variables, each set in a dropdown menu (this is done through the Shiny server). Would it be possible that the user selects one variable from each drop down menu to make a 2-axis chart? Those variables can be in $, year-to-year % change, index, etc... I doubt it but would like to ask just in case... Many thanks!

Romain said...

Dear Markus,
I am wondering how you are able to export these amazing static charts into .png (as you did at the top on this page). I have hard time to convert the static html into pictures, which could help me for static presentations.

Thanks a lot for your help !

Kind regards


Markus Gesmann said...

Hi Romain,
I just take screen shots for this blog. You can do some clever stuff with the Google API directly, visit, but I never looked into this in detail.
I hope this helps.

Romain said...

Perfect, thanks a lot !

Post a Comment