Angular directive for jQuery sparkline

gistfile1.txt

// Requires jQuery from http://jquery.com/
// and jQuerySparklines from http://omnipotent.net/jquery.sparkline

// AngularJS directives for jquery sparkline
angular.module('sparkline', []);
 
angular.module('sparkline')
    .directive('jqSparkline', [function () {
        'use strict';
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attrs, ngModel) {
 
                 var opts={};
                 //TODO: Use $eval to get the object
                opts.type = attrs.type || 'line';

                scope.$watch(attrs.ngModel, function () {
                    render();
                });
                
                scope.$watch(attrs.opts, function(){
                  render();
                }
                  );
                var render = function () {
                    var model;
                    if(attrs.opts) angular.extend(opts, angular.fromJson(attrs.opts));
                    console.log(opts);
                    // Trim trailing comma if we are a string
                    angular.isString(ngModel.$viewValue) ? model = ngModel.$viewValue.replace(/(^,)|(,$)/g, "") : model = ngModel.$viewValue;
                    var data;
                    // Make sure we have an array of numbers
                    angular.isArray(model) ? data = model : data = model.split(',');
                    $(elem).sparkline(data, opts);
                };
            }
        }
    }]);

This is great! But how can I use this directive to create a Composite inline graph? For example two line in one graph. I tried many way but failed. Thanks

Sample image:

In case of composite sparkline:

function compositeSparkline(): ng.IDirective {

    function link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) {
        var getOptions = () => {
            var options = {
                chart1: angular.extend({ type: 'line', data: [] }, scope.$eval(attrs['chart1'])),
                chart2: angular.extend({ type: 'line', data: [] }, scope.$eval(attrs['chart2']))
            }

            return options;
        };

        var render = () => {
            var opts = getOptions();

            // draw chart1
            (<any>jQuery(element)).sparkline(opts.chart1.data, opts.chart1);

            // draw chart2
            (<any>jQuery(element)).sparkline(opts.chart2.data, opts.chart2);
        };

        // Watch for changes to the directives options
        scope.$watch(getOptions, render, true);

        render();
    }

    return {
        restrict: 'A',
        scope: {},
        link: link
    };
}

angular.module('sparkline').directive('ngCompositeSparkline', compositeSparkline);

It is less flexible because you need to pass arrays of integer for chart1 and chart2 options into the directive... But it is just a starting point for the extensions

May i know where can i find the implementation code? Its a big help.

+1

May I know how to make this work for angular 4, thanks in advance.