How to Create Sparklines Directive in AngularJs
In this example I am showing sparklines with the help of directives.
Plunker URL - http://plnkr.co/edit/YsfaUx?p=preview
index.html
-----------------------------------------------------------------------------------------
<!DOCTYPE html>app.js
<html ng-app="SparkLineApp">
<head>
<title>Use JQuery Sparklines in AngularJs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script src="app.js"></script>
</head>
<body>
JQuery Sparklines with AngularJs
<div ng-controller="sparkLineController">
<div style="width:200px;">
<sparklinechart data="{{Customers}}"></sparklinechart>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
var sparkApp = angular.module('SparkLineApp', []);
sparkApp.directive("sparklinechart", function () {
return {
restrict: "E",
scope: {
data: "@"
},
compile: function (tElement, tAttrs, transclude) {
tElement.replaceWith("<span>" + tAttrs.data + "</span>");
return function (scope, element, attrs) {
attrs.$observe("data", function (newValue) {
element.html(newValue);
element.sparkline('html', { type: 'line', width: '96%', height: '80px', barWidth: 11, barColor: 'blue' });
});
};
}
};
});
sparkApp.controller('sparkLineController', function ($scope) {
$scope.Customers = "4,6,8,10,5";
});
Thanks for this post. I used the same directive but am having issues in Chrome only, see question on SO:
ReplyDeletehttp://stackoverflow.com/questions/42271572/odd-angularjs-1-5-behaviour-in-chrome-of-nested-directive-in-component
Any help greatly appreciated. Ajay