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

Answer 1

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.

Answer 2

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
});