Skip to content

Commit e31e503

Browse files
wesalvarowesalvaro
committed
Use ChartWrapper to load/render charts.
1 parent 0020cd8 commit e31e503

1 file changed

Lines changed: 89 additions & 134 deletions

File tree

‎google-chart.html‎

Lines changed: 89 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
number of ready-to-use chart types.
1010
1111
<google-chart
12-
type='pie'
12+
type="pie"
1313
options='{"title": "Distribution of days in 2001Q1"}'
1414
cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
1515
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
@@ -51,109 +51,49 @@
5151
<link rel="import" type="css" href="google-chart.css">
5252
<template>
5353
<iron-request id="xhr"></iron-request>
54-
<div id="chartdiv"></div>
54+
<div id="chart"></div>
55+
<div id="error"></div>
5556
</template>
5657
</dom-module>
5758

5859
<script>
5960
(function() {
6061
"use strict";
6162

62-
// Most charts use this package.
63-
var DEFACTO_CHART_PACKAGE = 'corechart';
64-
65-
// Loads a chart package and then calls the callback.
66-
var chartConstructor = function(callback, opt_pkg) {
67-
return function(chartElement) {
68-
return getChartPackage(opt_pkg).then(callback).then(function(ctor) {
69-
return new ctor(chartElement);
70-
});
71-
};
72-
};
73-
7463
// A collection of chart types associated with a function that returns a
7564
// Promise for the chart type's constructor.
76-
var CHART_CONSTRUCTORS = {
77-
'area': chartConstructor(function(pkg) {
78-
return pkg.AreaChart;
79-
}),
80-
'bar': chartConstructor(function(pkg) {
81-
return pkg.BarChart;
82-
}),
83-
'bubble': chartConstructor(function(pkg) {
84-
return pkg.BubbleChart;
85-
}),
86-
'candlestick': chartConstructor(function(pkg) {
87-
return pkg.CandlestickChart;
88-
}),
89-
'column': chartConstructor(function(pkg) {
90-
return pkg.ColumnChart;
91-
}),
92-
'combo': chartConstructor(function(pkg) {
93-
return pkg.ComboChart;
94-
}),
95-
'geo': chartConstructor(function(pkg) {
96-
return pkg.GeoChart;
97-
}),
98-
'histogram': chartConstructor(function(pkg) {
99-
return pkg.Histogram;
100-
}),
101-
'line': chartConstructor(function(pkg) {
102-
return pkg.LineChart;
103-
}),
104-
'pie': chartConstructor(function(pkg) {
105-
return pkg.PieChart;
106-
}),
107-
'scatter': chartConstructor(function(pkg) {
108-
return pkg.ScatterChart;
109-
}),
110-
'stepped-area': chartConstructor(function(pkg) {
111-
return pkg.SteppedAreaChart;
112-
}),
113-
'table': chartConstructor(function(pkg) {
114-
return pkg.Table;
115-
}, 'table'),
116-
'timeline': chartConstructor(function(pkg) {
117-
return pkg.Timeline;
118-
}, 'timeline'),
119-
'gauge': chartConstructor(function(pkg) {
120-
return pkg.Gauge;
121-
}, 'gauge'),
122-
'treemap': chartConstructor(function(pkg) {
123-
return pkg.TreeMap;
124-
}, 'treemap')
65+
var CHART_TYPES = {
66+
'area': 'AreaChart',
67+
'bar': 'BarChart',
68+
'bubble': 'BubbleChart',
69+
'candlestick': 'CandlestickChart',
70+
'column': 'ColumnChart',
71+
'combo': 'ComboChart',
72+
'gauge': 'Gauge',
73+
'geo': 'GeoChart',
74+
'histogram': 'Histogram',
75+
'line': 'LineChart',
76+
'pie': 'PieChart',
77+
'scatter': 'ScatterChart',
78+
'stepped-area': 'SteppedAreaChart',
79+
'table': 'Table',
80+
'timeline': 'Timeline',
81+
'treemap': 'TreeMap',
82+
// Material Charts:
83+
'md-bar': 'google.charts.Bar',
84+
'md-gantt': 'google.charts.Gantt',
85+
'md-scatter': 'google.charts.Scatter'
12586
};
12687

127-
// A cache of Package Promises so we can re-use them between charts.
128-
var pkgPromises = {};
129-
130-
// Returns a Promise for a Chart package.
131-
var getChartPackage = function(opt_pkg) {
132-
var pkg = opt_pkg || DEFACTO_CHART_PACKAGE;
133-
if (pkgPromises[pkg]) return pkgPromises[pkg];
134-
pkgPromises[pkg] = new Promise(function(resolve) {
135-
google.load('visualization', '1', {
136-
packages: [pkg],
137-
callback: function() {
138-
resolve(google.visualization);
139-
}
140-
});
88+
var vizPkg = new Promise(function(resolve, reject) {
89+
google.load('visualization', '1', {
90+
callback: function() {
91+
resolve(google.visualization);
92+
}
14193
});
142-
return pkgPromises[pkg];
143-
};
144-
145-
// Creates a chart of type on the chartElement.
146-
// Returns a Promise for the new chart.
147-
var createChart = function(type, chartElement) {
148-
return CHART_CONSTRUCTORS[type](chartElement);
149-
};
150-
151-
// We can go ahead and load the defacto package because we'll need it to do
152-
// anything (e.g. creating the DataTable to render).
153-
var vizPkg = getChartPackage();
94+
});
15495

15596
Polymer({
156-
15797
is: 'google-chart',
15898

15999
/**
@@ -162,21 +102,30 @@
162102
* @event google-chart-render
163103
*/
164104

165-
/**
166-
* Fired when the user makes a selection in the chart.
167-
*
168-
* @event google-chart-select
169-
* @param {object} detail
170-
* @param {array} detail.selection The user-defined selection.
171-
*/
172-
173105
properties: {
174106
/**
175107
* Sets the type of the chart.
176108
*
177109
* Should be one of:
178-
* - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`,
179-
* `histogram`, `line`, `pie`, `scatter`, `stepped-area`, `treemap`
110+
* - `area`,
111+
* - `bar`
112+
* - `bubble`
113+
* - `candlestick`
114+
* - `column`
115+
* - `combo`
116+
* - `gauge`
117+
* - `geo`
118+
* - `histogram`
119+
* - `line`
120+
* - `pie`
121+
* - `scatter`
122+
* - `stepped-area`
123+
* - `table`
124+
* - `timeline`
125+
* - `treemap`
126+
* - `md-bar`
127+
* - `md-gantt`
128+
* - `md-scatter`
180129
*
181130
* See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details.
182131
*
@@ -206,22 +155,6 @@
206155
observer: 'drawChart'
207156
},
208157

209-
/**
210-
* A Promise for the Google Visualization library.
211-
*
212-
* Example:
213-
* <pre>myChart.pkg.then(function(viz) {
214-
* // `viz` is equivalent to `google.visualization`
215-
* myChart.view = new viz.DataView(myData);
216-
* });</pre>
217-
*
218-
*/
219-
pkg: {
220-
type: Object,
221-
value: vizPkg,
222-
readOnly: true
223-
},
224-
225158
/**
226159
* Sets the data columns for this object.
227160
*
@@ -344,10 +277,18 @@
344277
// The current selection in the chart.
345278
_selection: null,
346279

280+
pkg: vizPkg,
281+
347282
// The chart type was changed.
348283
// We need to create a new chart and redraw.
349284
_typeChanged: function() {
350-
this._chart = createChart(this.type, this.$.chartdiv)
285+
this._chart = vizPkg.then(function() {
286+
return new google.visualization.ChartWrapper({
287+
chartType: CHART_TYPES[this.type],
288+
containerId: this.$.chart,
289+
options: this.options
290+
});
291+
}.bind(this))
351292
.then(this._setupChart.bind(this));
352293
this.drawChart();
353294
},
@@ -374,7 +315,8 @@
374315
// Some charts (e.g. Gauge) do not support selection
375316
if (chart.getSelection) {
376317
google.visualization.events.addListener(chart, 'select', function() {
377-
this.selection = this._selection = chart.getSelection();
318+
this.selection = chart.getChart().getSelection();
319+
this._selection = this.selection;
378320
// This should be deprecated.
379321
// The value for the new selection is here:
380322
// event.detail.selection
@@ -390,6 +332,14 @@
390332
return chart;
391333
},
392334

335+
get chart() {
336+
return this._chart || Promise.reject('No chart');
337+
},
338+
339+
get dataView() {
340+
return this._dataView || Promise.reject('No data');
341+
},
342+
393343
/**
394344
* Redraws the chart.
395345
*
@@ -399,21 +349,25 @@
399349
* @method drawChart
400350
*/
401351
drawChart: function() {
402-
if (!this._chart || !this._dataView) return;
403-
this._chartDrawn = Promise.all([this._chart, this._dataView])
404-
.then(function(chartAndData) {
405-
var chart = chartAndData[0];
406-
var data = chartAndData[1];
407-
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
408-
this.fire('google-chart-render');
409-
}.bind(this));
410-
chart.draw(data, this.options || {});
411-
return chart;
412-
}.bind(this), function(error) {
413-
this.$.chartdiv.innerHTML = error;
414-
throw error;
415-
}.bind(this));
416-
this._setSelection();
352+
Promise.all([this.chart, this.dataView]).then(function(chartAndData) {
353+
var chart = chartAndData[0];
354+
var data = chartAndData[1];
355+
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
356+
if (this.selection && chart.getChart().setSelection) {
357+
// Note: Some charts (e.g. TreeMap) must have a selection.
358+
chart.getChart().setSelection(this.selection);
359+
}
360+
this.fire('google-chart-render');
361+
}.bind(this));
362+
chart.setDataTable(data);
363+
chart.draw();
364+
return chart;
365+
}.bind(this))
366+
.then(function() {
367+
this.$.error.innerHTML = '';
368+
}.bind(this), function(error) {
369+
this.$.error.innerHTML = error;
370+
}.bind(this));
417371
},
418372

419373
/**
@@ -424,7 +378,8 @@
424378
* @return {string} Returns image URI.
425379
*/
426380
getImageURI: function() {
427-
return this._chartObject.getImageURI();
381+
var chart = this._chartObject.getChart();
382+
return chart ? chart.getImageURI() : null;
428383
},
429384

430385
// Handles changes to the DataView object attribute.

0 commit comments

Comments
 (0)