WebCompDev / COMPONENTS

Browse Code »

Commit 331a2265943c55f9ad23e7c35ef4249b00d9a5b8

Authored by Renato De Donato 2015-12-03 15:32:05 +0100

1 parent 0e9aeacd

google-chart

Inline Side-by-side

Showing 14 changed files with 1269 additions and 0 deletions

bower_components/google-chart/.bower.json 0 → 100644

View file @331a226

		1	+{
		2	+ "name": "google-chart",
		3	+ "version": "1.0.4",
		4	+ "description": "Encapsulates Google Charts into a web component",
		5	+ "homepage": "https://googlewebcomponents.github.io/google-chart",
		6	+ "main": "google-chart.html",
		7	+ "authors": [
		8	+ "Sérgio Gomes"
		9	+ ],
		10	+ "license": "Apache2",
		11	+ "ignore": [
		12	+ "/.*",
		13	+ "/test/"
		14	+ ],
		15	+ "keywords": [
		16	+ "web-component",
		17	+ "web-components",
		18	+ "polymer",
		19	+ "chart",
		20	+ "charts",
		21	+ "google-visualization",
		22	+ "google"
		23	+ ],
		24	+ "dependencies": {
		25	+ "polymer": "Polymer/polymer#^1.0.0",
		26	+ "google-apis": "GoogleWebComponents/google-apis#^1.0.0",
		27	+ "iron-ajax": "PolymerElements/iron-ajax#^1.0.0"
		28	+ },
		29	+ "devDependencies": {
		30	+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.2",
		31	+ "web-component-tester": "*"
		32	+ },
		33	+ "_release": "1.0.4",
		34	+ "_resolution": {
		35	+ "type": "version",
		36	+ "tag": "1.0.4",
		37	+ "commit": "eaaaf380c6a769ded22706702151b797fd8f031c"
		38	+ },
		39	+ "_source": "git://github.com/GoogleWebComponents/google-chart.git",
		40	+ "_target": "~1.0.4",
		41	+ "_originalSource": "google-chart",
		42	+ "_direct": true
		43	+}
0	\ No newline at end of file	44	\ No newline at end of file

bower_components/google-chart/LICENSE 0 → 100644

View file @331a226

		1	+Copyright 2014 Google Inc
		2	+
		3	+Licensed under the Apache License, Version 2.0 (the "License");
		4	+you may not use this file except in compliance with the License.
		5	+You may obtain a copy of the License at
		6	+
		7	+ https://www.apache.org/licenses/LICENSE-2.0
		8	+
		9	+Unless required by applicable law or agreed to in writing, software
		10	+distributed under the License is distributed on an "AS IS" BASIS,
		11	+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
		12	+See the License for the specific language governing permissions and
		13	+limitations under the License.

bower_components/google-chart/README.md 0 → 100644

