I’m currently reworking some existing graphs which are shown on a webpage for a B2B tool.
These graphs are showing the current state of what’s happening in the life cycle of an animal, along with the norm and a predicted value.
In this particular graph below we are showing animal weight.
As you can see 3 different values are shown:
- actual weight (full blue line)
- predicted future weight (white dots with blue border, on the far right)
- norm (blue dots)
When the user hovers with the mouse over the graph, the legend shows the specific values, as is shown in the example for 32 weeks.
I would like to focus on the legend. It bothers me that “norm” is shown underneath the actual value, while the predicted future value is shown on the right side of it.
On other places in the website, we show the same graph, but in a smaller view.
Parameter names are translated, and could potentially be very long.
Some graphs are showing data for multiple parameters combined (and could potentially have a value, a norm and a future prediction for each parameter)
Now, as I mentioned, it’s the legend that bothers me. The “norm” is shown underneath the actual value, while the predicted value is shown on the right side of it.
Here are some facts:
- The predicted future value never overlaps with the actual value
- The norm could overlap with both the predicted value and the actual value
- Parameter names could be potentially very long
- Need to be able to show the full legend even in the smaller view
I am wondering what my options are to improve this.
My initial thoughts are to “merge” the columns for predicted value and actual value into 1 column, as shown below. This simplifies the legend.
Since predicted values never overlap with actual values, this seems technically feasible: Just change the icon and the label of that first column.
But is it a good idea ? Are there any better options I’m not considering ?
Or is my solution perhaps worse than what I had before?
Thanks for your comments and insights.