Google Charts API

From Earlham CS Department
Revision as of 16:56, 28 February 2014 by Ghcrows13 (talk | contribs)
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. 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 with multiple charts.

  • Data can be imported via JSON or via arrays using [this syntax].


The [[


Charts are


Chart options can be set 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 creation
    • 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 JSON

chart.draw(data, options);


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]