javascriptjqueryangularjsjqlite

Change the ProgressBar color based on dynamic data for EasyPieCharts

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

enter image description herestrong text

.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)}} ">
Solution

  • 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);
    }`