highlight highest/lowest values with color(s)

Hello @jesus-1

Yes, you can include conditional statements in the equation and apply different colors based on the result:

(function(){
var result = fieldname1+fieldname2,
    color;

if ( result < 5) color = 'red';
else if ( result < 10 ) color = 'orange'; 
else if ( result < 20 ) color = 'yellow';
else if ( result < 30 ) color = 'blue';
else color = 'green';

getField(fieldname3|n).jQueryRef().find('input').css('color', color);

return result;
})()

Best regards.

Thanks for the fast reply!

Is it possible to compare the values of several calculated fields to set the colors, too? Let′s say for the colors green, yellow and red for the lowest to the highest value.

Regards,
Jens

Hello @jesus-1

Yes, of course. But I will need more details about your specific case.

I’ll try to describe the process with a hypothetical example.

Assuming you have a field that makes a calculation, the calculation you prefer. Continuing with a similar example fieldname1+fieldname2+fieldname3 and you want to decide the colors with the following rules, if the three fields’ values are less than 10, assign the red color, if at least one field is over 10, assign the color orange, if two of three have values over 10, assign the yellow color, and finally, if the three fields values are over 10, assign the green color. It is a hypothetical example, but you can apply this logic to any other equation.

In this case, the equation would be similar to:

(function(){
let result = fieldname1+fieldname2+fieldname3,
color = 'red',
n = 0;

if(10<fieldname1) n = n+1;
if(10<fieldname2) n = n+1;
if(10<fieldname3) n = n+1;

if(n == 1) color = 'orange';
else if(n == 2) color = 'yellow';
else if(n == 3) color = 'green';

getField(fieldname3|n).jQueryRef().find('input').css('color', color);

return result;
})()

Now the same code, but optimized:

(function(){
let colors = ['red', 'orange', 'yellow', 'green'],
values = [fieldname1,fieldname2,fieldname3],
n = values.filter(element => element > 10).length;

getField(fieldname3|n).jQueryRef().find('input').css('color', colors[n]);

return SUM(values);
})()

Best regards.

Thanks for all the details. That′s a really impressive support!

Here are more details about my specific case:

• There′s no fixed value for the result like less than 10 or more then 10. It depends on the different results of the calculations.
• Let′s say I want to calculate the price for electricity for different total amounts.
• The 15 to 20 results vary…
  • e.g. between 44 and 69 Euro for 100 kWh and
  • between 142 and 242 for 350 kWh.
• The different background colors are there to highlight lowest (green) and highest results (red) with everything in between from light green to orange. Here′s an example.

Is there a chance to get that done with your plugin, too?

Regards,
Jens

Hello @jesus-1

I don’t understand completely your description. However, you can make the range for comparing dynamic.

For example, assuming you have the fieldname1 to make some calculations that return values like 100 or 350, and the fieldname2 that makes other calculations. Now, if the fieldname1 value is 100, you want to compare the fieldname2 result if it is less than 44, between 44 and 69, or greater than 69. However, if fieldname1 is 350, the numbers for comparing are 142 and 242.

And the equation to determine the color would be similar to:

(function(){
let low, high, color;

if(fieldname1 == 100) {low = 44; high = 69; }
else if(fieldname1 == 350) {low = 142; high = 242; }

if(fieldname2<=low) color = 'green';
else if(AND(low < fieldname2, fieldname2 < high) color = 'orange';
else color = 'red';

getField(fieldname2|n).jQueryRef().find('input').css('color', color);

})()

Best regards.

Sorry for the misleading description! There will be no fixed numbers for “low” or “high”. The outcome depends on the input of the total amount of energy. To make it easier, I′ve decided to publish the calculation.

1. Field “Kilowattstunden (kWh) pro Monat”: You can add a number like e. g. “100” or “200”.
2. On the right the “Kosten/Monat (€)” will change depending on your input.
3. And that′s where the highlighting should happen: green for the lowest, red for the highest price etc.

Hello @jesus-1

You are describing a completely different situation.

You have multiple fields, and you want to apply green color to the fields with lower value and red to the field with the highest value.

I’ll describe the process with an example. Assuming these fields are fieldname1, fieldname2, fieldname3, and fieldname4.

The equation can be implemented as follows:

(function(){
    let fields = [
        [fieldname1|n, fieldname1],
        [fieldname2|n, fieldname2],
        [fieldname3|n, fieldname3],
        [fieldname4|n, fieldname4]
    ],
    low = fields.reduce((min, current) => { return min[1] < current[1] ? min : current; }),
    high = fields.reduce((min, current) => { return min[1] < current[1] ? current : min; });
    getField(low[0]).jQueryRef('input').css('color', 'green');
    getField(high[0]).jQueryRef('input').css('color', 'red');
})()

Now you need only to replace the fields’ names with the corresponding fields names on your form.

Please note the support does not cover implementing the users’ projects. If you need the specific implementation of your project equations, contact us through the plugin website. Contact Us.

Best regards.

Thanks again! Just one more question: Is it possible to let the code do it′s magic only after user input (and user input updates/changes)?

Now there′s a red highlight and a green highlight before user input – and more after user input. So the calculation ends up with more than two highligted results (user input at “Kilowattstunden (kWh) pro Monat”).

Hello @jesus-1

The code of the equation can check if the fieldname1 value is not empty before evaluating the rest of the equation’s code:

(function(){
    if (fieldname1){
        /* YOUR CODE HERE */
    }
})()

Best regards.