Struggling to implement sparklines for real-time data in the AngularJS adaptation of the SmartAdmin template

Question

Struggling to implement sparklines for real-time data in the AngularJS adaptation of the SmartAdmin template

Currently, I am embarking on a project that involves utilizing the AngularJS version of the SmartAdmin Bootstrap template foundhere.

Within this project scope, I am required to integrate sparklines into various pages. I have successfully implemented them with static data like so:

<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 feature in the SmartAdmin template facilitates the integration of jQuery sparklines without direct javascript manipulation through the use of data-* directives.

Upon switching the code to the following structure below, the graph ceases to display:

<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 appended

<div> {{revenue.points}} </div>

to the page which successfully prints the values, indicating the successful transfer of values to the page.

My speculation suggests that the rendering of the graph occurs before Angular code processing hence resulting in an absence of data for graphical representation. Is there any code snippet I can introduce to prompt the graph to redraw post Angular substitution? Alternatively, is it feasible to postpone the graph drawing until after substitution completion?

Being relatively new to Angular and Bootstrap, I acknowledge that there may be overlooking something crucial, although uncertain what other avenues to explore within this context.

This particular template integrates Bootstrap 3.3 and Angular 1.4.2.

javascript angularjs sparklines smartadmin

Answer 1

Answer №1

After much experimentation, I decided to create a custom directive for this purpose. Here is the final version of the directive:

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

Additionally, here is the corresponding HTML div tag that utilizes the directive:

<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>

Although there may be room for improvement in handling the options, this solution meets my current requirements effectively. Thank you to those who offered suggestions and assistance.

Answer 2

After much experimentation, I decided to create a custom directive for this purpose. Here is the final version of the directive:

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

Additionally, here is the corresponding HTML div tag that utilizes the directive:

<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>

Although there may be room for improvement in handling the options, this solution meets my current requirements effectively. Thank you to those who offered suggestions and assistance.

Struggling to implement sparklines for real-time data in the AngularJS adaptation of the SmartAdmin template

Answer №1

Similar questions

Combine two comma-separated strings in JavaScript to create an array of objects

The default expansion behavior of Google Material's ExpansionPanel for ReactJS is not working as expected

The Authorization header in POST and PATCH fetch requests is stripped by Typescript

An issue occurred with a malformed JSON string when attempting to pass JSON data from AngularJS

Rearrange the layout by dragging and dropping images to switch their places

Configuring bitfinex-api-node with Node.js to efficiently handle data from the websocket connection

Troubleshooting Images in a React Application Integrated with WordPress API

Reinitialize the bootstrap modal every time it is closed to ensure a fresh start and maintain consistent functionality

The significance of Token Details in Tokbox

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

Managing the clearing of a view component in React or Vue.js

How can I differentiate between an unreachable server and a user navigating away in a $.ajax callback function?

Angular Leaflet area selection feature

Display a string of text containing multiple interactive links

Show a loading icon as the synchronous Ajax request is being sent

Delete elements from a dynamic list

An HTML document may display a segment of a URL

Performing JSON data extraction and conversion using JavaScript

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your