Tawfiqh / chartistAngularDirective

A directive to easily integrate chartist graphs into your AngularJS application

chartistAngularDirective

A directive to easily integrate chartist graphs into Angular 1.x applications. Chartist is a open source graph framework and has to be added to your app as well.The API and examples can be found here

Install

Requires Chartist.js.

Add the file src/chartistAngularDirective.js where you store your project directives.

HowTo

Insert the directive in your HTML file:

<exg-chartist id='graph_id' class="ct-chart" data='data' options='{{options}}' type='{{chartType}}'></exg-chartist>

• id: set manually
• class: set ct-chart to get the chartist CSS
• data: set inside controller via $scope.data
• options: set via $scope.options inside the controller
• type: set via $scope.chartType inside controller

 scope.data = {
     labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
     series: [
       [5, 2, 4, 2, 0]
     ]
 };
 scope.options ={
     high: 10,
     low: -10,
     axisX: {
         labelInterpolationFnc: function(value, index) {
             return index % 2 === 0 ? value : null;
         }
     }
 };

 scope.chartType = "Bar";