Google Charts API

From Earlham CS Department
Revision as of 20:24, 28 February 2014 by Ghcrows13 (talk | contribs) (Options)
Jump to navigation Jump to search

Under construction during Spring 2014.


  • Google Charts are relatively easy to get running but have a lot of nuance to them.
    • Consider using Google Sheets instead. Insert -> Chart uses the same API but with an intuitive GUI. Has potential downsides.
  • Please make use of existing documentation and resources as it will help you immensely.


The [DataTable] class stores data to be used by charts. You can use a single datatable as the data source for multiple charts or dashboards.


The [dashboard] is a container for ChartWrapper and ControlWrapper objects. You must use a dashboard if you want to use controls or to use multiple charts that use the same datatable. Dashboards use ONE datatable. If you need to represent multiple datatables you need multiple dashboards. It has a draw function that'll redraw everything in the dashboard.

       var dashboard = new google.visualization.Dashboard(


Charts use options, must have a container div, must have a datatable, and must be drawn.


Chart options can be created in multiple ways. Here's [documentation] and some examples.

options can be set in the following ways:

  • at creation by passing JSON as the chart's options parameter
    • Example:

var options = { width: 400,

 height: 240,
 title: 'Toppings I Like On My Pizza',
 colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']


  • chart.setOptions(JSON) which is equivalent to setting options at instantiation
  • chart.setOption('key', value) where key is the option being changed
    • Example: chart.setOption('is3D', true);
  • chart.getOptions() is the read accessor


  • draw a chart by using chart.draw(data, options) where data is a datatable and options is a JSON string

chart.draw(data, options);

  • to draw a dashboard, and all of its charts/controls, call the draw function with your datatable



The [DataView] class changes how a DataTable is represented. It's a wrapper that


The [controls] are filters that affect how data is represented in a chart. They're instantiated with JSON options similar to charts. In order to affect charts they must be bound to the chart using this snippet: "dashboard.bind(control, chart);".


They're a hassle. Most Javascript errors can be debugged from your browser's developer console. Google Charts drawing errors, on the other hand, seem to provide little feedback.

Generally a chart fails to draw in the following ways.

  • when the DataTable is
  1. empty
  2. incorrectly formatted
  3. of incorrect format for that chart type
  4. lacking vital information such as headers
  • when the Chart's options are incorrect such as
  1. wrong chart type [documentation]
  2. wrong axis type (discrete/continuous) [documentation]



[Library Documentation]

[Code Playground]


[Wikipedia Overview]

[Discrete vs Continuous timelines]