Google Charts API

From Earlham CS Department
Revision as of 03:58, 3 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.

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



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.



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 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]