1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.