Home » Php » javascript – How to show color by sector with JustGage

javascript – How to show color by sector with JustGage

Posted by: admin July 12, 2020 Leave a comment

Questions:

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

How to&Answers:

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:

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

Answer:

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.

Answer:

You can use customSectos with percents:true,

Answer:

Answer:

September 26, 2016. - release 1.2.9

Answer:

Answer:

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