Angular 2 TypeScript Support in Gauge.js

[jatin-optimus]

Hello,

**Please provide any example/guide in reference to angular2 (typescript) with respect to gauge.js support if any.

also inform if there is no such reference in accordance with typescript till now.**

Moreover, i observed that there is no reference found for this speedometer in angular2(typescript).

https://groups.google.com/forum/#!msg/getgauge/FndNjpuH9Rk/bHCMx5LyBgAJ

After searching, i found this -- PLEASE CONFIRM ON THIS

1. Typescript support - we do not have typescript support with gauge presently, there is Javascript support via the gauge-js plugin (it is community maintained). It would be wonderful to bring in Typescript support

[jatin-optimus]

@bernii @jtokoph Please shed some light on this.

[jtokoph]

Was I mentioned on accident?

[jatin-optimus]

@jtokoph : i have seen u active in few issues.If you could help that would be highly appreciated.

@bernii : Please reply for the Angular2 typescript support.

[rajeshv-optimus]

Hello @bernii ,

*Please provide any example/guide in reference to angular2 (typescript) with respect to gauge.js support if any.

also inform if this is supported via typescript in angular2

[mmenik]

I hope someone will provide this!!!

[KANekT]

Any update for this issue ?

[KANekT]

Or my bee version on TypeScript ?

[vinothvarun94]

Here is the way to use guage.js in angular2+,

HTML:

<div>
<canvas id="gauge_1" #gauge_1></canvas>
 </div>

