Color value/background change on value change

Hi @novakivgeny,
I came up with a solution for this inequiry (“How to color one metric based on value of another metric in Stat panel”) but I use InfluxDB 2.6.1 (Flux language) so you will have to adapt queries for PromethesQL. However, logic is same so you can use that.

For solving this case I used 2 queries:

  • query A: returns raw data about state (this is what is showed in panel)
  • query B: calculates difference between data points. If difference is equal to 0 value of B query is mapped to green color (HEX #3dd961) and if difference is not equal to 0 value of B query is mapped red color (HEX #fc1c5b). This query is used in Transform → Config by query result and it will change color of value from query A. Because of applied transform you wont see that on panel.

query A:

from(bucket: "test")
  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
  |> filter(fn: (r) => r["_measurement"] == "customfile")
  |> filter(fn: (r) => r["_field"] == "state")
  |> filter(fn: (r) => r["config"] == "file")
  |> yield(name: "original")

query B:

from(bucket: "test")
  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
  |> filter(fn: (r) => r["_measurement"] == "customfile")
  |> filter(fn: (r) => r["_field"] == "state")
  |> filter(fn: (r) => r["config"] == "file")
  |> drop(columns: ["_start", "_stop"])
  |> difference(nonNegative: false, columns: ["_value"])  // Calculate difference between data points. Result is always saved to _value field
  |> duplicate(column: "_value", as: "original") // Duplicate entire _value column to new original column in order to retain original value (i.e. numeric value)
  |> map(fn: (r) => ({ r with _value: if r._value == 0 then "#3dd961" else "#fc1c5b" }))  // map values of difference to HEX colors (#3dd961 = green, #fc1c5b = red). i.e if difference = 0 color is green else color is red
  |> rename(columns: {_value: "color", original: "_value"}) // rename columns so that _value column has numeric values and color column has HEX colors (string)
  |> yield(name: "difference")

Note: You can use RGB colors (e.g. rgb(61, 217, 97) ) instead of HEX color codes but HEX is simpler. To find out HEX color codes just type “hex color picker” in Google and you will get handy tool.

Grafana queries:

Grafana Transform:

Here I am using query B to configure values of query A ( i.e. state (base field name) ). HEX color codes ("#3dd961" and "#fc1c5b") are stored in column "color" and this column is used for coloring values of query A.

Result:

Pictures

State is unchanged (State = 0 , Difference = 0) → green color

State has changed (State = 1 , Difference = 1) → red color

State is unchanged (State = 1 , Difference = 0) → green color

State has changed (State = -2 , Difference = -3) → red color

State is unchanged (State = -2 , Difference = 0) → green color

State has changed (State = -1 , Difference = -1) → red color

State is unchanged (State = -2 , Difference = 0) → green color

Hope this will help. :slight_smile:

Best regards,
ldrascic

2 Likes