bernii / gauge.js Goto Github PK

Hi,

I was trying to set the minValue to a decimale point ( 0.2 ), it doesn't seem to like it .
Am I missing something ?

Thanks !
Federico

when the current value is 0, the canvas render two pointer,however,there should be one.

when values passed through parameters to the function the gauge renders and dissapers

I'd like to display the value of the gauge alongside the canvas, as in your preview. Are there instructions for this?

hello, i'm having trouble with ajax integration with the gauge, can someone help me ?

here's my code : http://www.developpez.net/forums/anocode.php?id=7c43c46774f4c49143477ad77b0f5ae8

and for the php :http://www.developpez.net/forums/anocode.php?id=3e3cc0a5dd16324d20557c22d31ad53b

thx a lot !

Look this jsfiddle http://jsfiddle.net/BRjnF/12/ , the needle make lots of loops before stopping.

Anyone have this problem ?

Hi there,

Just wondering whether this works on the iphone or the iOS ?

Would be awesome if you were able to change the colors based on the value selected - so it means you could have

0-25% - red
25%-50% - green
50%-75% - purple
etc

?

Very neat project, congrats.

what about a percentage rather than the actual gauge value ?

Dear Bernii,

I am using js gauge on many places in my application. Now i have to print a page top PDF. To accomplish that i have purchased the Winnovative Pdf Converter. It supports css, javascript etc. Everything prints fine in the page except the js gauge. It's totally not visible. Is there any chance this support will come in the near feature?

Thanks

Great Gauge really but i need some tweak with help of you.

I need some lines to display across the meter to make it look like speedo meter so please help me out how to display these lines.

secondly in Demo u are passing a parameter lines: 12 in options. but it seems like it is not worth for any where. so what it works please explain me.

Great code, thank you. How can I change the minimum value from 0 to 1,000? I was able to adjust the maximum value easily with:
gauge.maxValue = 3000; // set max gauge value

But when I tried
gauge.minValue = 1000; // set min gauge value
gauge.displayedValue = 1000; //initialize gauge value
the pointer went in crazy circles.

Here is a Fiddle: http://jsfiddle.net/BRjnF/

gauge size increase (Radius)

in Android Phones,there appears two pointers,one is at 0 level and another one at the value given.when no animation is given ,(i.e., animation speed -1),there appears only one pointer..
when this site is directly opened in android phones this two pointer issue is not there.

Hi,
Its really nice plugin, I like Very much.

The problem is when I chance start and end color of the Gauge http://bernii.github.io/gauge.js/ here, It wont change the start and end color. If I set start color as #CF170A(red) and end color as #2CCF13(green), it wont change. It works only on default color.

Thank you

Hello and congratulations on the excellent work. I do not seem to be able to have the background color(strokeColor) to work on the donut even when using your example with the sliders. Is this a browser issue or am I doing something wrong? (Google Chrome 22).

Hey, maintainer(s) of bernii/gauge.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library bernii/gauge.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "bernii/gauge.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

elements is very slow, so it draw take 2 min.

Hi,

Created 2 different gauge instances - one with the black pointer and one with the green one.
Received the 2 entities with the green pointer.

http://jsfiddle.net/pavelpolyakov/BsCL5/

If I change the strokeColor parameter, for example, then everything is ok, both gauge charts are different.

Is this a bug?

The JSON in the bower.json file is malformed as there is one extra comma in the main property.

"main": [
    "dist/gauge.js",
    "dist/gauge.min.js",
    "dist/gauge.coffee", <----- This comma
  ],

This fails the installation of the component with bower.

Just as a note, I tried using the 'gauge.min.js' that is on the scripts homepage. I've been scratching my head wondering why the colours weren't working. When I compiled the coffeescript version and used that instead, it worked perfect

Hello i've trouble to display the gauge can someone tel me what are going wrong on my code please? ( have replace here "< " with "( " to display the code)

thx

(html)
(head)
<script src="http://bernii.github.com/gauge.js/dist/gauge.js" type="text/javascript" language="javascript" script>

