Simple Chartist directive for Angular.js. Chartist is simple and lightweight javascript charting library https://gionkunz.github.io/chartist-js/
##Installation
<!-- Chartist dependencies -->
<script src="angular-chartist/chartist.js"></script>
<link rel="stylesheet" href="angular-chartist/chartist.css">
<!-- Angular directive -->
<script src="angular-chartist/chartistAngularDirective.js"></script>
##Usage
var myApp = angular.module('myApp', ['chartistAngularDirective']);
In your html view:
<div ng-chartist id='graph_id1' class="ct-chart" data='pie_data' type='Pie' animate='true' options='{"showLabel": true, "donut": true, "donutWidth": 20}'></div>
In your controller:
angular.module('demo', [])
.controller('HomeController', function($scope) {
$scope.pie_data = {
series: [ 2, 3, 4]
};
});
##Demo View demo page that shaw a simple donut chart with animation: demo
##Todo Enhancements
- bind the mousedown event to have an interactive chart
- tooltip option on the chart items
- extend the animation that now is in the directive, to have a linked function that is responsibile for the animation in the controller