Geek Answers Handbook

How to show color by sector using JustGage

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

There is an opportunity to do this, 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

+6
source share
4 answers

I see that you are using levelColorsGradient: false when setting up the first sensor (g1). This should do this in accordance with the documentation.

The document says

Select a color representation based on the sector of the displayed value. This means that the color will remain green for all values ​​below 33%, yellow from 34% to 66%. Take it over 67% and your indicator will glow red. These are the three colors by default.

If you want to define your own colors, the document says,

// levelColors: string []

// indicator colors, from bottom to top, in RGB format

Create your own color variable by changing the RGB values ​​below for the desired colors.

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

And then set this parameter when setting up the sensors.

 levelColors : myColors

Or, if you want to keep everything together, skip the variable and do it. I change the average to orange.

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

Is an indicator showing default colors right now? I don’t think you can change sectors, they are based on percentages.

+12
source

You can set 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 });
+5
source

If you set 3 colors, then each will represent 33%. If you set 5 colors, then each will be 20%. For maximum control on a 100 percent scale, you can set an array of 100 elements, and each of them will be 1%. Colors can be repeated, so the first 20 can be "# ff0000", for the first 20% - red. etc. It was not clear to me in the instructions.

0
source

You can use customSectos with percentages: 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 }] }

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

0
source

More articles:


All Articles