Created
June 5, 2014 12:39
-
-
Save cybrox/97bca1c3f2cb7c200600 to your computer and use it in GitHub Desktop.
Use Chart.js as a simple Ember.js component
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
/** | |
* 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'), | |
}); |
@PankajWorks This "implementation" is a hacky 5-minute solution I wrote ages ago.
There is an ember-cli package for implementing chartjs with ember by now. Check it out here
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@cybrox , The links you posted is not available, Please repost them