Move charts to pure flotcharts.js and redraw on data change

app/components/line-chart.js

@@ -1,17 +1,24 @@
 import Ember from 'ember';
 
-const { Component, computed } = Ember;
-
 export default Ember.Component.extend({
-  tagName: 'canvas',
+  tagName: 'div',
   classNames: ['line-chart'],
 
-  didInsertElement: function() {
-    // create chart
-    var element = this.get('element');
-    this.chart = new Chart(element.getContext('2d'));
-    this.chart.Line(this.chartData, {
+  init: function() {
+    this._super();
+    this.addObserver('data', this.dataDidChange);
+  },
 
-    });
+  didInsertElement: function() {
+    this._drawPlot();
+  },
+
+  dataDidChange: function() {
+    this._drawPlot();
+  },
+
+  _drawPlot: function() {
+    var elementId = this.get('elementId');
+    $.plot('#' + elementId, this.data);
   }
 });

app/routes/lab-mashup/entity/property.js

@@ -10,9 +10,9 @@ export default Ember.Route.extend({
     return record;
   },
 
-  chartData() {
+  chartData: function() {
     return {
       name: 'test'
     };
-  }
+  }.property()
 });

app/styles/app.css

@@ -124,9 +124,9 @@ footer {
 	margin: 0;
 }
 
-canvas.line-chart {
-	width: 90%;
-	height: 90%;
+.line-chart {
+	width: 500px;
+	height: 300px;
 
 	margin: 10px;
 }

app/templates/components/line-chart.hbs

@@ -1 +1,10 @@
+<!-- {{#if data}}
+  <p>History: {{data.[0].length}}</p>
+{{/if}}
 
+<ul>
+  {{#each data.[0] as |sample|}}
+    <li>{{sample.[1]}}</li>
+  {{/each}}
+</ul>
+-->

app/templates/lab-mashup/entity/property.hbs

@@ -1,7 +1,12 @@
-{{#if property}}
-  <p>{{property.name}}</p>
+{{#if model.name}}
+  <p>Model: {{model.name}}, {{model.history.[0].length}}</p>
 {{/if}}
 
-{{chartData.name}}
+{{#if chartData}}
+  <p>{{chartData.name}}</p>
+{{else}}
+  <p>No chart data</p>
+{{/if}}
 
-{{flot-chart height="500px" data=model.history}}
+<!-- {{flot-chart height="500px" data=model.history}} -->
+{{line-chart data=model.history}}