After experimenting with the jQuery Knob framework, I encountered challenges when trying to incorporate AngularJS dynamic values. As a result, I opted to create my own CSS-based arc/knobs.
The knob displays three values: minimum, maximum, and current value, all of which can vary dynamically. The color of the knob changes if the value goes beyond its designated range.
HTML:
<div class="{{updateColor()}} arc arc_start"></div>
JS:
function updateColor(){
if($scope.value > $scope.maximum){
return "arc_danger";
}
if($scope.value < $scope.minimum){
return "arc_gray";
}
return "arc_success";
}
If the value falls within the range, I aim to visually represent it using a small knob cursor, similar to the one found in the jQuery Knob library.
You can see an example of what I'm envisioning in this Plunkr demo: http://plnkr.co/edit/Zb8bVih4hireLwNS3bfc?p=preview