View file @331a226

		1	+google-chart
		2	+============
		3	+
		4	+[Google Charts API](https://developers.google.com/chart/) web components.
		5	+
		6	+See https://elements.polymer-project.org/elements/google-chart

bower_components/google-chart/bower.json 0 → 100644

View file @331a226

		1	+{
		2	+ "name": "google-chart",
		3	+ "version": "1.0.4",
		4	+ "description": "Encapsulates Google Charts into a web component",
		5	+ "homepage": "https://googlewebcomponents.github.io/google-chart",
		6	+ "main": "google-chart.html",
		7	+ "authors": [
		8	+ "Sérgio Gomes"
		9	+ ],
		10	+ "license": "Apache2",
		11	+ "ignore": [
		12	+ "/.*",
		13	+ "/test/"
		14	+ ],
		15	+ "keywords": [
		16	+ "web-component",
		17	+ "web-components",
		18	+ "polymer",
		19	+ "chart",
		20	+ "charts",
		21	+ "google-visualization",
		22	+ "google"
		23	+ ],
		24	+ "dependencies": {
		25	+ "polymer": "Polymer/polymer#^1.0.0",
		26	+ "google-apis": "GoogleWebComponents/google-apis#^1.0.0",
		27	+ "iron-ajax": "PolymerElements/iron-ajax#^1.0.0"
		28	+ },
		29	+ "devDependencies": {
		30	+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.2",
		31	+ "web-component-tester": "*"
		32	+ }
		33	+}

bower_components/google-chart/demo/chart-data.json 0 → 100644

View file @331a226

		1	+[["Bar", "Height", { "role": "style" } ], ["Bar 1", 10, "color: gray"], ["Bar 2", 14, "color: #76A7FA"], ["Bar 3", 16, "opacity: 0.2"], ["Bar 4", 22, "stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF"],["Bar 5", 28, "stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2"]]
0	\ No newline at end of file	2	\ No newline at end of file

bower_components/google-chart/demo/country-data.json 0 → 100644

View file @331a226

		1	+{
		2	+ "cols": [
		3	+ {
		4	+ "id": "ga:country",
		5	+ "label": "Country",
		6	+ "type": "string"
		7	+ },
		8	+ {
		9	+ "id": "ga:sessions",
		10	+ "label": "Sessions",
		11	+ "type": "number"
		12	+ }
		13	+ ],
		14	+ "rows": [
		15	+ {
		16	+ "c": [
		17	+ {
		18	+ "v": "United States"
		19	+ },
		20	+ {
		21	+ "v": 24748
		22	+ }
		23	+ ]
		24	+ },
		25	+ {
		26	+ "c": [
		27	+ {
		28	+ "v": "Canada"
		29	+ },
		30	+ {
		31	+ "v": 15232
		32	+ }
		33	+ ]
		34	+ },
		35	+ {
		36	+ "c": [
		37	+ {
		38	+ "v": "India"
		39	+ },
		40	+ {
		41	+ "v": 9100
		42	+ }
		43	+ ]
		44	+ },
		45	+ {
		46	+ "c": [
		47	+ {
		48	+ "v": "Japan"
		49	+ },
		50	+ {
		51	+ "v": 4845
		52	+ }
		53	+ ]
		54	+ },
		55	+ {
		56	+ "c": [
		57	+ {
		58	+ "v": "United Kingdom"
		59	+ },
		60	+ {
		61	+ "v": 2768
		62	+ }
		63	+ ]
		64	+ }
		65	+ ]
		66	+}
0	\ No newline at end of file	67	\ No newline at end of file

bower_components/google-chart/demo/index.html 0 → 100644

View file @331a226

		1	+<!doctype html>
		2	+<!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
		3	+<html>
		4	+<head>
		5	+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
		6	+ <title>google-chart Demo</title>
		7	+
		8	+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
		9	+ <link rel="import" href="../google-chart.html">
		10	+ <style>
		11	+ code {
		12	+ color: #007000;
		13	+ }
		14	+
		15	+ google-chart {
		16	+ height: 300px;
		17	+ width: 400px;
		18	+ }
		19	+
		20	+ #selection-demo {
		21	+ position: relative;
		22	+ height: 300px;
		23	+ }
		24	+
		25	+ #selection-chart {
		26	+ float: left;
		27	+ }
		28	+
		29	+ #selection-display {
		30	+ display: inline-block;
		31	+ position: relative;
		32	+ top: 50%;
		33	+ }
		34	+ </style>
		35	+
		36	+</head>
		37	+<body>
		38	+
		39	+ <p>A simple <code>google-chart</code> looks like this:</p>
		40	+
		41	+ <google-chart
		42	+ cols='[{"label": "Data", "type": "string"},{"label": "Value", "type": "number"}]'
		43	+ rows='[["Something", 1]]'>
		44	+ </google-chart>
		45	+
		46	+ <p>Charts can be resized with CSS, but you'll need to call the <code>drawChart</code> method when the size changes.</p>
		47	+ <p>Here's a basic responsive example using only CSS and JS. You could also use <code><iron-media-query></code>.</p>
		48	+
		49	+ <style>
		50	+ /* Phone and tablet */
		51	+ #resizing_chart {
		52	+ height: 300px;
		53	+ width: 400px;
		54	+ }
		55	+
		56	+ /* Desktop */
		57	+ @media screen and (min-width: 1024px) {
		58	+ #resizing_chart {
		59	+ width: 800px;
		60	+ }
		61	+ }
		62	+ </style>
		63	+
		64	+ <script>
		65	+ var media = window.matchMedia('(min-width: 1024px)');
		66	+
		67	+ media.addListener(function() {
		68	+ document.getElementById('resizing_chart').drawChart();
		69	+ });
		70	+ </script>
		71	+
		72	+ <google-chart
		73	+ id='resizing_chart'
		74	+ type='column'
		75	+ options='{"title": "Responsive chart",
		76	+ "vAxis": {"minValue" : 0, "maxValue": 10}}'
		77	+ cols='[{"label": "Data", "type": "string"},{"label": "Value", "type": "number"}]'
		78	+ rows='[["Col1", 5.0],["Col2", 5.0],["Col3", 5.0]]'>
		79	+ </google-chart>
		80	+
		81	+ <p>Here's a chart that changes data every 3 seconds:</p>
		82	+
		83	+ <google-chart
		84	+ id='mutating_chart'
		85	+ type='column'
		86	+ options='{"title": "Random data",
		87	+ "vAxis": {"minValue" : 0, "maxValue": 10},
		88	+ "animation": {"duration": "1000"}}'
		89	+ cols='[{"label": "Data", "type": "string"},{"label": "Value", "type": "number"}]'
		90	+ rows='[["Col1", 5.0],["Col2", 5.0],["Col3", 5.0]]'>
		91	+ </google-chart>
		92	+
		93	+ <script>
		94	+ function getRandomValue() {
		95	+ return Math.random() * 10;
		96	+ }
		97	+
		98	+ window.setInterval(function() {
		99	+ var chart = document.getElementById('mutating_chart');
		100	+
		101	+ chart.rows = [["Col1", getRandomValue()],
		102	+ ["Col2", getRandomValue()],
		103	+ ["Col3", getRandomValue()]];
		104	+ }, 3000);
		105	+ </script>
		106	+
		107	+ <p>Here's a pie chart with an area selection:</p>
		108	+
		109	+ <div id="selection-demo">
		110	+ <google-chart
		111	+ type="pie"
		112	+ id="selection-chart"
		113	+ options='{"title": "Distribution of days in 2001H1"}'
		114	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		115	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		116	+ </google-chart>
		117	+ <div id="selection-display">
		118	+ Selected row: <span id="selection-label">None</span>.
		119	+ </div>
		120	+ </div>
		121	+
		122	+ <script>
		123	+ document.addEventListener('WebComponentsReady', function() {
		124	+ var chart = document.querySelector('#selection-chart');
		125	+ var label = document.querySelector('#selection-label');
		126	+
		127	+ chart.addEventListener('google-chart-render', function() {
		128	+ chart.selection = [{row: 1, column: null}];
		129	+ label.textContent = chart.selection[0].row;
		130	+ });
		131	+
		132	+ document.addEventListener('google-chart-select', function(e) {
		133	+ label.textContent =
		134	+ chart.selection[0] ? chart.selection[0].row : 'None';
		135	+ });
		136	+ });
		137	+ </script>
		138	+
		139	+ <p>Here's a chart defined using <code>data</code>, rather than <code>rows</code> and <code>cols</code>:</p>
		140	+
		141	+ <google-chart
		142	+ type='column'
		143	+ options='{"title": "Inventory"}'
		144	+ data='[["Year", "Things", "Stuff"],
		145	+ ["2004", 1000, 400],
		146	+ ["2005", 1170, 460],
		147	+ ["2006", 660, 1120],
		148	+ ["2007", 1030, 540]]'>
		149	+ </google-chart>
		150	+
		151	+ <p>And one with some pretty complicated styling, where the data is loaded from an external JSON resource using the <code>data</code> attribute:</p>
		152	+
		153	+ <google-chart
		154	+ type='column'
		155	+ options='{"title": "Bar height", "legend": "none"}'
		156	+ data='chart-data.json'>
		157	+ </google-chart>
		158	+
		159	+ <p>Website traffic data by country from an external JSON resource where the data is in raw DataTable format.</p>
		160	+
		161	+ <google-chart
		162	+ type='column'
		163	+ options='{"title": "Visitors by Country", "legend": "none"}'
		164	+ data='country-data.json'>
		165	+ </google-chart>
		166	+
		167	+ <h2>Chart gallery</h2>
		168	+
		169	+ <p>Here's an area chart:</p>
		170	+
		171	+ <google-chart
		172	+ type='area'
		173	+ options='{"title": "Days in a month"}'
		174	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		175	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		176	+ </google-chart>
		177	+
		178	+ <p>Here's a bar chart:</p>
		179	+
		180	+ <google-chart
		181	+ type='bar'
		182	+ options='{"title": "Days in a month"}'
		183	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		184	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		185	+ </google-chart>
		186	+
		187	+ <p>Here's a bubble chart:</p>
		188	+
		189	+ <google-chart
		190	+ type='bubble'
		191	+ options='{}'
		192	+ data='[["ID", "Life Expectancy", "Fertility Rate", "Region", "Population"],
		193	+ ["CAN", 80.66, 1.67, "North America", 33739900],
		194	+ ["DEU", 79.84, 1.36, "Europe", 81902307],
		195	+ ["DNK", 78.6, 1.84, "Europe", 5523095],
		196	+ ["EGY", 72.73, 2.78, "Middle East", 79716203],
		197	+ ["GBR", 80.05, 2, "Europe", 61801570],
		198	+ ["IRN", 72.49, 1.7, "Middle East", 73137148],
		199	+ ["IRQ", 68.09, 4.77, "Middle East", 31090763],
		200	+ ["ISR", 81.55, 2.96, "Middle East", 7485600],
		201	+ ["RUS", 68.6, 1.54, "Europe", 141850000],
		202	+ ["USA", 78.09, 2.05, "North America", 307007000]]'>
		203	+ </google-chart>
		204	+
		205	+ <p>Here's a candlestick chart:</p>
		206	+
		207	+ <google-chart
		208	+ type='candlestick'
		209	+ options='{"legend": "none"}'
		210	+ data='[["Day", "low", "start", "end", "high"],
		211	+ ["Mon", 20, 28, 38, 45],
		212	+ ["Tue", 31, 38, 55, 66],
		213	+ ["Wed", 50, 55, 77, 80],
		214	+ ["Thu", 77, 77, 66, 50],
		215	+ ["Fri", 68, 66, 22, 15]]'>
		216	+ </google-chart>
		217	+
		218	+ <p>Here's a column chart:</p>
		219	+
		220	+ <google-chart
		221	+ type='column'
		222	+ options='{"title": "Days in a month"}'
		223	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		224	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		225	+ </google-chart>
		226	+
		227	+ <p>Here's a combo chart:</p>
		228	+
		229	+ <google-chart
		230	+ type='combo'
		231	+ options='{"seriesType": "bars", "series": {"2": {"type": "line"}}}'
		232	+ data='[["Day", "A", "B", "C"],
		233	+ ["Mon", 20, 45, 28],
		234	+ ["Tue", 31, 66, 38],
		235	+ ["Wed", 50, 80, 55],
		236	+ ["Thu", 77, 50, 77],
		237	+ ["Fri", 68, 15, 66]]'>
		238	+ </google-chart>
		239	+
		240	+ <p>Here's a geo chart:</p>
		241	+
		242	+ <google-chart
		243	+ type='geo'
		244	+ data='[["Country", "Popularity"],
		245	+ ["Germany", 200],
		246	+ ["United States", 300],
		247	+ ["Brazil", 400],
		248	+ ["Canada", 500],
		249	+ ["France", 600],
		250	+ ["RU", 700]]'>
		251	+ </google-chart>
		252	+
		253	+ <p>Here's a histogram:</p>
		254	+
		255	+ <google-chart
		256	+ type='histogram'
		257	+ options='{"title": "Days in a month", "legend": "none", "histogram": { "bucketSize": 1 }}'
		258	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		259	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		260	+ </google-chart>
		261	+
		262	+ <p>Here's a line chart:</p>
		263	+
		264	+ <google-chart
		265	+ id='line_chart'
		266	+ type='line'
		267	+ options='{"title": "Days in a month"}'
		268	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		269	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		270	+ </google-chart>
		271	+
		272	+ <p>Here's a pie chart:</p>
		273	+
		274	+ <google-chart
		275	+ type='pie'
		276	+ options='{"title": "Distribution of days in 2001H1"}'
		277	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		278	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		279	+ </google-chart>
		280	+
		281	+ <p>Here's a scatter chart:</p>
		282	+
		283	+ <google-chart
		284	+ type='scatter'
		285	+ options='{"legend": "none"}'
		286	+ data='[["A", "B"],
		287	+ [20, 45],
		288	+ [31, 66],
		289	+ [50, 80],
		290	+ [77, 50],
		291	+ [68, 15]]'>
		292	+ </google-chart>
		293	+
		294	+ <p>Here's a stepped area chart:</p>
		295	+
		296	+ <google-chart
		297	+ type='stepped-area'
		298	+ options='{"title": "Days in a month"}'
		299	+ cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
		300	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
		301	+ </google-chart>
		302	+
		303	+ <p>Here's a table chart:</p>
		304	+
		305	+ <google-chart
		306	+ type="table"
		307	+ options='{"title": "Inventory"}'
		308	+ data='[["Year", "Things", "Stuff"],
		309	+ ["2004", 1000, 400],
		310	+ ["2005", 1170, 460],
		311	+ ["2006", 660, 1120],
		312	+ ["2007", 1030, 540]]'>
		313	+ </google-chart>
		314	+
		315	+ <p>Here are three gauges:</p>
		316	+
		317	+ <google-chart
		318	+ type='gauge'
		319	+ data='[["Label", "Value"],["Memory", 80],["CPU", 55],["Network", 68]]'
		320	+ options='{"width": 400,
		321	+ "height": 120,
		322	+ "redFrom": 90,
		323	+ "redTo": 100,
		324	+ "yellowFrom":75,
		325	+ "yellowTo": 90,
		326	+ "minorTicks": 5}'>
		327	+ </google-chart>
		328	+
		329	+ <p>Here are three gauges with random data that change every three seconds:</p>
		330	+
		331	+ <google-chart
		332	+ id="mutating_gauge"
		333	+ type="gauge"
		334	+ data='[["Label", "Value"],["Memory", 80],["CPU", 55],["Network", 68]]'
		335	+ options='{"width": 400,
		336	+ "height": 120,
		337	+ "redFrom": 90,
		338	+ "redTo": 100,
		339	+ "yellowFrom": 75,
		340	+ "yellowTo": 90,
		341	+ "minorTicks": 5}'>
		342	+ </google-chart>
		343	+
		344	+ <script>
		345	+ function getRandomGaugeValue(offset, factor) {
		346	+ return offset + Math.round(factor * Math.random());
		347	+ }
		348	+
		349	+ window.setInterval(function() {
		350	+ var gauge = document.getElementById('mutating_gauge');
		351	+
		352	+ gauge.data = [["Label", "Value"],["Memory", getRandomGaugeValue(40, 60)],["CPU", getRandomGaugeValue(40, 60)],["Network", getRandomGaugeValue(60, 20)]];
		353	+
		354	+ }, 3000);
		355	+ </script>
		356	+
		357	+ <p>Here's a treemap:</p>
		358	+
		359	+ <google-chart
		360	+ type="treemap"
		361	+ options='{"showScale": true, "maxPostDepth": 2}'
		362	+ data='[["Location", "Parent", "Value"],
		363	+ ["Global", null, 0],
		364	+ ["America", "Global", 0],
		365	+ ["Europe", "Global", 0],
		366	+ ["Asia", "Global", 0],
		367	+ ["Australia", "Global", 0],
		368	+ ["Africa", "Global", 0],
		369	+ ["Brazil", "America", 11],
		370	+ ["USA", "America", 52],
		371	+ ["Mexico", "America", 24],
		372	+ ["Canada", "America", 16],
		373	+ ["France", "Europe", 42],
		374	+ ["Germany", "Europe", 31],
		375	+ ["Sweden", "Europe", 22],
		376	+ ["Italy", "Europe", 17],
		377	+ ["UK", "Europe", 21],
		378	+ ["China", "Asia", 36],
		379	+ ["Japan", "Asia", 20],
		380	+ ["India", "Asia", 40],
		381	+ ["Laos", "Asia", 4],
		382	+ ["Mongolia", "Asia", 1],
		383	+ ["Israel", "Asia", 12],
		384	+ ["Iran", "Asia", 18],
		385	+ ["Pakistan", "Asia", 11],
		386	+ ["Egypt", "Africa", 21],
		387	+ ["S. Africa", "Africa", 30],
		388	+ ["Sudan", "Africa", 12],
		389	+ ["Congo", "Africa", 10],
		390	+ ["Zaire", "Africa", 8]]'>
		391	+ </google-chart>
		392	+
		393	+ <p>Here's an image of the line chart:</p>
		394	+
		395	+ <div id='line_chart_div'></div>
		396	+
		397	+ <script>
		398	+ document.addEventListener('WebComponentsReady', function() {
		399	+ var chart_div = document.querySelector('#line_chart_div');
		400	+ var chart = document.querySelector('#line_chart');
		401	+
		402	+ chart.addEventListener('google-chart-render', function() {
		403	+ chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
		404	+ });
		405	+
		406	+ });
		407	+ </script>
		408	+
		409	+</body>
		410	+</html>

