How to show sparklines in AngularJs

How to Show Sparklines in AngularJs
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>
<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>
 app.js
 -----------------------------------------------------------------------------------------
 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";

});



Previous
Next Post »
Thanks for your comment