Difference between revisions of "Google Charts API"

From Earlham CS Department
Jump to navigation Jump to search
Line 46: Line 46:
chart.draw(data, options);
chart.draw(data, options);

Revision as of 17:15, 28 February 2014

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 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 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); dashboard.draw(data);


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]