Difference between revisions of "Google Charts API"

From Earlham CS Department
Jump to navigation Jump to search
Line 10: Line 10:
 
Chart options can be set in multiple ways:
 
Chart options can be set in multiple ways:
 
* at creation by passing JSON as the chart's options parameter
 
* at creation by passing JSON as the chart's options parameter
* chart.setOptions(JSON) which is equivalent to setting options at creation
 
 
 
** Example:
 
** Example:
 
<code>var options = {
 
<code>var options = {
Line 21: Line 19:
  
 
chart.draw(data, options);</code>
 
chart.draw(data, options);</code>
 +
 +
* chart.setOptions(JSON) which is equivalent to setting options at creation
  
 
* chart.setOption('key', value) where key is the option being changed
 
* chart.setOption('key', value) where key is the option being changed
** Example: <code>chart.setOption('is3D', true);</code>
+
** Example:
 +
<code>
 +
chart.setOption('is3D', true);
 +
</code>
 
* chart.getOptions() is the read accessor
 
* chart.getOptions() is the read accessor
  

Revision as of 03:35, 3 February 2014

Under construction during Spring 2014.

Summary

Introduction

Google Charts are relatively easy to get running but have a lot of nuance to them.

Data

The [DataTable] class stores data to be used by charts.

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

Charts

Chart options can be set in multiple 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.draw(data, options);

  • 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

Views

The [DataView] class changes how a DataTable is represented.

Controls

Resources

Google

[Library Documentation]

[Code Playground]

  • The column chart, combo chart,

External

Snippets