angular 2 support

[kodiraj]

hi,

I am having a angular 2 application.

i tried the following steps.i get Cannot find name 'Gauge'

require('./gauge.js');

var opts = { lines: 12, // The number of lines to draw angle: 0.15, // The length of each line lineWidth: 0.44, // The line thickness pointer: { length: 0.9, // The radius of the inner circle strokeWidth: 0.035 // The rotation offset }, colorStart: '#6FADCF', // Colors colorStop: '#8FC0DA', // just experiment with them strokeColor: '#E0E0E0' // to see which ones work best for you }; var target = document.getElementById('foo'); // your canvas element var gauge = new Gauge(target).setOptions(opts); // create sexy gauge! gauge.value = 1250; // set actual value gauge.maxValue = 3000; // set max gauge value

[kodiraj]

any help on this would be really appreciated

i am using angular 2 with webpack..

how to include this package and access in the componenet

[ThomasCrevoisier]

npm install gauge.js

and in your code

var Gauge = require('gauge.js');

nope ?

[kodiraj]

hi,

I added this,then when i try to

do

new Gauge(document.getelementbyid(#foo))

i get "Cannot find name ‘Gauge'"

On Sep 28, 2016, at 2:47 PM, Thomas Crevoisier [email protected] wrote:

npm install gauge.js and in your code

var Gauge = require('gauge.js'); nope ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bernii/gauge.js/issues/99#issuecomment-250115268, or mute the thread https://github.com/notifications/unsubscribe-auth/AKzpw0ZOnt2b_d6dGo8XdVlMW1jz7SQjks5qujCvgaJpZM4KHgWR.

[ThomasCrevoisier]

Could you provide a snippet of your code please ?

[VincentGijsen]

I gut stuck after:

var Gauge = require('gaugejs');

...

var t =document.getElementById('myId')
//t is always empty :(
  var target = document.getElementById('gauge-a')
   console.log("target: ", target)
   var gauge = new Gauge(target).setOptions(opts);

and loading the js via systemjs.config.js `

`

[ThomasCrevoisier]

@VincentGijsen Where is the element with the id myId ? We will probably need more info to see what's going wrong here :) Could you provide an example in a JSBin or something similar and share it here ?

[jatin-optimus]

@kodiraj : Hello, Were you able to deal this gauge via typescript (Angular 2).Please reply as ap. If yes, please provide the reference in accordance. Thanks

[VincentGijsen]

@ThomasCrevoisier. Sorry guys, lost track of this issue, and cannot recall if i've solve it, but probalby switch tot other library

[rajeshv-optimus]

@VincentGijsen : can we create like

I have created like

http://jsfiddle.net/jatin_optimus/v16wojq4/3/

[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.opts1); 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"));

[WangJiaoJo]

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

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