A reusable angular.js directive that will render a bar chart based upon data passed from the controller.
In your app config, add the directive as a dependancy injection like so
app = angular.module('appName', [
'ftBarChart'
]);
Use the directive by placing the code tag as follows:
<div bar-chart ng-model="data"></div>
Defaults are in place for all the chart configurations, however the following configurations may be added as attributes to the directive element.
chart-height="200"
chart-width="778"
chart-color="rgba(99,99,99,0.3)"
The data that fills the chart is passed by reference to the directive from the scope of the parent controller defined by the ng-model attribute.
// Controller File
app.controller('someCtrl', ['$scope', function($scope){
$scope.someData = [12, 15, 36, 8, 14, 20, 45, 18, 20, 27, 37, 48, 60, 30, 55, 80];
}]);
// View
<div bar-chart ng-model="someData"></div>