Skip to content

Latest commit

 

History

History
47 lines (37 loc) · 1.31 KB

README.md

File metadata and controls

47 lines (37 loc) · 1.31 KB
Raw

angular-chartist

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