bower_components/google-chart/google-chart.css 0 → 100644

View file @331a226

		1	+:host {
		2	+ display: -webkit-flex;
		3	+ display: -ms-flex;
		4	+ display: flex;
		5	+ margin: 0;
		6	+ padding: 0;
		7	+ width: 400px;
		8	+ height: 300px;
		9	+}
		10	+
		11	+:host([type="gauge"]) {
		12	+ width: 300px;
		13	+ height: 300px;
		14	+}
		15	+
		16	+#chartdiv {
		17	+ width: 100%;
		18	+}

bower_components/google-chart/google-chart.html 0 → 100644

View file @331a226

		1	+<link rel="import" href="../polymer/polymer.html">
		2	+<link rel="import" href="../iron-ajax/iron-ajax.html">
		3	+<link rel="import" href="../google-apis/google-legacy-loader.html">
		4	+
		5	+<!--
		6	+`google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
		7	+data. From simple line charts to complex hierarchical tree maps, the chart element provides a
		8	+number of ready-to-use chart types.
		9	+
		10	+ <google-chart
		11	+ type='pie'
		12	+ options='{"title": "Distribution of days in 2001Q1"}'
		13	+ cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
		14	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
		15	+ </google-chart>
		16	+
		17	+Height and width are specified as style attributes:
		18	+
		19	+ google-chart {
		20	+ height: 300px;
		21	+ width: 50em;
		22	+ }
		23	+
		24	+Data can be provided in one of three ways:
		25	+
		26	+- Via the `cols` and `rows` attributes:
		27	+
		28	+ cols='[{"label":"Mth", "type":"string"}, {"label":"Days", "type":"number"}]'
		29	+ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
		30	+
		31	+- Via the `data` attribute, passing in the data directly:
		32	+
		33	+ data='[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]'
		34	+
		35	+- Via the `data` attribute, passing in the URL to a resource containing the
		36	+ data, in JSON format:
		37	+
		38	+ data='http://example.com/chart-data.json'
		39	+@demo
		40	+-->
		41	+<dom-module id="google-chart">
		42	+ <link rel="import" type="css" href="google-chart.css">
		43	+ <template>
		44	+ <iron-ajax id="ajax" handle-as="json" url="{{data}}"
		45	+ on-response="_externalDataLoaded"></iron-ajax>
		46	+ <div id="chartdiv"></div>
		47	+ <google-legacy-loader on-api-load="_readyForAction"></google-legacy-loader>
		48	+ </template>
		49	+</dom-module>
		50	+
		51	+<script>
		52	+(function() {
		53	+ "use strict";
		54	+
		55	+ Polymer({
		56	+
		57	+ is: 'google-chart',
		58	+
		59	+ /**
		60	+ * Fired when the graph is displayed.
		61	+ *
		62	+ * @event google-chart-render
		63	+ */
		64	+
		65	+ /**
		66	+ * Fired when the user makes a selection in the chart.
		67	+ *
		68	+ * @event google-chart-select
		69	+ * @param {object} detail
		70	+ * @param {array} detail.selection The user-defined selection.
		71	+ */
		72	+
		73	+ properties: {
		74	+ /**
		75	+ * Sets the type of the chart.
		76	+ *
		77	+ * Should be one of:
		78	+ * - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`,
		79	+ * `histogram`, `line`, `pie`, `scatter`, `stepped-area`, `treemap`
		80	+ *
		81	+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details.
		82	+ *
		83	+ */
		84	+ type: {
		85	+ type: String,
		86	+ value: 'column',
		87	+ observer: '_typeChanged'
		88	+ },
		89	+
		90	+ /**
		91	+ * Sets the options for the chart.
		92	+ *
		93	+ * Example:
		94	+ * <pre>{
		95	+ * title: "Chart title goes here",
		96	+ * hAxis: {title: "Categories"},
		97	+ * vAxis: {title: "Values", minValue: 0, maxValue: 2},
		98	+ * legend: "none"
		99	+ * };</pre>
		100	+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a>
		101	+ * for the options available to each chart type.
		102	+ *
		103	+ */
		104	+ options: {
		105	+ type: Object,
		106	+ value: function() { return {}; }
		107	+ },
		108	+
		109	+ /**
		110	+ * Sets the data columns for this object.
		111	+ *
		112	+ * When specifying data with `cols` you must also specify `rows`, and
		113	+ * not specify `data`.
		114	+ *
		115	+ * Example:
		116	+ * <pre>[{label: "Categories", type: "string"},
		117	+ * {label: "Value", type: "number"}]</pre>
		118	+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable_addColumn">Google Visualization API reference (addColumn)</a>
		119	+ * for column definition format.
		120	+ *
		121	+ * @attribute cols
		122	+ * @type array
		123	+ */
		124	+ cols: {
		125	+ type: Array,
		126	+ value: function() { return []; }
		127	+ },
		128	+ /**
		129	+ * Sets the data rows for this object.
		130	+ *
		131	+ * When specifying data with `rows` you must also specify `cols`, and
		132	+ * not specify `data`.
		133	+ *
		134	+ * Example:
		135	+ * <pre>[["Category 1", 1.0],
		136	+ * ["Category 2", 1.1]]</pre>
		137	+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#addrow">Google Visualization API reference (addRow)</a>
		138	+ * for row format.
		139	+ *
		140	+ * @attribute rows
		141	+ * @type array
		142	+ */
		143	+ rows: {
		144	+ type: Array,
		145	+ value: function() { return []; }
		146	+ },
		147	+
		148	+ /**
		149	+ * Sets the entire dataset for this object.
		150	+ * Can be used to provide the data directly, or to provide a URL from
		151	+ * which to request the data.
		152	+ *
		153	+ * The data format can be a two-dimensional array or the DataTable format
		154	+ * expected by Google Charts.
		155	+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable">Google Visualization API reference (DataTable constructor)</a>
		156	+ * for data table format details.
		157	+ *
		158	+ * When specifying data with `data` you must not specify `cols` or `rows`.
		159	+ *
		160	+ * Example:
		161	+ * <pre>[["Categories", "Value"],
		162	+ * ["Category 1", 1.0],
		163	+ * ["Category 2", 1.1]]</pre>
		164	+ *
		165	+ * @attribute data
		166	+ * @type array, object, or string
		167	+ */
		168	+ data: {
		169	+ type: Object, // or array, or object
		170	+ value: function() { return []; }
		171	+ },
		172	+
		173	+ /**
		174	+ * Selected datapoint(s) in the map.
		175	+ *
		176	+ * An array of objects, each with a numeric row and/or column property.
		177	+ * `row` and `column` are the zero-based row or column number of an item
		178	+ * in the data table to select.
		179	+ *
		180	+ * To select a whole column, set row to null;
		181	+ * to select a whole row, set column to null.
		182	+ *
		183	+ * Example:
		184	+ * <pre>
		185	+ * [{row:0,column:1}, {row:1, column:null}]
		186	+ * </pre>
		187	+ *
		188	+ * @attribute selection
		189	+ * @type array
		190	+ */
		191	+ selection: {
		192	+ type: Array,
		193	+ value: function() { return []; },
		194	+ observer: '_selectionChanged'
		195	+ },
		196	+ },
		197	+
		198	+ observers: [
		199	+ '_loadData(rows, cols, data)'
		200	+ ],
		201	+
		202	+ _packages: null,
		203	+
		204	+ _chartObject: null,
		205	+
		206	+ _isReady: false,
		207	+
		208	+ _canDraw: false,
		209	+
		210	+ _dataTable: null,
		211	+
		212	+ _chartTypes: null,
		213	+
		214	+ _readyForAction: function(e, detail, sender) {
		215	+ this._loadPackageByChartType();
		216	+
		217	+ google.load("visualization", "1", {
		218	+ packages: this._packages[this.type],
		219	+ callback: function() {
		220	+ this._isReady = true;
		221	+ this._loadChartTypes();
		222	+ this._loadData();
		223	+ }.bind(this)
		224	+ });
		225	+ },
		226	+
		227	+ _typeChanged: function() {
		228	+ // Invalidate current chart object.
		229	+ this._chartObject = null;
		230	+ this._loadData();
		231	+ },
		232	+
		233	+ _selectionChanged: function() {
		234	+ if (this._chartObject && this.setSelection) {
		235	+ this._chartObject.setSelection(this.selection);
		236	+ }
		237	+ },
		238	+
		239	+ /**
		240	+ * Draws the chart.
		241	+ *
		242	+ * Called automatically on first load and whenever one of the attributes
		243	+ * changes. Can be called manually to handle e.g. page resizes.
		244	+ *
		245	+ * @method drawChart
		246	+ * @return {Object} Returns null.
		247	+ */
		248	+ drawChart: function() {
		249	+ if (this._canDraw) {
		250	+ if (!this.options) {
		251	+ this.options = {};
		252	+ }
		253	+ if (!this._chartObject) {
		254	+ var chartClass = this._chartTypes[this.type];
		255	+ if (chartClass) {
		256	+ this._chartObject = new chartClass(this.$.chartdiv);
		257	+ }
		258	+ }
		259	+ if (this._chartObject) {
		260	+ google.visualization.events.addOneTimeListener(this._chartObject,
		261	+ 'ready', function() {
		262	+ this.fire('google-chart-render');
		263	+ }.bind(this));
		264	+
		265	+ google.visualization.events.addListener(this._chartObject,
		266	+ 'select', function() {
		267	+ this.selection = this._chartObject.getSelection();
		268	+ this.fire('google-chart-select',
		269	+ { selection: this._chartObject.getSelection() });
		270	+ }.bind(this));
		271	+
		272	+
		273	+ this._chartObject.draw(this._dataTable, this.options);
		274	+
		275	+ if (this._chartObject.setSelection){
		276	+ this._chartObject.setSelection(this.selection);
		277	+ }
		278	+ } else {
		279	+ this.$.chartdiv.innerHTML = 'Undefined chart type';
		280	+ }
		281	+ }
		282	+ return null;
		283	+ },
		284	+
		285	+ /**
		286	+ * Returns the chart serialized as an image URI.
		287	+ *
		288	+ * Call this after the chart is drawn (google-chart-render event).
		289	+ *
		290	+ * @return {string} Returns image URI.
		291	+ */
		292	+ getImageURI: function() {
		293	+ return this._chartObject.getImageURI();
		294	+ },
		295	+
		296	+ _loadChartTypes: function() {
		297	+ this._chartTypes = {
		298	+ 'area': google.visualization.AreaChart,
		299	+ 'bar': google.visualization.BarChart,
		300	+ 'bubble': google.visualization.BubbleChart,
		301	+ 'candlestick': google.visualization.CandlestickChart,
		302	+ 'column': google.visualization.ColumnChart,
		303	+ 'combo': google.visualization.ComboChart,
		304	+ 'geo': google.visualization.GeoChart,
		305	+ 'histogram': google.visualization.Histogram,
		306	+ 'line': google.visualization.LineChart,
		307	+ 'pie': google.visualization.PieChart,
		308	+ 'scatter': google.visualization.ScatterChart,
		309	+ 'stepped-area': google.visualization.SteppedAreaChart,
		310	+ 'table': google.visualization.Table,
		311	+ 'gauge': google.visualization.Gauge,
		312	+ 'treemap': google.visualization.TreeMap
		313	+ };
		314	+ },
		315	+
		316	+ _loadPackageByChartType: function() {
		317	+ this._packages = {
		318	+ 'area': 'corechart',
		319	+ 'bar': 'corechart',
		320	+ 'bubble': 'corechart',
		321	+ 'candlestick': 'corechart',
		322	+ 'column': 'corechart',
		323	+ 'combo': 'corechart',
		324	+ 'geo': 'corechart',
		325	+ 'histogram': 'corechart',
		326	+ 'line': 'corechart',
		327	+ 'pie': 'corechart',
		328	+ 'scatter': 'corechart',
		329	+ 'stepped-area': 'corechart',
		330	+ 'table': 'table',
		331	+ 'gauge': 'gauge',
		332	+ 'treemap': 'treemap'
		333	+ };
		334	+ },
		335	+
		336	+ _loadData: function() {
		337	+ this._canDraw = false;
		338	+ if (this._isReady) {
		339	+ if (typeof this.data == 'string' \|\| this.data instanceof String) {
		340	+ // Load data asynchronously, from external URL.
		341	+ this.$.ajax.generateRequest();
		342	+ } else {
		343	+ var dataTable = this._createDataTable();
		344	+ this._canDraw = true;
		345	+ if (dataTable) {
		346	+ this._dataTable = dataTable;
		347	+ this.drawChart();
		348	+ }
		349	+ }
		350	+ }
		351	+ },
		352	+
		353	+ _externalDataLoaded: function(e) {
		354	+ var dataTable = this._createDataTable(e.detail.response);
		355	+ this._canDraw = true;
		356	+ this._dataTable = dataTable;
		357	+ this.drawChart();
		358	+ },
		359	+
		360	+ _createDataTable: function(data) {
		361	+ var dataTable = null;
		362	+
		363	+ // If a data object was not passed to this function, default to the
		364	+ // chart's data attribute. Passing a data object is necessary for
		365	+ // cases when the data attribute is a URL pointing to an external
		366	+ // data source.
		367	+ if (!data) {
		368	+ data = this.data;
		369	+ }
		370	+ if (!data)
		371	+ data = [];
		372	+
		373	+ if (this.rows && this.rows.length > 0 && this.cols &&
		374	+ this.cols.length > 0) {
		375	+ // Create the data table from cols and rows.
		376	+ dataTable = new google.visualization.DataTable();
		377	+ dataTable.cols = this.cols;
		378	+
		379	+ for (var i = 0; i < this.cols.length; i++) {
		380	+ dataTable.addColumn(this.cols[i]);
		381	+ }
		382	+
		383	+ dataTable.addRows(this.rows);
		384	+ } else {
		385	+ // Create dataTable from the passed data or the data attribute.
		386	+ // Data can be in the form of raw DataTable data or a two
		387	+ // dimensional array.
		388	+ if (data.rows && data.cols) {
		389	+ dataTable = new google.visualization.DataTable(data);
		390	+ } else if (data.length > 0) {
		391	+ dataTable = google.visualization.arrayToDataTable(data);
		392	+ }
		393	+ }
		394	+
		395	+ return dataTable;
		396	+ }
		397	+ });
		398	+})();
		399	+</script>

