cybrox · June 5, 2014 12:39 · Jun 5, 2014
diff --git a/EmberChartComponent.js b/EmberChartComponent.js
@@ -0,0 +1,77 @@
+/**
+ * This is a very simple example of an ember component to integrate
+ * nnick/chart.js in an ember.js application. Basically, it is simply
+ * using the components hook to create a ChartJS canvas element.
+ * Additionally, it supports an update property that allows you to
+ * let the chart re-rendet if your data or options change. Chart.js
+ * doesn't support updating its data so this will just create a new
+ * chart on the given canvas.
+ * 
+ * Example usage in a handlebars template:
+ * {{ember-chart type=CHARTTYPE data=CHARTDATA options=CHARTOPTIONS update=CHARTUPDATE}}
+ * 
+ * CHARTTYPE: Can be `Line`, `Bar`, `Radar`, `PolarArea`, `Pie` or `Doughnut`.
+ * CHARTDATA: The chart data array
+ * CHARTOPTIONS: The chart options array, this can be skipped, the component will genereate {} if this isn't set.
+ * CHARTUPDATE: Boolean indicator, the chart will re-render on data/options change if set to true. Can be undefined
+ * For more information, please read the Chart.js doc at http://chartjs.org
+ */
+
+App.EmberChartComponent = Ember.Component.extend({
+  tagName: 'canvas',
+  setup: false,
+
+  /**
+   * Construction handler
+   * This will create the canvas and check the given
+   * input values since Chart.js can react pretty odd
+   * when getting wrong and/or missing values.
+   */
+  didInsertElement: function(){
+    canvas  = this.get('element');
+    context = canvas.getContext('2d');
+
+    canvas.width  = $(canvas).parent().width();
+    canvas.height = $(canvas).parent().height();
+
+    data = this.get('data');
+    type = this.get('type').charAt(0).toUpperCase() + this.get('type').slice(1);
+    if(!type.match(/(Line|Bar|Radar|PolarArea|Pie|Doughnut)/)) type = "Line";
+    options = (this.get('options') !== undefined) ? this.get('options') : {};
+
+    this.setProperties({
+      '_data': data,
+      '_type': type,
+      '_canvas':  canvas,
+      '_context': context,
+      '_options': options
+    });
+    this.chartRender();
+  },
+
+  /**
+   * Render the chart to the canvas
+   * This function is separated from the event hook to
+   * allow data overwriting which more or less results
+   * in updating the chart.
+   */
+  chartRender: function(){
+    chart = new Chart(this.get('_context'))[this.get('_type')](this.get('_data'),this.get('_options'));
+    this.setProperties({
+      '_chart': chart,
+      'setup': true
+    });
+  },
+
+  /**
+   * Chart Update Handler
+   * This will re-render the chart whenever its data or
+   * options changes, if the 'update' property is set to true
+   */
+  chartUpdate: function(){
+    if(this.get('update') === true && this.get('setup') == true){
+      this.chartRender();
+    }
+  }.observes('data', 'options'),
+
+});