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	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	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	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	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	62	\ No newline at end of file
...	...