bower_components/google-chart/index.html 0 → 100644

View file @331a226

		1	+<!doctype html>
		2	+<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
		3	+<html>
		4	+<head>
		5	+
		6	+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
		7	+ <link rel="import" href="../iron-component-page/iron-component-page.html">
		8	+
		9	+</head>
		10	+<body>
		11	+
		12	+ <iron-component-page></iron-component-page>
		13	+
		14	+</body>
		15	+</html>

datalets/google_piechart-datalet/demo/index.html 0 → 100644

View file @331a226

		1	+<!DOCTYPE html>
		2	+<html lang="en">
		3	+<head>
		4	+ <meta charset="UTF-8">
		5	+</head>
		6	+<body>
		7	+
		8	+ <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
		9	+
		10	+ <link rel="import" href="../google_piechart-datalet.html" />
		11	+
		12	+ <style>
		13	+ #google_piechart_container{
		14	+ height: 400px;
		15	+ width: 1000px;
		16	+ }
		17	+ </style>
		18	+
		19	+ <div id="google_piechart_container">
		20	+
		21	+ <google_piechart-datalet id="pie" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5"
		22	+ fields='["result,records,Location","result,records,_id"]'></google_piechart-datalet>
		23	+
		24	+ <button onclick="_3D()">3D!</button>
		25	+ <button onclick="_pieHole()">pie hole!</button>
		26	+ <button onclick="_title()">Sbiricuda!</button>
		27	+
		28	+ </div>
		29	+
		30	+ <script>
		31	+ function _3D() {
		32	+ $("#pie")[0].is3D = !$("#pie")[0].is3D;
		33	+ }
		34	+ function _pieHole() {
		35	+ $("#pie")[0].is3D = false;
		36	+ $("#pie")[0].pieHole = ($("#pie")[0].pieHole + 0.5) % 1;
		37	+ }
		38	+ function _title() {
		39	+ $("#pie")[0]._title = $("#pie")[0]._title + "sbiricuda... ";
		40	+ }
		41	+ </script>
		42	+
		43	+</body>
		44	+</html>
		45	+

