3

Designing a dashboard that includes a section with 70-80 temperature readings sorted from high to low. given the limited space in the screen, i can only a show a limited amount of them.

My question is, how to show all these reading within the limited space. while some can be shown, how can i guide to user to see the rest? would using inline scroll or pagination be work? i haven't been able to see any example where with something similar is done. enter image description here

2
  • Do you have 70-80 devices and diaplaying current temperature for them? Or do you have one device and 70-80 readings at different time?
    – Serg
    Jan 25, 2022 at 17:31
  • @Serg its 70-80 devices displaying their current temperature
    – Blue Ocean
    Jan 26, 2022 at 1:51

2 Answers 2

4

There's a couple things you can do.

Since we can't see the rest of your UI, here's a couple thoughts. Feel free to comment, and I'll update my answer.

1: Don't Expand, but scroll within: use a fade w/ CSS

Try setting a faded border bottom, so some of the values are obscured. You can pair this with showing a scroll bar when the users pointer enters the chart area. This also depends on how you're rendering your charts, and your UI implementation.

enter image description here

2: If you have room, expand

If this chart sits in a page, not constrained to smaller dashboard tile, you can have a bottom boundary, with a MORE link. This can expand the visualization, so users can scroll up and down the page itself to see more values.

enter image description here

Thoughts about data display:

One thing i notice in your graph is that it's showing temperature comparisons.

You have a lot of blue ink here, for data points that are individual points. One way to rework this is to use a dot plot, or a lollipop chart.

enter image description here

This way you could probably pack more values into the space to begin with, and wondering if there's a possibility to maybe have out of range values in a different color, as it looks like you have med, high and very high (not sure if this color change is doable, see the library you're using to test it out).

Again, just a thought, because the bars intense color don't necessarily add to the understanding here.

Using a dot plot, I can scan vertically, and count the number of points within a given range fairly quickly (you could also add summary figures at top if that was important to know).

2
  • thanks for your answer. have updated the visual to give more context. it'll be within one of the panes on the dashboard, so there's may not really be a way to expand. using inline scroll is one option i'm considering
    – Blue Ocean
    Jan 26, 2022 at 5:55
  • @BlueOcean I've updated my answer, with a thought about getting a denser, easier to read data display.
    – Mike M
    Jan 26, 2022 at 17:06
1

In general the main purpose of dashboard is to capture attention of its viewer to most important things which require some reaction. As a dashboard has a lack of space and different information to display it is not a good place to contain detailed information which user need to study before he can make any decision. Better if a dashboard provides him some basic data processing and displays a kind of resulting about what's going. If user need to make more detailed study he can click a dashboard element and open in another tab or in modal form a detailed view as usual table with sorting, search, etc. options.

Depending on your needs and your dashboard's design another composite elements could be used. Here are some examples which capture the attention.

A chart which illustrates a whole situation with temperature:

Chart bar image

A map which illustrates a situation in different locations, or a plan, schema, etc. could be used:

Map image

Your Answer

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

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