*Ember.js and Flot Charts* by @cfcluan on the @pivotallabs blog: #emberjs

Continuing to play around with Ember.js I wanted to draw some charts. I’ve used flotcharts with great success in the past but since it’s just a jQuery plugin it is obviously unaware of ember’s amazing data binding capabilities. Flot requires you to pass in an array of datapoints every time you want to create or update a chart. You can’t use a bound variable in that array so we will have to use observers to manually update flot when our data changes. Let’s create a flot view that we can re-use in our templates: App.FlotView = Ember.View.extend({ classNames: ['canvas'], didInsertElement: function() { this.renderChart(); }, chartUpdated: function() { this.renderChart(); }.observes('controller.datasets'), renderChart: function() { var canvas = this.$(); if (canvas) { canvas.plot(this.get('controller.datasets')); } } }); We’re assuming here that this view is being added on a co...