naikus / svg-gauge

Minimalistic, animated SVG gauge. Zero dependencies
MIT License
319 stars 74 forks source link

Allow arbitrary values #28

Open slavkoja opened 6 years ago

slavkoja commented 6 years ago

Current implementation uses normalized values (constrained inside min/max), but this is not always desired. Eg. i use it for displaying sensor values, the gauges are constrained to display interested range, but values sometime goes out of these boundaries. All works OK, but the gauge stays to display normalized (min or max) value in label, which is false value of course.

Please, use normalized values only for internal calculations (drawing) and allow to show real values for label.

naikus commented 6 years ago

@slavkoja Okay, I'll start working on this. Thanks!

Scrandre commented 3 years ago

To achieve this effect (when the numbers in the center can go beyond the limits but the gauge doesn't break) you can modify the "normalize" function to:

        function normalize(value, min, limit) {
            var val = Number(value);
            // if (val > limit) return limit;
            // if (val < min) return min;
            return val;
        }

And the "getAngle" function to:

        function getAngle(percentage, gaugeSpanAngle) {
            percentage = (percentage > 100) ? 100 : (percentage < 0) ? 0 : percentage;
            return percentage * gaugeSpanAngle / 100;
        }