Support custom legends (#109)

This allows passing `customLegendElement`, which is an HTMLElement reference, to put the custom legend generated by `legendCallback` in.

Author: RobbieTheWagner

README.md

@@ -16,7 +16,15 @@ $ ember install ember-cli-chart
 In your handlebars template just do:
 
 ```hbs
-{{ember-chart type=CHARTTYPE data=CHARTDATA options=CHARTOPTIONS width=CHARTWIDTH height=CHARTHEIGHT plugins=CHARTPLUGINS}}
+{{ember-chart 
+  type=CHARTTYPE 
+  data=CHARTDATA 
+  options=CHARTOPTIONS 
+  width=CHARTWIDTH 
+  height=CHARTHEIGHT 
+  plugins=CHARTPLUGINS
+  customLegendElement=CUSTOMLEGENDELEMENT
+}}
 ```
 
 * CHARTTYPE: String; one of the following -- `line`, `bar`, `radar`, `polarArea`, `pie` or `doughnut`.
@@ -25,6 +33,7 @@ In your handlebars template just do:
 * CHARTWIDTH: Number; pixel width of the canvas element. Only applies if the chart is NOT responsive.
 * CHARTHEIGHT: Number; pixel height of the canvas element. Only applies if the chart is NOT responsive.
 * CHARTPLUGINS: Array; refer to ChartJS documentaion. This is optional.
+* CUSTOMLEGENDELEMENT: HTMLElement; A custom element to put a custom legend in, when using `legendCallback`. This is optional.
 
 #### Example
 

addon/components/ember-chart.js

@@ -13,6 +13,7 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
+
     let context = this.get('element');
     let data    = this.get('data');
     let type    = this.get('type');
@@ -25,6 +26,7 @@ export default Component.extend({
       options: options,
       plugins: plugins
     });
+
     this.set('chart', chart);
   },
 
@@ -52,6 +54,10 @@ export default Component.extend({
 			} else {
 				chart.update(0);
 			}
+
+      if (options.legendCallback && this.get('customLegendElement')) {
+        this.get('customLegendElement').innerHTML = chart.generateLegend();
+      }
 		}
   }
 });