If value is zero then background circle doesn't show up

samdanishaik commented 7 years ago

Hi,

I am using following code to show guage:

Majority of times the value "perc" is 0 in my case, so nothing shows up on the UI. I want to show the background circle (#ccc0bc) to show up without any filling with foreground color for value 0. Is this possible?

Please help.

ashish-chopra commented 7 years ago

Hi @samdanishaik ,

Make sure you are using the latest version 2.0.0. If not, then take an update and read the README document to slight changes in API. This would remove the major problems occurring in 1.x

In case, if it is still a problem, then as per my experimentation, when i bind a scope variable to value property of <ng-gauge> and it is undefined, then the gauge would not show up. However, if you initialize it with 0 then background rim of gauge will show up.

angular.controller('MyController', myController);

function myController() {
var vm = this;
vm.currentValue = 0;
}

<body ng-controller="MyController as m">
   <!-- this will show a rim with 0 value -->
   <ng-gauge value="m.currentValue"></ng-gauge>

<!-- this will not show the rim at all, because secondCurrentValue is undefined -->
    <ng-gauge value="m.secondCurrentValue"></ng-gauge>
</body>

Let me know if it is still an issue? May be paste some code to understand.

samdanishaik commented 7 years ago

You are right.. This works.. Thanks for the quick response

ashish-chopra commented 7 years ago

Thanks.

samdanishaik commented 7 years ago

Hi,

One more query on this.

I modify the guage value dynamically on the same screen/page on selection of an element from dropdown. Lets say by default, I have a process in 100%/50% completion state. Now if I change the dropdown to an element which has 0% completion then this doesnt refresh the guage.

In my controller this is the code I have:

$scope.perc = 0;

   onboardServices.getOpenOnboardingStatus($scope.process.processkey).then(function(response) {
        console.log("Status: ", JSON.stringify(response.data));
        $scope.obcase = response.data.items[0];
        $scope.perc = Math.round(($scope.obcase.complete_count/$scope.obcase.total_count)*100);
    },function(error) {
        alert("OB Status request failed. Please try again.");
    });

In html:

This happens only when binding the guage with 0% from any higher value. How can I fix this?

ashish-chopra / angular-gauge

If value is zero then background circle doesn't show up #36