Google Charts API - Revision history

Craigje at 16:09, 21 May 2015

2015-05-21T16:09:00Z

← Older revision		Revision as of 16:09, 21 May 2015
Line 9:		Line 9:

	==Data==		==Data==
	The [[https://developers.google.com/chart/interactive/docs/reference#DataTable 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 [https://developers.google.com/chart/interactive/docs/reference#DataTable DataTable] class stores data to be used by charts. You can use a single datatable as the data source for multiple charts or dashboards.
	* Data can be added manually via [[https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable functions]], via JSON, via [[https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable arrayToDataTable()]], via [[https://developers.google.com/chart/interactive/docs/datatables_dataviews#query a query]] or via JavaScript literals using [[https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax]].		* Data can be added manually via [https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable functions], via JSON, via [https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable arrayToDataTable()], via [https://developers.google.com/chart/interactive/docs/datatables_dataviews#query a query] or via JavaScript literals using [https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax].

	==Dashboards==		==Dashboards==
	The [[https://developers.google.com/chart/interactive/docs/gallery/controls#using_controls_and_dashboards 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.		The [https://developers.google.com/chart/interactive/docs/gallery/controls#using_controls_and_dashboards 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.

	<code>		<code>
Line 24:		Line 24:

	===Options===		===Options===
	Chart options can be created in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples.		Chart options can be created in multiple ways. Here's [https://developers.google.com/chart/interactive/docs/customizing_charts documentation] and some examples.

	options can be set in the following ways:		options can be set in the following ways:
Line 52:		Line 52:

	==Views==		==Views==
	The [[https://developers.google.com/chart/interactive/docs/reference#DataView DataView]] class changes how a DataTable is represented. It's a wrapper that		The [https://developers.google.com/chart/interactive/docs/reference#DataView DataView] class changes how a DataTable is represented. It's a wrapper that

	==Controls==		==Controls==
	The [[https://developers.google.com/chart/interactive/docs/gallery/controls#gallery 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);".		The [https://developers.google.com/chart/interactive/docs/gallery/controls#gallery 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);".


Line 71:		Line 71:

	* when the Chart's options are incorrect such as		* when the Chart's options are incorrect such as
	# wrong chart type [[https://developers.google.com/chart/interactive/docs/gallery documentation]]		# wrong chart type [https://developers.google.com/chart/interactive/docs/gallery documentation]
	# wrong axis type (discrete/continuous) [[https://developers.google.com/chart/interactive/docs/customizing_axes documentation]]		# wrong axis type (discrete/continuous) [https://developers.google.com/chart/interactive/docs/customizing_axes documentation]

	=Resources=		=Resources=
	==Google==		==Google==
	[[https://developers.google.com/chart/interactive/docs/reference Library Documentation]]		[https://developers.google.com/chart/interactive/docs/reference Library Documentation]

	[[https://code.google.com/apis/ajax/playground/#column_chart Code Playground]]		[https://code.google.com/apis/ajax/playground/#column_chart Code Playground]
	* Here are some good charts to start with.		* Here are some good charts to start with.
	** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart column chart]]		** [https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart column chart]
	** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/table table chart]]		** [https://google-developers.appspot.com/chart/interactive/docs/gallery/table table chart]
	** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart pie chart]]		** [https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart pie chart]
	** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart combo chart]]		** [https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart combo chart]

	==External==		==External==
	[[http://en.wikipedia.org/wiki/Google_Chart_API Wikipedia Overview]]		[http://en.wikipedia.org/wiki/Google_Chart_API Wikipedia Overview]

	==Snippets==		==Snippets==

Ghcrows13: /* External */

2014-03-01T01:29:44Z

External

← Older revision		Revision as of 01:29, 1 March 2014
Line 87:		Line 87:
	==External==		==External==
	[[http://en.wikipedia.org/wiki/Google_Chart_API Wikipedia Overview]]		[[http://en.wikipedia.org/wiki/Google_Chart_API Wikipedia Overview]]

	~~[[https://developers.google.com/chart/interactive/docs/gallery/controls#gallery Discrete vs Continuous timelines]]~~

	==Snippets==		==Snippets==

Ghcrows13: /* Errors */

2014-03-01T01:27:33Z

Errors

← Older revision		Revision as of 01:27, 1 March 2014
Line 68:		Line 68:
	# of incorrect format for that chart type		# of incorrect format for that chart type
	# lacking vital information such as headers		# lacking vital information such as headers
			# has data that's type-inferred incorrectly

	* when the Chart's options are incorrect such as		* when the Chart's options are incorrect such as

Ghcrows13: /* Drawing */

2014-03-01T01:25:07Z

Drawing

← Older revision		Revision as of 01:25, 1 March 2014
Line 46:		Line 46:
	chart.draw(data, options);		chart.draw(data, options);
	</code>		</code>
	* to draw a dashboard, and all of its charts/controls, call the draw function with your datatable <code>dashboard.draw(data);</code>		* to draw a dashboard, and all of its charts/controls, call the draw function with your datatable
			<code>
			dashboard.draw(data);
			</code>

	==Views==		==Views==

Ghcrows13: /* Drawing */

2014-03-01T01:24:46Z

Drawing

← Older revision		Revision as of 01:24, 1 March 2014
Line 46:		Line 46:
	chart.draw(data, options);		chart.draw(data, options);
	</code>		</code>
	* to draw a dashboard, and all of its charts/controls, call the draw function with your datatable		* to draw a dashboard, and all of its charts/controls, call the draw function with your datatable <code>dashboard.draw(data);</code>
	<code>
	dashboard.draw(data);
	</code>

	==Views==		==Views==

Ghcrows13: /* Options */

2014-03-01T01:24:30Z

Options

← Older revision		Revision as of 01:24, 1 March 2014
Line 30:		Line 30:
	** Example:		** Example:
	<code>		<code>
	var options = {		var options = { width: 400,
	width: 400,
	height: 240,		height: 240,
	title: 'Toppings I Like On My Pizza',		title: 'Toppings I Like On My Pizza',

Ghcrows13: /* Options */

2014-03-01T01:23:50Z

Options

← Older revision		Revision as of 01:23, 1 March 2014
Line 26:		Line 26:
	Chart options can be created in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples.		Chart options can be created in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples.

	* options can be set in the following ways:		options can be set in the following ways:
	** at creation by passing JSON as the chart's options parameter		* at creation by passing JSON as the chart's options parameter
	*** Example:		** Example:
	<code>		<code>
	var options = {		var options = {
Line 37:		Line 37:
	};		};
	</code>		</code>
	** chart.setOptions(JSON) which is equivalent to setting options at instantiation		* chart.setOptions(JSON) which is equivalent to setting options at instantiation
	** chart.setOption('key', value) where key is the option being changed		* chart.setOption('key', value) where key is the option being changed
	*** Example:		** Example: <code>chart.setOption('is3D', true);</code>
	<code>		* chart.getOptions() is the read accessor
	chart.setOption('is3D', true);
	</code>
	** chart.getOptions() is the read accessor

	===Drawing===		===Drawing===

Ghcrows13: /* Charts */

2014-03-01T01:23:01Z

Charts

← Older revision		Revision as of 01:23, 1 March 2014
Line 21:		Line 21:

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

	===Options===		===Options===

Ghcrows13 at 01:04, 1 March 2014

2014-03-01T01:04:08Z

← Older revision		Revision as of 01:04, 1 March 2014
Line 21:		Line 21:

	==Charts==		==Charts==
	Charts use options~~. They~~ must have a container <div>, must have a datatable, and must be drawn.		Charts use options, must have a container <div>, must have a datatable, and must be drawn.

	===Options===		===Options===

Ghcrows13 at 00:45, 1 March 2014

2014-03-01T00:45:49Z

← Older revision		Revision as of 00:45, 1 March 2014
Line 1:		Line 1:
	Under construction during Spring 2014.		Under construction during Spring 2014.

	~~=Summary=~~
	=Introduction=		=Introduction=
	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.		* 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.


Line 16:		Line 17:
	<code>		<code>
	var dashboard = new google.visualization.Dashboard(		var dashboard = new google.visualization.Dashboard(
	document.getElementById('dashboard_div'));</code>		document.getElementById('dashboard_div'));
			</code>

	==Charts==		==Charts==
	Charts ~~are~~		Charts use options. They must have a container <div>, must have a datatable, and must be drawn.

	===Options===		===Options===
	Chart options can be ~~set~~ in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples.		Chart options can be created in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples.

	* options can be set in the following ways:		* options can be set in the following ways:
Line 35:		Line 37:
	};		};
	</code>		</code>
	** chart.setOptions(JSON) which is equivalent to setting options at ~~creation~~		** chart.setOptions(JSON) which is equivalent to setting options at instantiation
	** chart.setOption('key', value) where key is the option being changed		** chart.setOption('key', value) where key is the option being changed
	*** Example:		*** Example:
Line 44:		Line 46:

	===Drawing===		===Drawing===
	*draw a chart by using chart.draw(data, options) where data is a datatable and options is JSON		* draw a chart by using chart.draw(data, options) where data is a datatable and options is a JSON string
	<code>		<code>
	chart.draw(data, options);		chart.draw(data, options);
			</code>
			* to draw a dashboard, and all of its charts/controls, call the draw function with your datatable
			<code>
	dashboard.draw(data);		dashboard.draw(data);
	</code>		</code>