<script>
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
    color: '#000000' // Fill color
  },
  colorStart: '#6FADCF',   // Colors
  colorStop: '#8FC0DA',    // just experiment with them
  strokeColor: '#E0E0E0',   // to see which ones work best for you
  generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(1250); // set actual value
</script>
(head)

(body)

(canvas id="foo") (/canvas)
(/body)

(/html)

To use this for things like temperature it would need to support negative values. It would be a great update if you could set the start of the gauge somewhere beyond the bottom. This way you could use temperature and have 0°C in the middle of the gauge and negative to the left and positive temps to the right.

Hello, i use this gauge to count my visitor on my website, and i want to make the same animation like on your demo site : when value is going up, the gauge do an annimation . I've tried to use setInterval, myfunction, 5000) for example and the gauge is completly refresh but don not make any annimation. Can someone explain me how do make it possible, cause i'm on it since several weeks... thx

I would highly recommend you to add working sample without on-the-go customizations.

Hi,

commit 3e0a8d6 added high DPI support to gauge.js but it appears firefox 22 has deprecated mozBackingStorePixelRatio on the canvas 2d context and the code now does strange things on normal DPI devices.

When I send a query to the window for the device pixel ratio on my desktop I get [09:53:36.998] 1.0909091234207153 on firefox 23.0.1 and I get 1 on Chrome 29.0.1547.57.

I'm not sure what the right fix is for this issue, but I'm reporting it hoping that someone with more knowledge can solve it. Until that time, I'm just going to use the highDpiSupport = false flag in options.

Thanks.

Hello, i'm having trouble with ajax call httprequest. I put the response value on the gaugeObject.set. And there, all is ok, but when the value changing the gauge disapear. Do you know why?

I've same problem with responseText and xmlResponse, can somenone tel me how to make it possible please ?

there is my code :

http://jsfiddle.net/lechatz/8NkpV/

Thx for help !

Shouldn't the start and end colors go from the start of the line to the end of it?
Currently goes from the inner to the outter side of the progress bar. I think it would make more sense if was from start to finish.

I think because you've never tagged a release, it causes bower.js to fail when trying to load your package. It would be awesome if you could maintain a bower.js compatible package file.

Thanks

There seem to be a mistake on line 216
this.gauge.options.angle = .5;

this.gauge is not defined.

Did you mean ? :
this.options.angle = .5;

It happens when the angle value is > .5

On the background arc on the donut, there is a white border that is apparent.

Example: http://i.minus.com/i8TxS4zFkaPRN.png

by multiplying @lineWidth by 0.8 on the following line, the issue is fixed.

https://github.com/bernii/gauge.js/blob/gh-pages/dist/gauge.coffee#L358

@ctx.lineWidth = @lineWidth * 0.8

Fixed Example: http://i1.minus.com/iZdEDhXnpvuTM.png

EDIT: As you may have noticed- I changed the ends to be butt- perhaps add an option to choose either round or butt for the donut?

When I try to put two gauges on a page with different configurations the options for the second gauge overwrite the settings of the first gauge causing them to look the same. Here is a JSFiddle which shows this happening.

FireFox: http://screencast.com/t/RHPJg1V1miFz
Chrome: http://screencast.com/t/Y4Mn16sfwz
Does anyone have the same problem? That it only renderes good for chrome and IE and Firefox it set differnet with?

Will it be possible to configure as quarter instead of the half circle or circle?

Any hints on where to possible change this in the code?

Is there a way to stop this? I looked at the internals and it didn't seem to have any "stop" function. I'm running this in a meteor environment and trying to display it on multiple pages, but that seems to be causing complications with the old gauge object.

Any Help Regarding the issue will be appreciated.
I want to use the following Gauge Meter in all the browsers, but for some reasons I need to implement the meter in IE8 and Below.

What does the 'lines' option do/affect ? I've changed this value from one extreme to the other and don't see any effect on my gauge.

How hard to make the donut gauge display multiple series as concentric rings?

Good Morning!

I've been tinkering with this Gauge and it's a really nice implementation!

