How to show color by sector with JustGage

Question

I am trying to get my gauges to show color by sector (i.e. on var g1 i would like green 0-10, orange 11-22 and red 23-34).

There is an option to do it, but there are no clear instructions for noobs like me.

Any help would be appreciated.

http://www.justgage.com

<script>
  var g1 = new JustGage({
    id: "score", 
    value: <?php
print $content['field_anger_score'][0]['#markup'];
?>, 
    min: 0,
    max: 34,
    title: "Your Anger Score",
levelColorsGradient: false
  }); 
 var g2 = new JustGage({
    id: "passive-aggressive", 
    value: <?php
print $content['field_passive_aggressive_score'][0]['#markup'];
?>, 
    min: 0,
    max: 14,
    title: "Passive Aggressive"
  }); 
var g3 = new JustGage({
    id: "aggressive", 
    value: <?php
print $content['field_aggressive_score'][0]['#markup'];
?>, 
    min: 0,
    max: 6,
    title: "Aggressive"
  }); 
var g4 = new JustGage({
    id: "assertive", 
    value: <?php
print $content['field_assertive_score'][0]['#markup'];
?>, 
    min: 0,
    max: 4,
    title: "Assertive"
  });

</script>

dfg

jmm · Accepted Answer · 2013-03-26T17:51:51.850

12

I see you are using levelColorsGradient: false when you are setting up the first gage(g1). That should do it according to the documentation.

The documentaion says

choose sector-based color representation of the displayed value. It means color will stay green for all values below 33%, yellow from 34% up until 66%. Take it over 67% and your gauge will glow red. These three are the default colors.

If you want to define your own colors the documenation says

// levelColors : string[]

// colors of indicator, from lower to upper, in RGB format

So create your own variable of colors, changing the RGB values below for the colors you want.

var myColors = [
  "#a9d70b",
  "#f9c802",
  "#ff0000"
]

And then set this option when setting up your gauges.

levelColors : myColors

Or if you want to keep it all together, skip the variable and do this. I change the middle value to an orange color.

 levelColors : [  "#a9d70b", "#F27C07",  "#ff0000" ]

Is the gauge showing the default colors right now? I don't think you can change the sectors, they are based on percents.

edited Mar 26 '13 at 17:51

answered Mar 26 '13 at 17:37

jmm

980
1
7
12

Yes thank you I figured that out too, its just I am not sure how to change the sectors so they are not set at 0-33, 34-66, 67-100 rather at the intervals I require (0-10, 11-22, 23-34) – Jeremy Mar 26 '13 at 18:17
Somehow I dont think this is possible on a per gauge basis? – Jeremy Mar 26 '13 at 18:18
No I don't see an option to change the sectors, they are set at those percentages. But its going to be close with the numbers you have – jmm Mar 26 '13 at 18:53
But if you add more colors, the number of sectors will change to match. – jmm Mar 26 '13 at 19:06
There wasnt an option, but the author has now added this function on my request. – Jeremy Mar 27 '13 at 10:09

score 6 · Answer 2 · answered May 06 '14 at 12:07

You can set the colors with the customSectors property

var g1 = new JustGage({
  id: "score", 
  value: <?php
    print $content['field_anger_score'][0]['#markup'];
   ?>, 
  min: 0,
  max: 34,
  title: "Your Anger Score",
  customSectors : [{"lo":0,"hi":10,"color":"#a9d70b"},
                   {"lo":11,"hi":22,"color":"#f9c802"},
                   {"lo":23,"hi":34,"color":"#ff0000"}],
  levelColorsGradient: false
});

score 0 · Answer 3 · answered Apr 16 '15 at 01:39

If you set 3 colors then each will represent 33%. If you set 5 colors then each will be 20%. For maxim control on a 100% scale you can set a 100 element array and each would represent 1%. Colors can repeat so the first 20 could all be "#ff0000" for the first 20% to be red. etc. This wasn't clear to me in the instructions.

score 0 · Answer 4 · answered Jun 15 '17 at 16:26

You can use customSectos with percents:true,

######September 26, 2016. - release 1.2.9

######customSectors receives structural update + additional "percents" feature (define ranges in %).   
    customSectors: {
          percents: true,
          ranges: [{
            color : "#43bf58",
            lo : 0,
            hi : 50
          },{
            color : "#ff3b30",
            lo : 51,
            hi : 100
          }]
        }

Reference : https://github.com/toorshia/justgage

How to show color by sector with JustGage

4 Answers4