1

I'm trying to add a Gauge using the Gauge.js plugin. I've seen elsewhere on the Exchange that this library is compatible with the Locker Service so I'm not sure if the issue is stemming from there. (https://salesforce.stackexchange.com/a/162226/75565) Whenever I open the page I get this error and no gauge:

 [a is not a constructor]

This is my HTML file:

<template>
    <canvas 
        class='gauge'
        width='300'
        height='150'
        lwc:dom="manual">
</canvas>
</template>

And this is my Javascript file:

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import Gauge from '@salesforce/resourceUrl/gauge';

export default class DataQualityGauge extends LightningElement {

gaugeInitialized = false;

renderedCallback() {
    if (this.gaugeInitialized) {
        return;
    }
    this.gaugeInitialized = true;

    loadScript(this, Gauge).then(() =>{this.initializeGauge()})
}

initializeGauge() {
    var opts = {
        angle: 0.1,
        lineWidth: 0.2, // The line thickness
        radiusScale: 0.9,
      };

    var ctx = this.template.querySelector(".gauge");
    var g = new Gauge(ctx).setOptions(opts);

    g.maxValue = 10; // set max gauge value
    g.setMinValue(0);
    g.animationSpeed = 1; // set the animation speed. 1 is Instant, 100 is slow.
    g.set(5); // set actual value
    }
}

I'm sure loadScript is working successfully, as the function in the promise is firing, I'm just not sure why I'm getting this error and no gauge.

Some other details:

  1. I'm using gauge.min.js from https://bernii.github.io/gauge.js/dist/gauge.min.js, it is not inside any archive/directory.

  2. When I console.log Gauge in the initializeGauge function, it returns the URL to the resource.

1 Answer 1

1

Please try using new window.Gauge(ctx).setOptions(opts) instead of using new Gauge(), that should work. I was able to get it working in LWC by adding the below snippet to your boilerplate code.

var opts = {
            angle: 0.15, // The span of the gauge arc
            lineWidth: 0.44, // The line thickness
            radiusScale: 1, // Relative radius
            pointer: {
              length: 0.6, // // Relative to gauge radius
              strokeWidth: 0.035, // The thickness
              color: '#000000' // Fill color
            },
            limitMax: false,     // If false, max value increases automatically if value > maxValue
            limitMin: false,     // If true, the min value of the gauge will be fixed
            colorStart: '#6FADCF',   // Colors
            colorStop: '#8FC0DA',    // just experiment with them
            strokeColor: '#E0E0E0',  // to see which ones work best for you
            generateGradient: true,
            highDpiSupport: true,     // High resolution support
            
          };
          const canvas2 = document.createElement('canvas'); 
          this.template.querySelector('div.gauge').appendChild(canvas2);// your canvas element
          var gauge = new window.Gauge(canvas2).setOptions(opts); // create sexy gauge!
          gauge.maxValue = 3000; // set max gauge value
          gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
          gauge.animationSpeed = 32; // set animation speed (32 is default value)
          gauge.set(1250); // set actual value

You can look at the example mentioned in lwc-recipes app where they have done something similar with Charts JS.

Salesforce Example for Charts JS

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .