Temperature range chart with background

Who it’s for

Building managers, city planners, and environmental monitoring teams ask “across the full history window, which temperature bands was this location in?” They want a color-coded timeline with a background image for field station or control-room screens.

What it does

A week of temperature readings that spans 8°C overnight and 28°C at midday renders as a range chart with dark-blue segments during the cold early hours and orange segments through the warm afternoon, displayed over the preset background image — all on a single scrollable timeline with data zoom.

• Color-coded range chart where each point in time is colored by its temperature band across seven levels from Extreme Cold to Extreme Heat
• Data zoom control for scrolling and zooming into specific time windows
• Decorative background image bundled with the widget, with a white overlay that keeps the chart readable
• Shows one sensor’s data; it does not compare multiple probes or show a numeric current value overlay

How to set up

Data keys

Key	Role	Type	Description
temperature	Chart series	Timeseries	Temperature in °C; drives the range chart coloring

The widget ships with a simulated function datasource key labeled Temperature, so it draws random values until you point the datasource at a device and rename the key.

To point it at your own device: open the dashboard in edit mode, open the widget’s Datasources, pick the entity or entity alias, and replace the function key with the key your device reports.

If the key has never reported for the selected time window, the chart is empty.

Value ranges

Range (°C)	Level	Color
below −20	Extreme Cold	Deep Blue
−20 – 0	Cold	Blue
0 – 10	Cool	Light Blue
10 – 20	Moderate	Orange
20 – 30	Warm	Orange
30 – 40	Hot	Red-Orange
above 40	Extreme Heat	Red

How to customize

• To swap the background image — open the widget settings and set Background to a different image or switch to a solid color.
• To adjust how much the background shows through — change the Overlay opacity; lower values reveal more of the image, higher values push it further back.
• To use your own temperature thresholds — edit the Range colors in the widget settings; adjust the seven default bands to match your requirements.
• To display in °F — add a unit conversion function to the data key; adjust the range boundaries to Fahrenheit equivalents.
• To change the time window shown — adjust the Time window on the dashboard, or use the built-in data zoom control.

Tips

• This chart is most useful over multi-day or multi-week windows where the alternation between cool nights and warm days is the story — for single-day views the simple temperature chart card is usually clearer.
• If the background image reduces contrast with the chart segments, raise the Overlay opacity.
• The data zoom lets users drill into a specific event (overnight frost, afternoon heatwave) without changing the dashboard time range.