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);
                };
            }
        }
    }]);

I don't suppose anyone has a JSFiddle of this working, do they?

If it helps anyone who uses coffeescript... Here is a version of the above that is working for me in a project:

  .directive "mySpark", ->
    restrict: "A"
    require: "ngModel"
    link: (scope, elem, attrs, ngModel) ->
      opts = {}

      opts.type = attrs.type || 'bar'
      opts.barColor = attrs.barColor || '#ffffff'
      opts.height = attrs.height || '35px'
      opts.barWidth = attrs.barWidth || '5px'
      opts.barSpacing = attrs.barSpacing || '2px'
      opts.zeroAxis = attrs.zeroAxis || 'false'

      scope.$watch attrs.ngModel, ((value) ->
        render()
      ), true

      scope.$watch attrs.opts, ((value) ->
        render()
      ), true

      render = () ->
        angular.extend opts, angular.fromJson(attrs.opts) if attrs.opts

        model = ngModel.$viewValue

        if angular.isArray(model)
          data = model
        else
          if model?
            data = model.split(",")
          else
            data = []

        $(elem).sparkline data, opts

Using it:

<div my-spark ng-model="daily_meter_uptime.scaled_historical_values"/>

used a deep watch on the values and it is working great. Thanks for taking the time to write this up!!

Thanks !! works like charm :)

Nice post!!!
It might help you!!
http://www.code-sample.com/2015/02/sparkline-chart-using-angularjs.html

Wrapping the jquery bit in $timeout() helped me.

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.