Showing a single dimensional value inside of a valid range is not unusual, whether using a bar or using a virtual gauge.

My problem is slightly different - I have a two-dimensional value. Temperature and pressure are interrelated - whether the temperature is ok depends on pressure, and vice versa.

Apart from displaying a numerical value, I need a graphical indication for the operator to be able to quickly tell if the current values are ok, are they near to an alarm value, or has it gone into an error territory (which of course will have it's own notification).

Below is a quick mock of the graphical part - two overlaid regions, with a dot to show the actual reading. Not shown in the mock are numerical readings. What I am unsure of is whether to add axes and whether to add crosshair-like lines from the dot to those.

Colors were just a quick pick for the mock, although I do intend to stick to a blue-red combo to be colorblind friendly. Probably should add outlines too.

Additional information:

  • this is for industrial equipment, so the focus is on readability and being intuitive, not aesthetics
  • there can be up to 24 such indicators on a single 24" screen

Proposed solution

  • Does the user gain anything from knowing actual values ? ( currently its a nice simple display, adding anything will make it less simple )
    – PhillipW
    Jul 27, 2021 at 14:46

3 Answers 3


If simply knowing if the value is good/bad is insufficient, you'll want to refine the scope of your use case a bit more as this can snowball quickly.

It sounds like there is a desire to show data in a way that can be reacted to before it becomes a problem. While this can be done simply with a 0-dimensional light (with states for good, danger, and error), let's explore what other options might look like.

A 2D representation is a good start if you want to show how close to an error the value is, but the user probably would also want to know which direction the dot is moving. Two readouts with the dot in the same place might have very different interpretations if it is moving left in one and right in the other.

What is the update frequency? Gauges (whether linear or 2D) work best if the data is supplied in real-time. If the dot is jittering, users might assume that to be the case, but there could also be a lot of noise in this approach. You might want the dot to fade (radar-style) to show that the data is becoming stale, or show dimmer dots over time as the reading updates.

In a group of 24 of these, constantly showing the red will be very overpowering, and will decrease the ability to see what's going on at a glance. Likewise, the contrast between the dot and the blue makes it harder to see quickly. Use color only when attention is needed, though you could fade it in gradually as things get closer to the danger threshold.

Example of gauge showing safe reading. Example of gauge showing dangerous reading.

  • That is quite thoughtful, I will definitely think on what you said. Update frequency should be at least ten times a second, quite possibly faster, so yes, jittering should be visible if the operator looks on the display instead of just skimming it. As skimming might be common doing a fade is a great option here.
    – jaskij
    Jul 26, 2021 at 17:03
  • Also, the colors I intend to use in the final design would likely be far less saturated than what's been uploaded in the question.
    – jaskij
    Jul 26, 2021 at 17:08

As you are working with only two values (temperature and pressure) then I suggest you can handle this with a simple 2-axis graph.

Something like this:

enter image description here

Excuse the roughness of it. It is just meant to be an example, you will likely want to pick more visually pleasing styles/colours. It may even make more sense to go with a gradient colour panel.

The idea is simple, you draw your "threshold lines" to suit whatever values you want. Again, my example is just a quick one where I have used a constant line. You could easily opt for a more curved set of points. The idea really is to show a sort of "heat map" and place the current value on it.

I also suggest you do not rely on only having this visual indicator. It would be sensible to also list the values and show how close they are to the limits. This could just be a simple status icon next to the values which would be shown below the graph:

enter image description here

The simplicity of this approach means you don't need it to be very big (could easily be half the size of my example), so you can get plenty of the screen at once.

After your comment, and re-reading the question, I think perhaps these are your actually concerns:

What I am unsure of is whether to add axes

Yes, add axis. Even if they don't have values they can be useful for the user to quickly get a feel for what the data means. In addition, to my example above, ensure to show negative axis only when applicable. So for temperature vs pressure you might have something like:

enter image description here

and whether to add crosshair-like lines from the dot to those.

I would say leave the cross-hairs out. The purpose of these displays is to give a quick indicator of how "safe" they are, not what the values are. You already have your text labels to handle this.

You don't want to overload the visual element with too much information, as that will take the user more time to process each one just for the information they need.

  • Come to think, we probably will have two outlines - warning and alarm/error. That would naturally form a three-step gradient. There absolutely will be numerical values beside. Guess I should've done a better mock instead of relying on textual description.
    – jaskij
    Jul 26, 2021 at 17:00
  • @JanDorniak: Sorry, I re-read your question after this comment. I have updated my answer, hopefully it is more inline with what you are asking now. Let me know if anything is missing and I will try and provide more information.
    – musefan
    Jul 27, 2021 at 10:57

Try to use 2-scales indicator similar to this images which I found with Google:

But your indicators will have dynamic coloring of scales according to your sensor reading diagram. To illustrate the idea I used your original image.

Original image with additional elements

So, you need just to draw 2 lines through your current measurement point and they bring you scale coloring from minimal value to maximal. Obviously, for point A we'll have both scales totally red regardless of temperature and preassure values.

I think that gauge is the best tool to read temperature and pressure values for engineers. And your dynamic scales will give good visual picture.

Hope the idea is clear, sorry for not illustrating it by images because of my poor artistic abilities.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.