Themes for the Controls and Dashboards API

[Riccardo Govoni]

Folks,

The Controls And Dashboards API is the part of the Google Charts API that lets you assemble multiple charts into dashboards and enrich them with interactive controls to manipulate the data they display. It defines a set of widgets (category pickers, range sliders, autocompleters...) you interact with in order to drive the data managed by a dashboard and the charts that are part of it.

A while back a couple of questions came up in the forums about skinning and styling the Controls widgets.

To address this, I've set up an example project at https://github.com/battlehorse/google-charts-controls-gallery that shows how to create custom themes for the Controls widgets. I have also included two sample themes as examples (one inspired by the latest redesign of Google properties, the other showing an high-contrast setup for accessible access). The styles are easily inspectable, so it should be fairly easy for anyone to extend / modify them.

You can find demos and docs at http://battlehorse.github.com/google-charts-controls-gallery/.

I have hacked it together quickly, so it's still a bit rough (and I haven't really tested it across a wide set of browsers).

Comments and contributions welcome,

-- R.

[Mimi Maqueda]

Riccardo,

Is there any way to change a css property of a ControlWrapper through Javascript? 
I know how to do it with css but I want to know if there is a way to change the control width depending on device/browser width. 
I mean something like this:

   document.getElementsByClassName('google-visualization-controls-rangefilter .google-visualization-controls-slider-horizontal').style.width = "100%";

and if there is a way... where can I write it? After or before drawing the Dashboard?
I would really be grateful if you could tell me how to do it.