Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(199)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.0.4/bower_components/google-chart/demo/index.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « polymer_1.0.4/bower_components/google-chart/demo/country-data.json ('k') | polymer_1.0.4/bower_components/google-chart/google-chart.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
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": "numbe r"}]'
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>&lt;iron-media-query&gt;</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": "numbe r"}]'
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": "numbe r"}]'
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": "num ber"}]'
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</cod e> 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 da ta 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": "numbe r"}]'
175 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
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": "numbe r"}]'
184 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
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": "numbe r"}]'
224 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
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": { "buck etSize": 1 }}'
258 cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "numbe r"}]'
259 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
260 </google-chart>
261
262 <p>Here's a line chart:</p>
263
264 <google-chart
265 type='line'
266 options='{"title": "Days in a month"}'
267 cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "numbe r"}]'
268 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
269 </google-chart>
270
271 <p>Here's a pie chart:</p>
272
273 <google-chart
274 type='pie'
275 options='{"title": "Distribution of days in 2001H1"}'
276 cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "numbe r"}]'
277 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
278 </google-chart>
279
280 <p>Here's a scatter chart:</p>
281
282 <google-chart
283 type='scatter'
284 options='{"legend": "none"}'
285 data='[["A", "B"],
286 [20, 45],
287 [31, 66],
288 [50, 80],
289 [77, 50],
290 [68, 15]]'>
291 </google-chart>
292
293 <p>Here's a stepped area chart:</p>
294
295 <google-chart
296 type='stepped-area'
297 options='{"title": "Days in a month"}'
298 cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "numbe r"}]'
299 rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 3 0]]'>
300 </google-chart>
301
302 <p>Here's a table chart:</p>
303
304 <google-chart
305 type="table"
306 options='{"title": "Inventory"}'
307 data='[["Year", "Things", "Stuff"],
308 ["2004", 1000, 400],
309 ["2005", 1170, 460],
310 ["2006", 660, 1120],
311 ["2007", 1030, 540]]'>
312 </google-chart>
313
314 <p>Here are three gauges:</p>
315
316 <google-chart
317 type='gauge'
318 data='[["Label", "Value"],["Memory", 80],["CPU", 55],["Network", 68]]'
319 options='{"width": 400,
320 "height": 120,
321 "redFrom": 90,
322 "redTo": 100,
323 "yellowFrom":75,
324 "yellowTo": 90,
325 "minorTicks": 5}'>
326 </google-chart>
327
328 <p>Here are three gauges with random data that change every three seconds:</p>
329
330 <google-chart
331 id="mutating_gauge"
332 type="gauge"
333 data='[["Label", "Value"],["Memory", 80],["CPU", 55],["Network", 68]]'
334 options='{"width": 400,
335 "height": 120,
336 "redFrom": 90,
337 "redTo": 100,
338 "yellowFrom": 75,
339 "yellowTo": 90,
340 "minorTicks": 5}'>
341 </google-chart>
342
343 <script>
344 function getRandomGaugeValue(offset, factor) {
345 return offset + Math.round(factor * Math.random());
346 }
347
348 window.setInterval(function() {
349 var gauge = document.getElementById('mutating_gauge');
350
351 gauge.data = [["Label", "Value"],["Memory", getRandomGaugeValue(40, 60)],[ "CPU", getRandomGaugeValue(40, 60)],["Network", getRandomGaugeValue(60, 20)]];
352
353 }, 3000);
354 </script>
355
356 </body>
357 </html>
OLDNEW
« no previous file with comments | « polymer_1.0.4/bower_components/google-chart/demo/country-data.json ('k') | polymer_1.0.4/bower_components/google-chart/google-chart.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698