Change the ProgressBar color based on dynamic data for EasyPieCharts

Question

I am using easypiecharts in angular. I am trying to add an attribute(data-statusId) to the markup and use that in js to change the color of the progress bar. When data-opt= 8, it should turn to grey or else should be green.But my condition is failing all the time because, greyBar value is returned as "undefined" all the time.

Attached the screenshots for reference. I need to access the value under dataset for "opt".

.directive('isLoaded', function () {
    return {
        restrict: 'A', //Attribute type
        link: function (scope, elements, arguments) {
            ProgressMeter($('#inprogress-card').find('.progress-icon'), false);
        }
    }
});
function Meter($ele, isPopUp) {
    setTimeout(function () {
     if (isPopUp && $ele.find('canvas').length > 0) {
       $ele.data('easyPieChart').update(0);
       $ele.data('easyPieChart').update($ele.attr('data-percent'));
     }
     else {         
        $ele.easyPieChart({
            easing: 'easeOutBounce',
            scaleColor: false,
            lineWidth: 4,
            trackColor: '#CCCCCC',
            barColor: function () {
            var greyBar = $ele.data('opt');
                if (typeof(greyBar) != 'undefined')
                    return '#44AD3A'
                else
                    return '#989798'
            },
            lineCap: 'round',
            onStep: function (from, to, percent) {
            }
        });
     }
    }, 100);
}`

HTML:

<div class="progress-icon" data-opt="{{list.Status}}" data-percent=" {{ (20/30)* 100)}} ">

Where is `ele` coming from on this line: `var greyBar = $(ele).data('opt');`? I see `$ele` but not `ele`. Shouldn't you be able to just do `var greyBar = $ele.data('opt');`? — Zach, Oct 12 '16 at 20:47
Ok, my next question is... where is `opt` coming from on the next line `typeof(opt)`? You get `greyBar` but I don't see you use it. :) — Zach, Oct 12 '16 at 20:51
I changed some variable names to post here for better understanding but i missed in few places. — Priya Payyavula, Oct 12 '16 at 20:55
Thanks for correcting. I got the value passed to greyBar.. Whoooa :) :) — Priya Payyavula, Oct 12 '16 at 20:57
will .data gives the 1st value? or will it loop thru all the elements in it? — Priya Payyavula, Oct 13 '16 at 14:52
According to [the documentation](https://api.jquery.com/data/#data2) it _Returns the value at the named data store for the first element in the jQuery collection_. So just for the first object. You'll need an each/foreach to loop through. — Zach, Oct 13 '16 at 19:45

score 1 · Accepted Answer · answered Oct 26 '16 at 19:29

For some how, I was facing issues with the data-opt, . I used isolated-scope instead. I added "opt={{list.Status}}" to the HTML view and then in js, i added scope: {opt:'@'}. And it worked!!

HTML,

<div ng-click="openModal($event,list,id)" opt="{{list.Status}}">
    <div class="progress-icon" data-percent=" {{ (20/30)* 100)}} ">
</div>

js:

.directive('isLoaded', function () {
        return {
            restrict: 'A',
            scope:{
               opt:'@' //*Added this* 
            }
            link: function (scope, elements, arguments) {
               if(scope.opt!=8)
                ProgressMeter($('#inprogress-card').find('.progress-icon'), false,'#44AD3A');
               else
                ProgressMeter($('#inprogress-card').find('.progress-icon'), false,'#989798');
            }
        }
    });
    function Meter($ele, isPopUp) {
        setTimeout(function () {
         if (isPopUp && $ele.find('canvas').length > 0) {
           $ele.data('easyPieChart').update(0);
           $ele.data('easyPieChart').update($ele.attr('data-percent'));
         }
         else {         
            $ele.easyPieChart({
                easing: 'easeOutBounce',
                scaleColor: false,
                lineWidth: 4,
                trackColor: '#CCCCCC',
                barColor: function () {
                var greyBar = $ele.data('opt');
                    if (typeof(greyBar) != 'undefined')
                        return '#44AD3A'
                    else
                        return '#989798'
                },
                lineCap: 'round',
                onStep: function (from, to, percent) {
                }
            });
         }
        }, 100);
    }`

Change the ProgressBar color based on dynamic data for EasyPieCharts

1 Answers1