sparkline chart using angularjs directive

The Table of context

1. HTML code sample
2. AngularJs code sample

HTML code sample for sparkline chart

1 2 3 4 5	<div ng-app="SparkLineChartApp">     <div ng-controller="sparkLineChartCtrl">         <SparkLineChart data="{{ConnectionFlowByMonths}}"></SparkLineChart>     </div>      </div>

<div ng-app="SparkLineChartApp">
    <div ng-controller="sparkLineChartCtrl">
        <SparkLineChart data="{{ConnectionFlowByMonths}}"></SparkLineChart> 
    </div>      
</div>

AngularJs code sample for sparkline chart

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

var app = angular.module('SparkLineChartApp', []); app.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' });                 });             };         }     }; }); app.service("sparkLineChartService", function myfunction($http) {     this.getConnectionFlow = function (Id) {         return $http({             method: 'GET',             url: 'http://localhost:8081/API/Connect/SubscribersLast12Months/' + Id         });     }; }); app.controller('sparkLineChartCtrl', function ($scope, sparkLineChartService) {     $scope.ConnectionFlowByMonths = null;     //ConnectionFlow function     $scope.ConnectionFlow = function () {         var Ids = Session().companyId;                   sparkLineChartService.getConnectionFlow(Ids)         .then(function (cFlow) {             var months = 0;                        for (var i = 0; i < cFlow.data.length; i++) {                 months = months + "," + cFlow.data[0].Month;             }                        $scope.ConnectionFlowByMonths = months;         });     }; });

var app = angular.module('SparkLineChartApp', []);

app.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' });
                });
            };
        }
    };
});

app.service("sparkLineChartService", function myfunction($http) {
    this.getConnectionFlow = function (Id) {
        return $http({
            method: 'GET',
            url: 'http://localhost:8081/API/Connect/SubscribersLast12Months/' + Id
        });
    };
});

app.controller('sparkLineChartCtrl', function ($scope, sparkLineChartService) {
    $scope.ConnectionFlowByMonths = null;

    //ConnectionFlow function
    $scope.ConnectionFlow = function () {
        var Ids = Session().companyId;
        
        sparkLineChartService.getConnectionFlow(Ids)
        .then(function (cFlow) {
            var months = 0;            
            for (var i = 0; i < cFlow.data.length; i++) {
                months = months + "," + cFlow.data[0].Month;
            }            
            $scope.ConnectionFlowByMonths = months;
        });
    };
});