Different colors option in same gauge.

[sangeetash]

Hi Toorshia,

My requirement is to show different colors in same gauge. Like 0-60 % = green, 60-70 = red, 70-80 = yellow and rest transparent. Actually all colors should be displayed in gauge for defined values.

Can I do it with JustGage using customSectors? I tried but it is not working. DO I need to update JustGage.js? If yes please help me in updating it.

[kennyjwilli]

If this is not already a feature I think it would be a great addition.

[jcypret]

I looked through the codebase but wasn't able to find this feature either. I have a project with similar requirements: 0–45% = RED, 46–69% = YELLOW, and 70–100% = GREEN. Would love to see this feature added.

[toorshia]

So basically, you guys want a coloured gauge base, and then use pointer to show value (not using grey gauge base and coloured level, the way it works now)?

[emiloberg]

So basically, you guys want a coloured gauge base, and then use pointer to show value (not using grey gauge base and coloured level, the way it works now)?

@toorshia Yep, exactly like that. Briefly looking through the source code, I can not find an obvious way to do this. Is this a correct assumption or have I missed something?

[toorshia]

My primary idea behind current looks was to have each gauge denote status by a single color fill + value. IMHO, having several colour-coded segments at the same time is bad UX, especially having multiple gauges on a single screen. It's just confusing. It's like a unicorn took a shit all over the page :)

All arguments countering this reasoning are welcome for debate, of course. Thanks.

[emiloberg]

So... this is something I never thought I would be defending :)

But I guess the use case is if you want to show the current value in relation to a threshold. Take a look at this finely googled image:

This tells us that we're on "red", meaning under some threshold. However, we're really close to being on yellow. If we increased (whatever this gauge is showing) just a little bit we would be on in "okay" zone, but not by much so we should really get working. A single color wouldn't give the same information about how close we are to thresholds.

The very specific use case I have (which lead me here) is that I'm consuming the API of a Salesforce dashboard and want to render the different charts. One of the components they're using is this multicolored gauge.

[toorshia]

What about this case: I am opening a dashboard with 20 of these suckers. In 3 seconds time, do I spot those that are in red and require my immediate attention?

I can see your point though - I just think it can be solved more elegantly:

Thoughts?

[emiloberg]

Hey, I'm not saying that Salesforce take on it (the screenshot) is any good ;)

However, I really like your take on it, it has that glanceability which really helps usability wise. Technically speaking I guess we could add a property sibling to gaugeWidthScale and let those two control the "active" (yellow in screenshot) and "non-active" states (couldn't find better words for it).

[toorshia]

You'd also have to kill the level object rendering/animation, since there's no need for it anymore. However, you'd have to render and animate growth (width) of emphasized segments. This essentially requires a lot of recoding - a new way of rendering the gauge. I was having this in mind for a year now, but never really devoted time and energy to actually doing justgage v2.0 :)

[letapjar]

I was looking for something very much like the example above - did you do this w/. justgage - or is this strictly a mock-up?

[toorshia]

It's a mock-up, so far :)

[letapjar]

Could still use some styling - but this suits for my needs. I used the idea about having 2 gaugeWidthScales to achieve this [NOT a mock-up]

[toorshia]

Wow, that's awesome work. Can you share the code? :) Thanks!

[letapjar]

Yeah - i'll post it in a day or two - trying to meet a deadline - I can't really make a patch out of it - because as you mentioned above - it really did require re-writing a bunch of the way things are rendered. But maybe you can use it to figure out how to roll into the code

[toorshia]

Actually - I would prefer to manually integrate it. So don't spend effort making patch :) Thanks!

[magnuskjellen]

+1

Is there any timeplan for when this will be production ready?

[jaredcwhite]

+1

Would love to be able to use this as well!

[letapjar]

So I forked the repo b/c the issue queue would not let me post javascript. Please see: https://github.com/letapjar/justgage/blob/master/jg2.js This implements the gauge pictured above -

NOTE: I don't plan on maintaining this - but several people asked for the code so I'm positing for others to inspect. Hopefully some version of this gets incorporated into JustGage-v2.0.

Usage: Define your customSectors - and optionally the gaugeWidthScale2 parameter (for the thin sectors)

The approach is to render the sectors individually - and use 2 separate widths to get the popout. I have not implemented the animation/refresh for changing values - but feel free to do so :)

[beisert1]

@letapjar this is exactly what I need for my current project. Could you give example code of how to implement your example above? It would be greatly appreciated! Thanks

[letapjar]

@beisert1 - pull the fork that I made - and use jg2.js

when you define your gage - include the CustomSectors option like so:

var sectors = [{
        color : "#ff6600",
            lo : 0,
            hi : 24.999
                      },{
            color : "#ffD700",
            lo : 25,
            hi : 54.999
          },{
            color : "#66ff33",
            lo : 55,
            hi : 100
          }];

var dflt = {
              donut: false,
              counter: false,
              hideInnerShadow: true,
              titlePosition: "above",
              titleFontColor:"#333333",
          pointer: true
        };

var g = new JustGage({
        id:tid,
        defaults:dflt,
        customSectors: sectors
    });

That's it.

If you want to play around with the thickness of the sectors - you can also supply gaugeWidthScale (thicker value) and gaugeWidthScale2 (thinner sectors)

[beisert1]

@letapjar Amazing, great work! Thank you so much this is exactly what I needed.

[federhico]

You save my day :) thank's 👍

[adexerivera]

@letapjar Great improvement thank's

[Calvin-2DWeb]

That's awesome work, but i'm struggling with problems when using in 'donut' format. There's a specif configuration to keep use your "jg2.js" and donut format?

my justgage options are as below:

var faixas = [
              {
                  color: "rgb(230, 40, 40)",
                  lo: 0,
                  hi: 60
              },
              {
                  color: "rgb(240, 205, 40)",
                  lo: 60,
                  hi: 80
              },
              {
                  color: "rgb(80, 185, 40)",
                  lo: 80,
                  hi: 100
              }
          ];

   id: "gaugeVel",
   min: 0,
   max: 100,
   value: 70,
   display: '70',
   customSectors: faixas,
   hideMinMax: false,
   counter: false,
   donut: true,
   relativeGaugeSize: true,
   humanFriendly: true,
   pointer: true,
   titlePosition: "above",
   gaugeWidthScale: 0.7,
   gaugeWidthScale2: 0.3

Here's the problem:

@letapjar

[letapjar]

It's not a formatting issue as far as I can tell - seems to be a bug in the code for rendering in donut mode (which I never had need for so never really tested). I don't really have time to look at this until probably next month at the earliest.

[robertsLando]

@letapjar Could you make a PR please?

[letapjar]

@letapjar Could you make a PR please?

by "PR" you mean pull request? If so - I'm not even sure whether my code would work with the re-factored justgage. It's not something I've been maintaining.

[robertsLando]

Yes I mean pull request. Try to send the code as it is right now, I will fix any conflict my self. If you want you can fix them than send the pr.

Thanks 🙏🏻

Daniel

On 6 Aug 2019, at 16:08, Letapjar [email protected] wrote:

@letapjar Could you make a PR please?

by "PR" you mean pull request? If so - I'm not even sure whether my code would work with the re-factored justgage. It's not something I've been maintaining.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.