I'm using a charts-Plugin (Morris.js) in my AngularJS application. I'm building a directive for each type of chart.
The plugin is called like this:
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
The first step is just to include this code into my link
-function:
angular.module('app')
.directive('donutchart', function () {
return {
link: function (scope, element, attrs) {
new Morris.Bar({
element: element[0].id,
data: [
{ Age: '20', value: 20 },
{ Age: '25', value: 10 },
{ Age: '30', value: 5 },
{ Age: '40', value: 5 },
{ Age: '50', value: 20 }
],
xkey: 'Age',
ykeys: ['Amount'],
labels: ['views']
});
}
};
});
But I don't like it to manipulate the directive when i want to change the data. So I save every attribute inside the scope inside the controller.
But, is this the 'right' way to do it? Or should I use a config variable to store very attribute? Like:
var CONFIG = { bar_labels: ['views'] }
and then inside the controller:
$scope.bar_labels = bar_labels