Using text labels on gauges

[jihoonlee1980]

Can I use a text label on a gauge?

I want to draw directly in the canvas. But I am using npm.

So, I forked npm and tried the following: But it does not work

This is my modified code.

GaugePointer.prototype.render = function() {
      var angle, centerX, centerY, endX, endY, imgX, imgY, startX, startY, x, y;
      angle = this.gauge.getAngle.call(this, this.displayedValue);
      centerX = this.canvas.width / 2;
      centerY = this.canvas.height * 0.9;
      x = Math.round(this.length * Math.cos(angle));
      y = Math.round(this.length * Math.sin(angle));
      startX = Math.round(this.strokeWidth * Math.cos(angle - Math.PI / 2));
      startY = Math.round(this.strokeWidth * Math.sin(angle - Math.PI / 2));
      endX = Math.round(this.strokeWidth * Math.cos(angle + Math.PI / 2));
      endY = Math.round(this.strokeWidth * Math.sin(angle + Math.PI / 2));
      this.ctx.beginPath();
      this.ctx.fillStyle = this.options.color;
      this.ctx.arc(0, 0, this.strokeWidth, 0, Math.PI * 2, false);
      this.ctx.fill();
      this.ctx.beginPath();
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(x, y);
      this.ctx.lineTo(endX, endY);
      this.ctx.fill();

      /* ---------- Here!!!! ------- */
      this.ctx.font = this.ctx.font.replace(/\d+px/, "16px");      
      this.ctx.fillText("Minimum", centerX / 4 - 12, this.canvas.height - 9);
      this.ctx.fillText("Maximum", centerX + (centerX / 2) + 12 - 15, this.canvas.height - 9);

      if (this.img) {
        imgX = Math.round(this.img.width * this.options.iconScale);
        imgY = Math.round(this.img.height * this.options.iconScale);
        this.ctx.save();
        this.ctx.translate(x, y);
        this.ctx.rotate(angle + Math.PI / 180.0 * (90 + this.options.iconAngle));
        this.ctx.drawImage(this.img, -imgX / 2, -imgY / 2, imgX, imgY);
        return this.ctx.restore();
      }

      return this.ctx.fill();
    };

Example I think

[pgbezerra]

The same but inside of the gaude:

this.ctx.font="bold 22px sans-serif";
this.ctx.fillStyle = 'white';
this.ctx.fillText('Ruim', -190, -150);
this.ctx.fillText('Regular', 30, -210);
this.ctx.fillText('Bom', 170, -125);
this.ctx.fillText('Ótimo', 200, -30);

[talk2cerlin]

@paulobezerr How did you manage to show percentage instead of number?

[pgbezerra]

@talk2cerlin, I have manually added + '%' in fillText.

this.ctx.fillText(
  formatNumber(value.label, staticLabels.fractionDigits) + '%',
  0,
  -radius - this.lineWidth / 2
);

[AlphaSierraHotel]

@paulobezerr How did you manage to show percentage instead of number?

See https://github.com/bernii/gauge.js/issues/4#issuecomment-7761988 for an example of how to do this. I updated it to also account for the minimum value. My use case is a gauge that shows battery voltage (in millivolts) with a label that represents it as a percentage value with 2.8 volts = 0% and 3.6 volts = 100%. Here's my take on it.

var gauge = new Gauge(target).setOptions(opts);

gauge.maxValue = 3600;
gauge.setMinValue(2800);

var textRenderer = new TextRenderer(document.getElementById("preview-textfield"))

textRenderer.render = function(gauge){
   percentage = (gauge.displayedValue-gauge.minValue) / (gauge.maxValue-gauge.minValue)
   this.el.innerHTML = (percentage * 100).toFixed(2) + "%"
};
gauge.setTextField(textRenderer);

[Festen78]

@paulobezerr Hello, I try to implement this gauge like you done with text inside, but with no success. I think i modify the code in the wrong position. Can you please precise where exactly in the code and what to change? thank you!

[pgbezerra]

I move out from the company that has this change. Maybe @raphaelneumann can help you.