How do I color code numeric values within a View?

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a custom field that holds numeric data. When I display that custom field on the front-end of the site, I would like to use different colors to represent different ranges - values less than 1,000 show green font, values between 1,001 to 1,499 show in yellow, and values over 1,500 show red.

Solution: Use conditional HTML to display the field with different CSS classes based on the field value. For example:

[wpv-conditional if="( $(pond-1-tds-mg-l) lt '1001')"]
  <td class="your-green-class">[types field="pond-1-tds-mg-l" output="raw"][/types]</td>
[/wpv-conditional]
[wpv-conditional if="( $(pond-1-tds-mg-l) gte '1001' AND $(pond-1-tds-mg-l) lte '1500' )"]
  <td class="your-yellow-class">[types field="pond-1-tds-mg-l" output="raw"][/types]</td>
[/wpv-conditional]
[wpv-conditional if="( $(pond-1-tds-mg-l) gt '1500' )"]
  <td class="your-red-class">[types field="pond-1-tds-mg-l" output="raw"][/types]</td>
[/wpv-conditional]
... and so on ...

Relevant Documentation:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

This support ticket is created 5 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by larryB-3 5 years, 9 months ago.

Assisted by: Christian Cox.

Author

Posts

February 13, 2019 at 3:52 pm #1200107

larryB-3

Tell us what you are trying to do? I have a CPT with custom fields where I'm collecting numeric input. When displaying a table on the front-end of numeric input I would like to have values show with different CSS based on the value entered, for examples values less than 1,000 show green font, values between 1,001 to 1,499 show in yellow, and values over 1,500 show red.

Here is my template view each of these fields would have a numeric value that a back-end user keyed in:
<td>[types field="pond-1-tds-mg-l"][/types]</td>
<td>[types field="pond-2-tds-mg-l"][/types]</td>
<td>[types field="pond-3-tds-mg-l"][/types]</td>
<td>[types field="pond-4-tds-mg-l"][/types]</td>
<td>[types field="pond-5-tds-mg-l"][/types]</td>
<td>[types field="pond-6-tds-mg-l"][/types]</td>

February 13, 2019 at 5:44 pm #1200170

Christian Cox

Hi, you can use conditional HTML to display different content based on conditional criteria. For example:

[wpv-conditional if="( $(pond-1-tds-mg-l) lt '1001')"]
  <td class="your-green-class">[types field="pond-1-tds-mg-l" output="raw"][/types]</td>
[/wpv-conditional]
[wpv-conditional if="( $(pond-1-tds-mg-l) gte '1001' AND $(pond-1-tds-mg-l) lte '1500' )"]
  <td class="your-yellow-class">[types field="pond-1-tds-mg-l" output="raw"][/types]</td>
[/wpv-conditional]
[wpv-conditional if="( $(pond-1-tds-mg-l) gt '1500' )"]
  <td class="your-red-class">[types field="pond-1-tds-mg-l" output="raw"][/types]</td>
[/wpv-conditional]
... and so on ...

We have documentation about conditional HTML available here: https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

February 13, 2019 at 10:04 pm #1200266

larryB-3

My issue is resolved now. Thank you!