This page demonstrates all the controls that are part of the Google Charts "Controls and Dashboards" API and showcases a few different visual themes you can use with the library.
Pick a theme: Default Plus Hi-Contrast
The Google Charts "Controls and Dashboards" API, part of the Google Chart Tools API, describes how to assemble multiple charts into dashboards and enrich them with interactive controls to manipulate the data they display.
Controls are user interface 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.
This page demonstrates all the controls that are part of the API and showcases a few different visual themes you can use with the library.
To use one of the themes defined here, it's enough to add its stylesheet to the page where you are using Google Charts and assign the corresponding class name to the page element that contains your dashboard and controls.
<html>
<head>
<!--Load the theme style-->
<link
rel="stylesheet"
type="text/css"
href="google-visualization-controls-theme-plus.css" >
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// your dashboard code here.
}
</script>
</head>
<body>
<div id="dashboard_div" class="google-visualization-controls-theme-plus" >
<!-- Render your dashboard here -->
</div>
</body>
</html>
You can find the list of available themes here.
Have a look at one of the existing themes and start by copying and modifying one of those. Many of the controls widgets are built on top of the open source Closure library, and they maintains the same style names. When writing your own theme, ensure that you are properly namespacing all your CSS rules to avoid overriding others.
If you write a new theme, send us a pull request or contact us to have it included here.
Get the source code for these themes on GitHub : battlehorse/google-charts-controls-gallery
You can also clone the project with Git by running:
$ git clone git://github.com/battlehorse/google-charts-controls-gallery
Finally, you can download this project in either zip or tar formats.
Look for documentation at the Google Chart Tools homepage. Ask questions in the forum or ping me directly at battlehorse@gmail.com.