Open kodiraj opened 8 years ago
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
npm install gauge.js
and in your code
var Gauge = require('gauge.js');
nope ?
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 notifications@github.com 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.
Could you provide a snippet of your code please ?
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
`
`
@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 ?
@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
@ThomasCrevoisier. Sorry guys, lost track of this issue, and cannot recall if i've solve it, but probalby switch tot other library
@VincentGijsen : can we create like
I have created like
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(
import { Gauge } from 'gaugeJS/dist/gauge.min.js';
Adding this would work for issue "'Gauge' is not defined".
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