Angular 2 TypeScript Support in Gauge.js #128

jatin-optimus · 2017-03-22T18:56:04Z

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

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 · 2017-03-22T23:48:05Z

@bernii @jtokoph Please shed some light on this.

jtokoph · 2017-03-23T02:54:52Z

Was I mentioned on accident?

jatin-optimus · 2017-03-23T03:04:17Z

@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 · 2017-03-23T05:54:20Z

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 · 2017-04-28T15:43:46Z

I hope someone will provide this!!!

KANekT · 2017-12-14T06:35:25Z

Any update for this issue ?

KANekT · 2017-12-14T11:30:04Z

Or my bee version on TypeScript ?

vinothvarun94 · 2018-06-05T11:06:37Z

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(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 · 2018-06-11T07:50:39Z

@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 · 2018-06-12T09:15:00Z

you have to use (gauge_1) @ViewChild variable only for creating guage .. ie..
this.Gauge_1 = new Gauge(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 · 2018-06-12T10:15:15Z

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 · 2018-06-13T13:52:39Z

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 · 2018-10-29T09:54:11Z

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

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

reza-iranmanesh · 2020-05-25T00:29:48Z

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

austenstone · 2021-08-24T18:09:25Z

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 · 2022-02-08T10:44:20Z

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 · 2022-02-08T14:05:36Z

If you need types here is a fork #246. Seems the owner of gauge.js has been absent or not interested in TS.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 2 TypeScript Support in Gauge.js #128

Angular 2 TypeScript Support in Gauge.js #128

jatin-optimus commented Mar 22, 2017 •

edited

Loading

jatin-optimus commented Mar 22, 2017

jtokoph commented Mar 23, 2017

jatin-optimus commented Mar 23, 2017

rajeshv-optimus commented Mar 23, 2017

mmenik commented Apr 28, 2017

KANekT commented Dec 14, 2017

KANekT commented Dec 14, 2017

vinothvarun94 commented Jun 5, 2018 •

edited

Loading

theripper0089 commented Jun 11, 2018

vinothvarun94 commented Jun 12, 2018 •

edited

Loading

theripper0089 commented Jun 12, 2018 •

edited

Loading

vinothvarun94 commented Jun 13, 2018

WangJiaoJo commented Oct 29, 2018

reza-iranmanesh commented May 25, 2020

austenstone commented Aug 24, 2021

daniol commented Feb 8, 2022 •

edited

Loading

austenstone commented Feb 8, 2022

Angular 2 TypeScript Support in Gauge.js #128

Angular 2 TypeScript Support in Gauge.js #128

Comments

jatin-optimus commented Mar 22, 2017 • edited Loading

jatin-optimus commented Mar 22, 2017

jtokoph commented Mar 23, 2017

jatin-optimus commented Mar 23, 2017

rajeshv-optimus commented Mar 23, 2017

mmenik commented Apr 28, 2017

KANekT commented Dec 14, 2017

KANekT commented Dec 14, 2017

vinothvarun94 commented Jun 5, 2018 • edited Loading

theripper0089 commented Jun 11, 2018

vinothvarun94 commented Jun 12, 2018 • edited Loading

theripper0089 commented Jun 12, 2018 • edited Loading

vinothvarun94 commented Jun 13, 2018

WangJiaoJo commented Oct 29, 2018

reza-iranmanesh commented May 25, 2020

austenstone commented Aug 24, 2021

Install

gaugejs.component.ts

gaugejs.component.html

gaugejs.component.scss

daniol commented Feb 8, 2022 • edited Loading

Install

gaugejs.component.ts

gaugejs.component.html

gaugejs.component.scss

austenstone commented Feb 8, 2022

jatin-optimus commented Mar 22, 2017 •

edited

Loading

vinothvarun94 commented Jun 5, 2018 •

edited

Loading

vinothvarun94 commented Jun 12, 2018 •

edited

Loading

theripper0089 commented Jun 12, 2018 •

edited

Loading

daniol commented Feb 8, 2022 •

edited

Loading