One question I had is whether or not it is possible to make it so that the color of the animating arc changes from color to color when it's within ranges instead of animating the RGB values.

So 0-33% = green; 34-66% = yellow; 67-100% = red

Is this possible?

Thanks in advance!
Brian

Hi Bernii -
Great work! We have a use-case that use the gauge to show the current value in comparison to a target value.. The target could be smaller or larger than the current value. If there is an option to add a marker to the gauge like in the following mock-up screen, it will help a lot..

Thanks

Tried to use the posted jquery plugin,

I tried:

// [set node to div element]
$node.gauge({
        lines: 12, // The number of lines to draw
        angle: 0, // The length of each line
        lineWidth: 0.42, // The line thickness
        pointer: {
          length: 0.76, // The radius of the inner circle
          strokeWidth: 0.086, // The rotation offset
          color: '#000000' // Fill color
        },
        limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
        colorStart: '#C6BCCF',   // Colors
        colorStop: '#7D4EDA',    // just experiment with them
        strokeColor: '#D2D0E0',   // to see which ones work best for you
        generateGradient: true,
        animationSpeed: 30,
        minValue: 1,
        maxValue: 10,
        currVal: val
});

and got:

Object # has no method 'getContext'

anyone else have this or similar issue?

I tested your homepage and the index html locally and am not able to get it to work on IE 8. Can you point out why that could be? Thanks!

Opening demo page in current version of Opera throws following error:

Uncaught exception: DOMException: SYNTAX_ERR

Error thrown at line 311, column 6 in <anonymous function: Gauge.prototype.render>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    grd.addColorStop(1, this.options.colorStop);
called from line 217, column 4 in update() in http://bernii.github.com/gauge.js/:
    demoGauge.render();
Uncaught exception: DOMException: SYNTAX_ERR

Error thrown at line 311, column 6 in <anonymous function: Gauge.prototype.render>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    grd.addColorStop(1, this.options.colorStop);
called from line 130, column 8 in <anonymous function: ValueUpdater.prototype.update>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    this.render();
called from line 422, column 8 in <anonymous function: run>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    if (elem.update())
called from line 31, column 10 in <anonymous function>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    return callback(currTime + timeToCall);
Uncaught exception: DOMException: SYNTAX_ERR

Error thrown at line 311, column 6 in <anonymous function: Gauge.prototype.render>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    grd.addColorStop(1, this.options.colorStop);
called from line 130, column 8 in <anonymous function: ValueUpdater.prototype.update>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    this.render();
called from line 422, column 8 in <anonymous function: run>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    if (elem.update())
called from line 31, column 10 in <anonymous function>() in http://bernii.github.com/gauge.js/dist/gauge.js:
    return callback(currTime + timeToCall);

Environment

browser: Opera/9.80 (X11; Linux x86_64; U; pl) Presto/2.10.289 Version/12.00 (Core 2.10.289)
os: Ubuntu x64 12.04

I wish to do a Donut gauge with pointer or if the arc of the Gauge type would be able to extend further like Donut and not sitting on a flat line. Just wondering if that's something achievable.

I found out that when the Gauge is initialized with a 0 value it is rendered like this:

But if I initialize it with another value and the set it to 0, it shows like this:

Is there any way to initialize it to show like this without having to set it first to a non-zero value?

Hi,

I am using your gauge in my mobile application. Will you please let me know Is it compatible with mobile. I am facing a issue in the pointer movement. When the pointer move for zero to specified position, It left the shadow of pointer, I have test the code web browser. It working fine in web browser.

Hello, is there a way to show decimal values on the gauge?, also there is a way to use a negative range?

Hi the gauge is brilliant.

I am trying to use this gauge to update dynamically when a number I have in the database changes.
The number I have in the database is the vote count. I want it so when the user adds a vote which is recorded, the gauge animates.

Can you give me an idea of how to go about this?

thanks!

Repro case here: http://jsfiddle.net/yXc5J/

The pointer is not lining up exactly in between the blue fill color and the grey stroke color.