1

so I am designing a dashboard and on this dashboard there are going to be 3 graphs, 2 of them are bar graphs and one of them is a line graph. The bar graphs have similar x axis, but different y axis. For example, both bar graphs would have the names of people, but the y axis would be favorite color and favorite movie respectively. This means that both bar graphs would have the same colors representing each individual, as the I do not want to confuse the user with two different legends. On the other hand, the line graph is completely independent and has nothing to do with the other two graphs. I see two options for organizing them in my dashboard:

  1. Bar-Bar-Line Bar bar line
  2. Bar-Line-Bar bar line bar

I am thinking of going with option 2 because I don't want the users to confuse the two bar graphs, as visually they would look identical. All the colors would be the same, the only difference being the y axis text. On the other hand, placing similar graphs next to each other makes more sense if the identical visual wasn't an issue. Do you guys see any issues with placing them in a bar-line-bar horizontally across a dashboard?

2
  • 1
    Sorry, which problem do you see here? Do you have a mockup so we can visualize the issue?
    – Devin
    Jul 1 at 17:53
  • 1
    Sure, I just added a mockup in my main post. Basically, see how the two bar graphs have the same x axis, so therefore they will have the same colors? I don't want users to confuse the two graphs, so I thought about putting the line graph in-between them. This way, users won't be as confused between the two. On the other hand, since the line graph's information is not related to the other two, it seems weird to place this unrelated graph between two related ones.
    – Gene Lee
    Jul 1 at 18:14

2 Answers 2

1

Think about the data story you want to tell here, and try to group and consolidate elements to support that story.

In your diagram, you have a chance to consolidate the 2 bar graphs, and set up a way for users to see how the metrics might relate to each other.

Rather than be concerned about the identical appearance of the graphs, embrace the chance to group and consolidate, and try experimenting with single Y axis (the names) to allow the user to view without having to repeat the labels.

Horizontal bars are also easier for users to make comparisons within a set, because human vision can more effectively compare length than height.

The temperature has both a different axis, and perhaps less of a correlation to an individual runner. So you can keep as a different group.

enter image description here

1
  • 1
    I love the way you combined the bar graphs using a single y axis, This will definitely be the design I decide to go with. Thank you
    – Gene Lee
    Jul 5 at 17:06
1

If you start from a visual point of view, it does not matter as long as you have a unified visual language.

However, there are other important considerations that may influence your decision:

1. Is this the right diagram?

More important than where to place the charts is whether it is the right chart (or group of charts) for the purpose. Information visualization or data visualization is a discipline of its own, and sometimes it's a good idea to review some general tips, dos and don'ts on the subject. I am not sure if your example shows the information you'll be using, or if it's just a mockup with random data. But based on that, I can not see how the temperature chart will fit with the other information.

2. Am I using a consistent language?

Maybe it's because it's just a mockup, but it's a useful example: instead of using large blocks for bars and thin lines for line charts, it looks nicer and more appealing if you use a consistent design language, including fonts, color palette, and shapes.

3. Use logical groupings.

The most important consideration when placing charts or any other type of Dataviz element is to group them logically. In an example like yours, we might group charts by groups of people, while the temperature chart clearly belongs somewhere else. A tip for this is to identify the subject (who or what is it for?) to group them accordingly by logical groups

1
  • You're right in that I changed the language around for this mock up, the actual variables have more to do with internet connections/WAN connections but I thought using simpler variable would get the point across. In actuality, its not even a line graph I am using, just a chart not related to the other two graphs. I think I will go with two bar graphs next to each other since logically, they are somewhat related. If this was in black and white, for instance, I would not have to worry about the visual confusion, so I will ignore my brain telling me that users will mix up the two bar graphs
    – Gene Lee
    Jul 1 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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