datalets/google_piechart-datalet/google_piechart-datalet.html 0 → 100644

View file @331a226

		1	+<!--
		2	+@license
		3	+ The MIT License (MIT)
		4	+
		5	+ Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
		6	+
		7	+ Permission is hereby granted, free of charge, to any person obtaining a copy
		8	+ of this software and associated documentation files (the "Software"), to deal
		9	+ in the Software without restriction, including without limitation the rights
		10	+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
		11	+ copies of the Software, and to permit persons to whom the Software is
		12	+ furnished to do so, subject to the following conditions:
		13	+
		14	+ The above copyright notice and this permission notice shall be included in
		15	+ all copies or substantial portions of the Software.
		16	+
		17	+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
		18	+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
		19	+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
		20	+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
		21	+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
		22	+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
		23	+ THE SOFTWARE.
		24	+-->
		25	+
		26	+<!--
		27	+* Developed by :
		28	+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
		29	+*
		30	+-->
		31	+<link rel="import" href="../../bower_components/polymer/polymer.html">
		32	+
		33	+<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
		34	+
		35	+<link rel="import" href="../../bower_components/google-chart/google-chart.html"/>
		36	+
		37	+<dom-module id="google_piechart-datalet">
		38	+
		39	+ <template>
		40	+
		41	+ <style is="custom-style">
		42	+ #google_piechart{
		43	+ height: 100%;
		44	+ width: 100%;
		45	+ }
		46	+ </style>
		47	+
		48	+ <google-chart
		49	+ id='google_piechart'
		50	+ type='pie'
		51	+ cols={{cols}}
		52	+ rows={{rows}}
		53	+ options={{options}}>
		54	+ </google-chart>
		55	+
		56	+ <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
		57	+
		58	+ </template>
		59	+
		60	+ <script>
		61	+
		62	+ var GooglePiechartBehavior = {
		63	+
		64	+ presentData : function(){
		65	+ var cols = [{"label": this.data[0].name, "type": "string"}, {"label": this.data[1].name, "type": "number"}];
		66	+
		67	+ var rows = [];
		68	+ for(var i=0; i<this.data[0].data.length; i++)
		69	+ {
		70	+ var row = [this.data[0].data[i], this.data[1].data[i]];
		71	+ rows.push(row);
		72	+ }
		73	+
		74	+ var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
		75	+
		76	+ this._component.cols = cols;
		77	+ this._component.rows = rows;
		78	+ this._component.options = options;
		79	+ },
		80	+
		81	+ _updateOptions : function(){
		82	+ var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
		83	+ this._component.options = options;
		84	+ this._component.$.google_piechart.drawChart();
		85	+ }
		86	+
		87	+ };
		88	+
		89	+
		90	+ PiechartDatalet = Polymer({
		91	+ is: 'google_piechart-datalet',
		92	+
		93	+ properties: {
		94	+
		95	+ behavior : {
		96	+ type : Object,
		97	+ value : undefined
		98	+ },
		99	+
		100	+ //inputs
		101	+
		102	+ cols: {
		103	+ type: Array,
		104	+ value:undefined
		105	+ },
		106	+
		107	+ rows: {
		108	+ type: Array,
		109	+ value: undefined
		110	+ },
		111	+
		112	+ //options
		113	+
		114	+ options: {
		115	+ type: Object,
		116	+ value: undefined
		117	+ },
		118	+
		119	+ _title: {//_?
		120	+ type: String,
		121	+ value: ""
		122	+ },
		123	+
		124	+ is3D: {
		125	+ type: Boolean,
		126	+ value: false
		127	+ },
		128	+
		129	+ pieHole: {
		130	+ type: Number,
		131	+ value: 0
		132	+ },
		133	+
		134	+ sliceVisibilityThreshold: {
		135	+ type: Number,
		136	+ value: 1/20
		137	+ }
		138	+ },
		139	+
		140	+ observers: [
		141	+ '_updateOptions(_title, is3D, pieHole)'
		142	+ ],
		143	+
		144	+ ready : function(){
		145	+ this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, GooglePiechartBehavior);
		146	+ this.async(function(){this.behavior.init(this)}, 0);
		147	+ },
		148	+
		149	+ _updateOptions : function(){
		150	+// this.async(function(){this.behavior._updateOptions()}, 1000);
		151	+ if(this.behavior)//false on ready
		152	+ this.behavior._updateOptions();
		153	+ }
		154	+
		155	+ });
		156	+
		157	+ </script>
		158	+
		159	+</dom-module>
0	\ No newline at end of file	160	\ No newline at end of file

datalets/google_piechart-datalet/google_piechart-datalet.png 0 → 100644

View file @331a226

24.8 KB

datalets/google_piechart-datalet/index.html 0 → 100644

View file @331a226

		1	+<html>
		2	+
		3	+<head>
		4	+ <script src="../shared_js/jquery-1.11.2.min.js"></script>
		5	+
		6	+ <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
		7	+
		8	+
		9	+ <link rel="import" href="../../bower_components/google-chart/google-chart.html"/>
		10	+</head>
		11	+
		12	+<body>
		13	+
		14	+<style>
		15	+ #resizing_chart {
		16	+ height: 600px;
		17	+ width: 600px;
		18	+ }
		19	+</style>
		20	+
		21	+<google-chart
		22	+ id='resizing_chart'
		23	+ type='pie'
		24	+ options='{"title": "Sbiricuda Chart!", "pieHole": "0.5"}'
		25	+ cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
		26	+ rows='[["Jan", 31], ["Feb", 28], ["Mar", 31], ["Apr", 11], ["Sbi", 77]]'>
		27	+</google-chart>
		28	+
		29	+</body>
		30	+
		31	+<!--<html>-->
		32	+<!--<head>-->
		33	+ <!--<script type="text/javascript" src="https://www.google.com/jsapi"></script>-->
		34	+ <!--<script type="text/javascript">-->
		35	+ <!--google.load("visualization", "1", {packages:["corechart"]});-->
		36	+ <!--google.setOnLoadCallback(drawChart);-->
		37	+ <!--function drawChart() {-->
		38	+
		39	+ <!--var data = google.visualization.arrayToDataTable([-->
		40	+ <!--['Task', 'Hours per Day'],-->
		41	+ <!--['Work', 11],-->
		42	+ <!--['Eat', 2],-->
		43	+ <!--['Commute', 2],-->
		44	+ <!--['Watch TV', 2],-->
		45	+ <!--['Sleep', 7]-->
		46	+ <!--]);-->
		47	+
		48	+ <!--var options = {-->
		49	+ <!--title: 'My Daily Activities'-->
		50	+ <!--};-->
		51	+
		52	+ <!--var chart = new google.visualization.PieChart(document.getElementById('piechart'));-->
		53	+
		54	+ <!--chart.draw(data, options);-->
		55	+ <!--}-->
		56	+ <!--</script>-->
		57	+<!--</head>-->
		58	+<!--<body>-->
		59	+<!--<div id="piechart" style="width: 900px; height: 500px;"></div>-->
		60	+<!--</body>-->
		61	+<!--</html>-->
0	\ No newline at end of file	62	\ No newline at end of file