ashish-chopra / angular-gauge

A reusable gauge directive for Angular 1.x apps and dashboards
https://ashish-chopra.github.io/angular-gauge/
MIT License
95 stars 36 forks source link

Scaleable Divisor. #29

Closed tbillion closed 7 years ago

tbillion commented 7 years ago

Im not a java programmer but i did take a crack at trying to get this to work ...

this guage in its current configuration is really only good for values 0 to 100 however it could be made much more useful for values over 100 if there was a settable property called a "divisor" basically it would take this line of code:

tail = head + (distance * value) / 100;

and replace it with this:

tail = head + (distance * value) / divisor;

i have tried to do this but i have no idea how to pass a variable from the browser to the java script, i have however been able to reverse engineer this to some extent to be updated via php. yay me...

i have attached the modified file, maybe it did it right maybe i did it wrong (more than likely) either way i cant get it to work . angularjs-gauge1.zip

obviously this would be good if you have any value over 100, for example and in my case in the arduino community we oftern measure tempuratures or rpms that are far higher than 100, and in that case we could map it to a value of percentage but then we wouldnt be able to see the actual value in the center of the gauge. with a divisor we would be able to scale the results, as long as the starting point is 0 the divisor would be the maximum value.

i have done this manually in the code and it didnt effect the functionality it actually does it quite well however i cant figure out how to use different instances of the script either or i would have just hardcoded 4 different versions of the script.

then again this feature could be the feature that sets yours apart from the rest. i was drawn to this because of the simplicity and with a simple command i could make it work with php.

example:

<?php echo "<ng-gauge type=\"{{'arch'}}\" divisor=\"100\" size=\"{{'150'}}\" thick=\"{{'3'}}\" label=\"{{'Alt. 1'}}\" append=\"{{''}}\" prepend=\"{{''}}\" cap=\"{{'round'}}\" foreground-color=\"{{'rgba(147, 0, 14, 1)'}}\" background-color=\"{{'rgba(89, 89, 89, 1)'}}\" value=\"".$row['ATach1']."\"></ng-gauge>"; ?>

ashish-chopra commented 7 years ago

Hi @tbillion,

You reverse engineered it correctly. It may not be working because of some mathematical equation.

Anyways, the use case that you have is to show value greater than 100. So for that do not use value attribute. Use used and total attributes. Why? You are right, value attribute only supports value between 0-100. used and total attribute will show the actual value of used on label, but gauge will be created as the percentage of used out of total.

For example:

<ng-gauge   used="156" total="500"
thick="10" type="arch" append="rpm" 
 foreground-color="rgba(147, 0, 14, 1)" background-color="rgba(89, 89, 89, 1)">
</ng-gauge>

gauge

For now, this will help you with your usecase. Just figure out what could be the maximum value rpm can get use that as total and the value that your platform returning for current time is sent to used attribute. It is also mentioned on the documentation here

And i very well got your point of making angular-gauge more usable for larger audience like for your usecase. Even i received similar pull requests few days back for same thing to support negative usecase using negateValue, displayValue etc. But the problem is i do not want to introduce custom attributes like negateValue, displayValue, divisor etc. I want to make it more general that can serve as many usecases as possible. But, yes you idea really helped in figuring out the mathematical equation in more depth.

So in next major release v2.0 i will introduce min, max and value attribute which can handle 0-100 case, greater than 100 use case as well as negative use case. And from API wise it will become more closer to HTML5 <meter> element MDN.

So try to use it the way i mentioned, do take an upgrade to 2.0 once it is available in few days.

Let me know, if it works. Ashish

ashish-chopra commented 7 years ago

@tbillion this issue has been addressed in v2.0.0. You may take an upgrade.