In ts: import 'src/assets/js/gauge.js'; declare var Gauge: any;```

@ViewChild('gauge_1') gauge_1: ElementRef; Gauge_1: any; opts = { angle: 0.20, // The span of the gauge arc lineWidth: 0.34, // The line thickness radiusScale: 0.66, // 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 staticLabels: { font: "15px sans-serif", // Specifies font labels: [0, 35, 60], // Print labels at these values color: "#000000", // Optional: Label text color fractionDigits: 0 // Optional: Numerical precision. 0=round off. }, staticZones: [ { strokeStyle: "#a5d1f7", min: 0, max: 35 }, // Red from 100 to 130 { strokeStyle: "#1861a0", min: 35, max: 60 } ], }; this.Gauge_1 = new Gauge(<HTMLCanvasElement>this.gauge_1.nativeElement).setOptions(this.opts); this.Gauge_1.maxValue = 3000; // set max gauge value this.Gauge_1.setMinValue(0); // Prefer setter over gauge.minValue = 0 this.Gauge_1.animationSpeed = 35; // set animation speed (32 is default value) this.Gauge_1.set(1500); // set actual value this.Gauge_1.setTextField(document.getElementById("gauge1-txt"));

[theripper0089]

@vinothvarun94 hi, i'm trying to use your solution, i make my ts in this way:

import {Component, ViewChild, ElementRef} from '@angular/core';

import './gauge.min.js';
declare var Gauge: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Mappa ambiti applicativi e modelli dati';
  @ViewChild('gauge_1') gauge_1: ElementRef;

  opts = {
    angle: 0.20, // The span of the gauge arc
    lineWidth: 0.34, // The line thickness
    radiusScale: 0.66, // 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
    staticLabels: {
    font: "15px sans-serif", // Specifies font
    labels: [0, 35, 60], // Print labels at these values
    color: "#000000", // Optional: Label text color
    fractionDigits: 0 // Optional: Numerical precision. 0=round off.
    }, staticZones: [
    { strokeStyle: "#a5d1f7", min: 0, max: 35 }, // Red from 100 to 130
    { strokeStyle: "#1861a0", min: 35, max: 60 }
    ],
    };

    Gauge: any;
  constructor() { 
    

this.gauge_1 = new Gauge(this.gauge_1.nativeElement).setOptions(this.opts);
this.gauge_1.maxValue = 3000; // set max gauge value
this.gauge_1.setMinValue(0); // Prefer setter over gauge.minValue = 0
this.gauge_1.animationSpeed = 35; // set animation speed (32 is default value)
this.gauge_1.set(1500); // set actual value
this.gauge_1.setTextField(document.getElementById("gauge1-txt"));
  }
 
}

but in this way doesn't work, what i'm doing wrong?

[vinothvarun94]

you have to use (gauge_1) @ViewChild variable only for creating guage .. ie.. this.Gauge_1 = new Gauge(<HTMLCanvasElement>this.gauge_1.nativeElement).setOptions(this.opts1); // create sexy gauge!

for all other than that you have to use .. our newly declared variable..(Gauge_1) this.Gauge_1.maxValue = 3000; // set max gauge value this.Gauge_1.setMinValue(0); // Prefer setter over gauge.minValue = 0 this.Gauge_1.animationSpeed = 35; // set animation speed (32 is default value) this.Gauge_1.set(1500); // set actual value this.Gauge_1.setTextField(document.getElementById("gauge1-txt"));

[theripper0089]

i made what you say but now i have this error 'ERROR ReferenceError: Gauge is not defined', i made another mistake? this is my code:

import {Component, ViewChild, ElementRef} from '@angular/core';

import './gauge.js';
declare var Gauge: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('gauge_1') gauge_1: ElementRef;

  title = 'Mappa ambiti applicativi e modelli dati';

  opts = {
    angle: 0.20, // The span of the gauge arc
    lineWidth: 0.34, // The line thickness
    radiusScale: 0.66, // 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
    staticLabels: {
    font: "15px sans-serif", // Specifies font
    labels: [0, 35, 60], // Print labels at these values
    color: "#000000", // Optional: Label text color
    fractionDigits: 0 // Optional: Numerical precision. 0=round off.
    }, staticZones: [
    { strokeStyle: "#a5d1f7", min: 0, max: 35 }, // Red from 100 to 130
    { strokeStyle: "#1861a0", min: 35, max: 60 }
    ],
    };

    Gauge_1: any;

  constructor() { 
    this.Gauge_1 = new Gauge(this.gauge_1.nativeElement).setOptions(this.opts); 

this.Gauge_1.maxValue = 3000; // set max gauge value
this.Gauge_1.setMinValue(0); // Prefer setter over gauge.minValue = 0
this.Gauge_1.animationSpeed = 35; // set animation speed (32 is default value)
this.Gauge_1.set(1500); // set actual value
this.Gauge_1.setTextField(document.getElementById("gauge1-txt"));

  }
 
} 

[vinothvarun94]

try.. npm i gauge-js and refer it in scripts array "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", "./node_modules/gaugeJS/dist/gauge.js"

        ]

[WangJiaoJo]

import { Gauge } from 'gaugeJS/dist/gauge.min.js';

Adding this would work for issue "'Gauge' is not defined".

[reza-iranmanesh]

Just to add to @WangJiaoJo's comment; you need to: npm i --save gaugeJS

[austenstone]

Here's a full example using Angular 12:

Install

npm i gaugeJS --save

gaugejs.component.ts

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Gauge } from "gaugeJS";

@Component({
  selector: 'app-gaugejs',
  templateUrl: './gaugejs.component.html',
  styleUrls: ['./gaugejs.component.scss']
})
export class GaugejsComponent implements OnInit, AfterViewInit {
  @ViewChild('foo') el: ElementRef;
  gauge: any;
  opts: any;

  ngOnInit(): void {
    this.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
    };
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      var target = this.el.nativeElement as HTMLElement; // your canvas element
      this.gauge = new Gauge(target).setOptions(this.opts); // create sexy gauge!
      this.gauge.setMaxValue(100); // set max gauge value
      this.gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
      this.gauge.animationSpeed = 32; // set animation speed (32 is default value)
      this.gauge.set(1250); // set actual value
    }, 100)
  }
}

gaugejs.component.html

<canvas style="width:100%;" #foo></canvas>

gaugejs.component.scss

:host {
  display: block;
  width: 100%;
  max-height: 100%;
}

canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 100%;
  max-width: 100%;
}

[daniol]

The solution from @austenstone shows the direction but does not work on Angular 13, it does not even compile. Here is a slightly modified working version:

Install

npm i gaugeJS --save
npm i --save-dev @types/gaugejs

gaugejs.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { Gauge, GaugeOptions } from "gaugeJS";

@Component({
  selector: 'app-gaugejs',
  templateUrl: './gaugejs.component.html',
  styleUrls: ['./gaugejs.component.scss']
})
export class GaugejsComponent implements AfterViewInit {
  @ViewChild('canvasEl') el?: ElementRef<HTMLCanvasElement>;
  gauge?: Gauge;
  opts?: GaugeOptions;

  constructor() {
    this.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: true,     // If false, max value increases automatically if value > maxValue
      limitMin: true,    // 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
    };
  }

  ngAfterViewInit(): void {
    if (this.el && this.el.nativeElement) {
      this.gauge = new Gauge(this.el.nativeElement).setOptions(this.opts); // create sexy gauge!

      this.gauge.setMinValue(0); // set min. gauge value
      this.gauge.maxValue = 100; // set max. gauge value

      this.gauge.animationSpeed = 32; // set animation speed (32 is default value)
      this.gauge.set(60); // set actual value
    }
  }
}

gaugejs.component.html

<canvas #canvasEl></canvas>

gaugejs.component.scss

canvas {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

[austenstone]

If you need types here is a fork https://github.com/bernii/gauge.js/pull/246. Seems the owner of gauge.js has been absent or not interested in TS.