2

I am working on a project using the AngularJS version of the SmartAdmin Bootstrap template available here.

As part of the project, I need to add sparklines to several of the pages. I have it working just fine with static data such as:

<div id="revenue-chart" class="sparkline no-padding bg-dark-orange" 
     data-sparkline-type="line" 
     data-fill-color="#ffc65d" 
     data-sparkline-line-color="#ffc65d" 
     data-sparkline-spotradius="0" 
     data-sparkline-width="100%"
     data-sparkline-height="180px"> 90,60,50,75,30,42,19,100,99,76,89,65 </div>

The SmartAdmin template provides a way to implement the jQuery sparklines without direct manipulation of the javascript. That is the reason for the data-* directives.

However, when I switch the code to the following, it no longer displays a graph.

<div id="revenue-chart" class="sparkline no-padding bg-dark-orange" 
     data-sparkline-type="line" 
     data-fill-color="#ffc65d" 
     data-sparkline-line-color="#ffc65d" 
     data-sparkline-spotradius="0" 
     data-sparkline-width="100%"
     data-sparkline-height="180px"> {{revenue.points}} </div>

I added a <div> {{revenue.points}} </div> to the page, and it prints the values correctly, so I know the values are being passed to the page.

My guess is that the graph is being rendered before the Angular code is processed thereby showing no data for the graph to display. Is there some code I can add to trigger the graph to be redrawn after the Angular substitution occurs? Or is it possible to delay drawing the graph until after the substitution occurs?

I am new to both Angular and Bootstrap, so I am certain I am missing something, I just am not sure where else to look on this.

The template uses Bootstrap 3.3 and Angular 1.4.2.

Joseph
  • 1,988
  • 14
  • 21
  • Thank you for your solution. I have an another issue (https://stackoverflow.com/questions/37027755/unable-to-get-sparklines-working-in-angularjs-version-of-smartadmin-template) - after adding a sparkline with data-* .. it doesn't show up. I can see 90, 60, ... (no graph). Did i miss something? – Juri May 09 '16 at 13:23
  • @Joseph I am also having same issue for AngularJS4.X version, your solution is for version 1.X but I am using version 4.x. Did you get any response from `smartadmin` support on this issue? – user1653027 Sep 13 '17 at 21:32
  • @user1653027 Not that I recall though to be fair it was nearly two years ago. – Joseph Oct 14 '17 at 12:13

1 Answers1

1

I ended up creating a directive. The completed directive is:

"use strict";
angular.module('app.tvidash').directive('inlineRevenueChart', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            data: '='
        },
        link: function(scope, element, attrs, ngModel){
            var opts = {};

            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(',');

                $(element).sparkline(data, opts);
            };
        }
    }
});

And the accompanying div tag:

<div id="revenue-chart" class="db-chart sparkline no-padding bg-dark-orange" 
    inline-revenue-chart 
    ng-model="revenue.points" 
    opts="{{ {type: 'line', width: '100%', height: '180px', lineColor: '#ffc65d', fillColor: '#ffc65d', spotRadius: 0.1, drawNormalOnTop: false} }}"></div>

I am sure there is a better way to do the options, but this is working as I need it for now. Thanks to those that took a look.

Joseph
  • 1,988
  • 14
  • 21