Tuesday, 9 April 2013

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 


  1. Thanks!
    Do you know any real database with free access? for research and development?

  2. Take a look at Google's Public Data Explorer: http://www.google.co.uk/publicdata/directory

  3. flights to jeddah11 April 2013 08:36

    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

  4. 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?


  5. 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.

  6. 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.

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

  8. 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.

  9. Here are a few more details about how to set the axes ranges: http://lamages.blogspot.co.uk/2013/08/setting-axes-limits-with-googlevis.html