This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
tweak metadata, put OSS code in a folder
- Loading branch information
Scott J. Miles
committed
Feb 12, 2014
1 parent
2e07d33
commit be52e50
Showing
3 changed files
with
148 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,103 @@ | ||
| <!-- | ||
| Copyright 2013 The Polymer Authors. All rights reserved. | ||
| Use of this source code is governed by a BSD-style | ||
| license that can be found in the LICENSE file. | ||
| --> | ||
| <link rel="import" href="../polymer/polymer.html"> | ||
| <script src="Chart.min.js"></script> | ||
|
|
||
| /** | ||
| * | ||
| * Chart.js element | ||
| * | ||
| * Easy, object oriented client side graphs for designers and developers | ||
| * | ||
| * http://www.chartjs.org/ | ||
| * | ||
| * @class chart-js | ||
| * @snap //polymer.github.io/chart-js/components/chart-js/snap.png | ||
| * @origin-url http://www.chartjs.org/ | ||
| * | ||
| */ | ||
| <polymer-element name="chart-js" attributes="data dataString kind color options"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| width: 300px; | ||
| height: 260px; | ||
| } | ||
| </style> | ||
| <canvas id="chart" width="100" height="100"></canvas> | ||
| </template> | ||
| <script> | ||
| Polymer('chart-js', { | ||
| kind: '', | ||
| data: null, | ||
| options: null, | ||
| color: '#AABBDD', | ||
| dataString: '28,48,40,19,96,27,100', | ||
| enteredView: function() { | ||
| this.$.chart.width = Math.max(this.offsetWidth, 100); | ||
| this.$.chart.height = Math.max(this.offsetHeight, 100); | ||
| //Get the context of the canvas element we want to select | ||
| this.ctx = this.$.chart.getContext('2d'); | ||
| if (!this.kind) { | ||
| this.kind = ['Radar', 'Line', 'Bar'][Math.floor(Math.random()*3)]; | ||
| this.dataStringChanged(); | ||
| } | ||
| }, | ||
| hexToRgb: function(hex) { | ||
| var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | ||
| return result ? [ | ||
| parseInt(result[1], 16), | ||
| parseInt(result[2], 16), | ||
| parseInt(result[3], 16) | ||
| ] : [0, 0, 0]; | ||
| }, | ||
| updateChart: function() { | ||
| if (this.data && this.ctx) { | ||
| //console.log(this.data); | ||
| var chart = new Chart(this.ctx); | ||
| var kind = this.kind; | ||
| if (!chart[kind]) { | ||
| kind = 'Line'; | ||
| } | ||
| this.chart = chart[kind](this.data, this.options); | ||
| } | ||
| }, | ||
| dataStringChanged: function() { | ||
| var dataPts = this.dataString.split(',').reduce( | ||
| function(previousValue, currentValue, i, a) { | ||
| previousValue.push(parseFloat(currentValue)); | ||
| return previousValue; | ||
| }, []); | ||
| var rgbColor = this.hexToRgb(this.color).join(','); | ||
| this.data = { | ||
| labels: ['January','February','March','April','May','June','July'], | ||
| datasets: [ | ||
| { | ||
| fillColor : 'rgba(' + rgbColor + ', 0.5)', | ||
| strokeColor : 'rgba(' + rgbColor + ', 1)', | ||
| pointColor : 'rgba(' + rgbColor + ', 1)', | ||
| pointStrokeColor: '#fff', | ||
| data: dataPts | ||
| } | ||
| ] | ||
| }; | ||
| }, | ||
| colorChanged: function() { | ||
| this.dataStringChanged(); | ||
| }, | ||
| dataChanged: function() { | ||
| this.updateChart(); | ||
| }, | ||
| kindChanged: function() { | ||
| this.updateChart(); | ||
| } | ||
| }); | ||
| </script> | ||
| </polymer-element> | ||
| <!-- | ||
| Copyright 2013 The Polymer Authors. All rights reserved. | ||
| Use of this source code is governed by a BSD-style | ||
| license that can be found in the LICENSE file. | ||
| --> | ||
| <link rel="import" href="../polymer/polymer.html"> | ||
| <script src="chartjs/Chart.min.js"></script> | ||
|
|
||
| /** | ||
| * | ||
| * Chart.js element | ||
| * | ||
| * Easy, object oriented client side graphs for designers and developers | ||
| * | ||
| * http://www.chartjs.org/ | ||
| * | ||
| * @class chart-js | ||
| * @snap //polymer.github.io/chart-js/components/chart-js/snap.png | ||
| * @origin-url http://www.chartjs.org/ | ||
| * @author The Polymer Authors | ||
| * @categories Charts and Graphs | ||
| * @license modified-bsd | ||
| * | ||
| */ | ||
| <polymer-element name="chart-js" attributes="data dataString kind color options"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| width: 300px; | ||
| height: 260px; | ||
| } | ||
| </style> | ||
| <canvas id="chart" width="100" height="100"></canvas> | ||
| </template> | ||
| <script> | ||
| Polymer('chart-js', { | ||
| kind: '', | ||
| data: null, | ||
| options: null, | ||
| color: '#AABBDD', | ||
| dataString: '28,48,40,19,96,27,100', | ||
| enteredView: function() { | ||
| this.$.chart.width = Math.max(this.offsetWidth, 100); | ||
| this.$.chart.height = Math.max(this.offsetHeight, 100); | ||
| //Get the context of the canvas element we want to select | ||
| this.ctx = this.$.chart.getContext('2d'); | ||
| if (!this.kind) { | ||
| this.kind = ['Radar', 'Line', 'Bar'][Math.floor(Math.random()*3)]; | ||
| this.dataStringChanged(); | ||
| } | ||
| }, | ||
| hexToRgb: function(hex) { | ||
| var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | ||
| return result ? [ | ||
| parseInt(result[1], 16), | ||
| parseInt(result[2], 16), | ||
| parseInt(result[3], 16) | ||
| ] : [0, 0, 0]; | ||
| }, | ||
| updateChart: function() { | ||
| if (this.data && this.ctx) { | ||
| //console.log(this.data); | ||
| var chart = new Chart(this.ctx); | ||
| var kind = this.kind; | ||
| if (!chart[kind]) { | ||
| kind = 'Line'; | ||
| } | ||
| this.chart = chart[kind](this.data, this.options); | ||
| } | ||
| }, | ||
| dataStringChanged: function() { | ||
| var dataPts = this.dataString.split(',').reduce( | ||
| function(previousValue, currentValue, i, a) { | ||
| previousValue.push(parseFloat(currentValue)); | ||
| return previousValue; | ||
| }, []); | ||
| var rgbColor = this.hexToRgb(this.color).join(','); | ||
| this.data = { | ||
| labels: ['January','February','March','April','May','June','July'], | ||
| datasets: [ | ||
| { | ||
| fillColor : 'rgba(' + rgbColor + ', 0.5)', | ||
| strokeColor : 'rgba(' + rgbColor + ', 1)', | ||
| pointColor : 'rgba(' + rgbColor + ', 1)', | ||
| pointStrokeColor: '#fff', | ||
| data: dataPts | ||
| } | ||
| ] | ||
| }; | ||
| }, | ||
| colorChanged: function() { | ||
| this.dataStringChanged(); | ||
| }, | ||
| dataChanged: function() { | ||
| this.updateChart(); | ||
| }, | ||
| kindChanged: function() { | ||
| this.updateChart(); | ||
| } | ||
| }); | ||
| </script> | ||
| </polymer-element> |
Oops, something went wrong.