search

naikus / svg-gauge

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

Dynamic setMaxValue #51

Closed PaoloVi closed 2 years ago

PaoloVi commented 3 years ago

Can be setMaxValue dynamic like setValueAnimated or setValue ?

luasenvy commented 3 years ago

image

Gauge instance has setMaxValue ;)

naikus commented 3 years ago

Hi @PaoloVIP You can set the max value dynamically and two things will happen:

  1. The guage's current dial will be adjusted accordingly (the colored bar)
  2. It will not be animated and will update in a single frame

Hence it'd be a good idea to show the current and max value both as part of the label using the label function

var max = getMaxFromSomewhere();
var gauge7 = Gauge(
  document.getElementById("gauge7"), {
    max: max,
    dialStartAngle: -90,
    dialEndAngle: -90.001,
    value: 100,
    showValue: true,
    label: function(value) {
      return `${Math.round(value * 100) / 100} / ${max}`;
    }
  }
);