Index: polymer_1.0.4/bower_components/google-chart/google-chart.html |
diff --git a/polymer_1.0.4/bower_components/google-chart/google-chart.html b/polymer_1.0.4/bower_components/google-chart/google-chart.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..dfec7494f19942dc7b7adbc96650881cfa0394ab |
--- /dev/null |
+++ b/polymer_1.0.4/bower_components/google-chart/google-chart.html |
@@ -0,0 +1,386 @@ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../iron-ajax/iron-ajax.html"> |
+<link rel="import" href="../google-apis/google-legacy-loader.html"> |
+ |
+<!-- |
+`google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize |
+data. From simple line charts to complex hierarchical tree maps, the chart element provides a |
+number of ready-to-use chart types. |
+ |
+ <google-chart |
+ type='pie' |
+ options='{"title": "Distribution of days in 2001Q1"}' |
+ cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]' |
+ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'> |
+ </google-chart> |
+ |
+Height and width are specified as style attributes: |
+ |
+ google-chart { |
+ height: 300px; |
+ width: 50em; |
+ } |
+ |
+Data can be provided in one of three ways: |
+ |
+- Via the `cols` and `rows` attributes: |
+ |
+ cols='[{"label":"Mth", "type":"string"}, {"label":"Days", "type":"number"}]' |
+ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]' |
+ |
+- Via the `data` attribute, passing in the data directly: |
+ |
+ data='[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]' |
+ |
+- Via the `data` attribute, passing in the URL to a resource containing the |
+ data, in JSON format: |
+ |
+ data='http://example.com/chart-data.json' |
+@demo |
+--> |
+<dom-module id="google-chart"> |
+ <link rel="import" type="css" href="google-chart.css"> |
+ <template> |
+ <iron-ajax id="ajax" handle-as="json" url="{{data}}" |
+ on-response="_externalDataLoaded"></iron-ajax> |
+ <div id="chartdiv"></div> |
+ <google-legacy-loader on-api-load="_readyForAction"></google-legacy-loader> |
+ </template> |
+</dom-module> |
+ |
+<script> |
+(function() { |
+ "use strict"; |
+ |
+ Polymer({ |
+ |
+ is: 'google-chart', |
+ |
+ /** |
+ * Fired when the graph is displayed. |
+ * |
+ * @event google-chart-render |
+ */ |
+ |
+ /** |
+ * Fired when the user makes a selection in the chart. |
+ * |
+ * @event google-chart-select |
+ * @param {object} detail |
+ * @param {array} detail.selection The user-defined selection. |
+ */ |
+ |
+ properties: { |
+ /** |
+ * Sets the type of the chart. |
+ * |
+ * Should be one of: |
+ * - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`, |
+ * `histogram`, `line`, `pie`, `scatter`, `stepped-area` |
+ * |
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details. |
+ * |
+ */ |
+ type: { |
+ type: String, |
+ value: 'column', |
+ observer: '_typeChanged' |
+ }, |
+ |
+ /** |
+ * Sets the options for the chart. |
+ * |
+ * Example: |
+ * <pre>{ |
+ * title: "Chart title goes here", |
+ * hAxis: {title: "Categories"}, |
+ * vAxis: {title: "Values", minValue: 0, maxValue: 2}, |
+ * legend: "none" |
+ * };</pre> |
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> |
+ * for the options available to each chart type. |
+ * |
+ */ |
+ options: { |
+ type: Object, |
+ value: function() { return {}; } |
+ }, |
+ |
+ /** |
+ * Sets the data columns for this object. |
+ * |
+ * When specifying data with `cols` you must also specify `rows`, and |
+ * not specify `data`. |
+ * |
+ * Example: |
+ * <pre>[{label: "Categories", type: "string"}, |
+ * {label: "Value", type: "number"}]</pre> |
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable_addColumn">Google Visualization API reference (addColumn)</a> |
+ * for column definition format. |
+ * |
+ * @attribute cols |
+ * @type array |
+ */ |
+ cols: { |
+ type: Array, |
+ value: function() { return []; } |
+ }, |
+ /** |
+ * Sets the data rows for this object. |
+ * |
+ * When specifying data with `rows` you must also specify `cols`, and |
+ * not specify `data`. |
+ * |
+ * Example: |
+ * <pre>[["Category 1", 1.0], |
+ * ["Category 2", 1.1]]</pre> |
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#addrow">Google Visualization API reference (addRow)</a> |
+ * for row format. |
+ * |
+ * @attribute rows |
+ * @type array |
+ */ |
+ rows: { |
+ type: Array, |
+ value: function() { return []; } |
+ }, |
+ |
+ /** |
+ * Sets the entire dataset for this object. |
+ * Can be used to provide the data directly, or to provide a URL from |
+ * which to request the data. |
+ * |
+ * The data format can be a two-dimensional array or the DataTable format |
+ * expected by Google Charts. |
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable">Google Visualization API reference (DataTable constructor)</a> |
+ * for data table format details. |
+ * |
+ * When specifying data with `data` you must not specify `cols` or `rows`. |
+ * |
+ * Example: |
+ * <pre>[["Categories", "Value"], |
+ * ["Category 1", 1.0], |
+ * ["Category 2", 1.1]]</pre> |
+ * |
+ * @attribute data |
+ * @type array, object, or string |
+ */ |
+ data: { |
+ type: Object, // or array, or object |
+ value: function() { return []; } |
+ }, |
+ |
+ /** |
+ * Selected datapoint(s) in the map. |
+ * |
+ * An array of objects, each with a numeric row and/or column property. |
+ * `row` and `column` are the zero-based row or column number of an item |
+ * in the data table to select. |
+ * |
+ * To select a whole column, set row to null; |
+ * to select a whole row, set column to null. |
+ * |
+ * Example: |
+ * <pre> |
+ * [{row:0,column:1}, {row:1, column:null}] |
+ * </pre> |
+ * |
+ * @attribute selection |
+ * @type array |
+ */ |
+ selection: { |
+ type: Array, |
+ value: function() { return []; }, |
+ observer: '_selectionChanged' |
+ }, |
+ }, |
+ |
+ observers: [ |
+ '_loadData(rows, cols, data)' |
+ ], |
+ |
+ _packages: null, |
+ |
+ _chartObject: null, |
+ |
+ _isReady: false, |
+ |
+ _canDraw: false, |
+ |
+ _dataTable: null, |
+ |
+ _chartTypes: null, |
+ |
+ _readyForAction: function(e, detail, sender) { |
+ this._loadPackageByChartType(); |
+ |
+ google.load("visualization", "1", { |
+ packages: this._packages[this.type], |
+ callback: function() { |
+ this._isReady = true; |
+ this._loadChartTypes(); |
+ this._loadData(); |
+ }.bind(this) |
+ }); |
+ }, |
+ |
+ _typeChanged: function() { |
+ // Invalidate current chart object. |
+ this._chartObject = null; |
+ this._loadData(); |
+ }, |
+ |
+ _selectionChanged: function() { |
+ if (this._chartObject && this.setSelection) { |
+ this._chartObject.setSelection(this.selection); |
+ } |
+ }, |
+ |
+ /** |
+ * Draws the chart. |
+ * |
+ * Called automatically on first load and whenever one of the attributes |
+ * changes. Can be called manually to handle e.g. page resizes. |
+ * |
+ * @method drawChart |
+ * @return {Object} Returns null. |
+ */ |
+ drawChart: function() { |
+ if (this._canDraw) { |
+ if (!this.options) { |
+ this.options = {}; |
+ } |
+ if (!this._chartObject) { |
+ var chartClass = this._chartTypes[this.type]; |
+ if (chartClass) { |
+ this._chartObject = new chartClass(this.$.chartdiv); |
+ } |
+ } |
+ if (this._chartObject) { |
+ google.visualization.events.addOneTimeListener(this._chartObject, |
+ 'ready', function() { |
+ this.fire('google-chart-render'); |
+ }.bind(this)); |
+ |
+ google.visualization.events.addListener(this._chartObject, |
+ 'select', function() { |
+ this.selection = this._chartObject.getSelection(); |
+ this.fire('google-chart-select', |
+ { selection: this._chartObject.getSelection() }); |
+ }.bind(this)); |
+ |
+ |
+ this._chartObject.draw(this._dataTable, this.options); |
+ |
+ if (this._chartObject.setSelection){ |
+ this._chartObject.setSelection(this.selection); |
+ } |
+ } else { |
+ this.$.chartdiv.innerHTML = 'Undefined chart type'; |
+ } |
+ } |
+ return null; |
+ }, |
+ |
+ _loadChartTypes: function() { |
+ this._chartTypes = { |
+ 'area': google.visualization.AreaChart, |
+ 'bar': google.visualization.BarChart, |
+ 'bubble': google.visualization.BubbleChart, |
+ 'candlestick': google.visualization.CandlestickChart, |
+ 'column': google.visualization.ColumnChart, |
+ 'combo': google.visualization.ComboChart, |
+ 'geo': google.visualization.GeoChart, |
+ 'histogram': google.visualization.Histogram, |
+ 'line': google.visualization.LineChart, |
+ 'pie': google.visualization.PieChart, |
+ 'scatter': google.visualization.ScatterChart, |
+ 'stepped-area': google.visualization.SteppedAreaChart, |
+ 'table': google.visualization.Table, |
+ 'gauge': google.visualization.Gauge |
+ }; |
+ }, |
+ |
+ _loadPackageByChartType: function() { |
+ this._packages = { |
+ 'area': 'corechart', |
+ 'bar': 'corechart', |
+ 'bubble': 'corechart', |
+ 'candlestick': 'corechart', |
+ 'column': 'corechart', |
+ 'combo': 'corechart', |
+ 'geo': 'corechart', |
+ 'histogram': 'corechart', |
+ 'line': 'corechart', |
+ 'pie': 'corechart', |
+ 'scatter': 'corechart', |
+ 'stepped-area': 'corechart', |
+ 'table': 'table', |
+ 'gauge': 'gauge' |
+ }; |
+ }, |
+ |
+ _loadData: function() { |
+ this._canDraw = false; |
+ if (this._isReady) { |
+ if (typeof this.data == 'string' || this.data instanceof String) { |
+ // Load data asynchronously, from external URL. |
+ this.$.ajax.generateRequest(); |
+ } else { |
+ var dataTable = this._createDataTable(); |
+ this._canDraw = true; |
+ if (dataTable) { |
+ this._dataTable = dataTable; |
+ this.drawChart(); |
+ } |
+ } |
+ } |
+ }, |
+ |
+ _externalDataLoaded: function(e) { |
+ var dataTable = this._createDataTable(e.detail.response); |
+ this._canDraw = true; |
+ this._dataTable = dataTable; |
+ this.drawChart(); |
+ }, |
+ |
+ _createDataTable: function(data) { |
+ var dataTable = null; |
+ |
+ // If a data object was not passed to this function, default to the |
+ // chart's data attribute. Passing a data object is necessary for |
+ // cases when the data attribute is a URL pointing to an external |
+ // data source. |
+ if (!data) { |
+ data = this.data; |
+ } |
+ if (!data) |
+ data = []; |
+ |
+ if (this.rows && this.rows.length > 0 && this.cols && |
+ this.cols.length > 0) { |
+ // Create the data table from cols and rows. |
+ dataTable = new google.visualization.DataTable(); |
+ dataTable.cols = this.cols; |
+ |
+ for (var i = 0; i < this.cols.length; i++) { |
+ dataTable.addColumn(this.cols[i]); |
+ } |
+ |
+ dataTable.addRows(this.rows); |
+ } else { |
+ // Create dataTable from the passed data or the data attribute. |
+ // Data can be in the form of raw DataTable data or a two |
+ // dimensional array. |
+ if (data.rows && data.cols) { |
+ dataTable = new google.visualization.DataTable(data); |
+ } else if (data.length > 0) { |
+ dataTable = google.visualization.arrayToDataTable(data); |
+ } |
+ } |
+ |
+ return dataTable; |
+ } |
+ }); |
+})(); |
+</script> |