gauge.js icon indicating copy to clipboard operation
gauge.js copied to clipboard

Adding a Marker to the Gauge

Open mingchan opened this issue 11 years ago • 6 comments

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

untitled

mingchan avatar Aug 04 '13 02:08 mingchan

@mingchan have you found any solution for it?

nikhiln avatar Mar 05 '14 08:03 nikhiln

@nikhil - no, got side tracked to something else.

mingchan avatar Mar 07 '14 00:03 mingchan

Is there any update about this request?? Best Regards

dava2788 avatar Jan 26 '16 15:01 dava2788

+1

maverick42 avatar Mar 05 '17 17:03 maverick42

+1

brycekirk avatar May 28 '19 16:05 brycekirk

All - it is possible right now to do this - I am doing something similar. In my case, I have at least 4 "runs" where the needles settle on their final value. I use FIVE needles to do this, 4 are dedicated to the purpose of settling, and one is the "active" needle. You could do similar, and it would be less complex than what I am doing since you just want to add a marker.

In your case, you instantiate TWO needles. One would be your marker and would have a 0 stroke width (which effectively causes the needle itself to disappear). You add an ICON to float on top of this needle (setting the length of the needle appropriately so it floats on or above the gauge itself).

Here is how I accomplished this. Please do note the order in which I instantiate the needles as that is very important to allowing your "active" need to react to new values (if realtime).

image image

NicFragale avatar Jun 03 '19 16:06 NicFragale