Posts tagged Dashboard design
Today, I was scanning multiple websites to get my daily portion of data visualization vitamins. Whilst doing this, I came up across the following graph.
At first sight, I thought I saw a clear correlation between the Internet Explorer Market Share and the number of Murders in the US. When the amount of murders got less, the IEX Market Share seemed to crash. Wow.. how is that possible?
Let’s take a closer look and find out what’s going on with this graph. After a quick examination, I came up with the following:
This graph has two Y-axes.
Mmm.. interesting. How should I read this graph? Mmm… I’ll find out soon enough. I guess..
The Y-axis for the bars doesn’t start at zero
One of the basic principles for designing a bar chart is that the Y-axis starts at zero. Since we can really easy see the difference in size/length of two or multiple bars almost without even thinking (preattentive processing), we’d better show the whole bar and not only a part of it. If we want to show the whole bar, we need to start the Y-axis at zero, at all times.
Confusing title and legend
There’s going on a lot with the title and legend. The title of this graph is named “Internet Explorer vs Murder Rate”. The legend which explains which color represents which data serie, is positioned below the graph. That’s not logical in the first place. It should be more convenient to place it above the graph. That’s a first observation.
Another thing regarding the legend, is that the order of the data series in the title and legend are swapped. The title begins with Internet Explorer and the legend with Murders in US. Why should we do that?
To continue, one of the most confusing things is that the description of the data series in the title and legend are different. The title states “Internet Explorer vs Murder Rate” while the legend states “Murders in US and Internet Explorer Market Share”. Both a rate and a market share can be expressed in percentages so which data serie belongs to which Y axis? You tell me please.
A simple redesign of the legend problem could like as follows.
The (self explaining) legend is incorporated in the title of the graph. This has multiple advantages:
- We only state the data series descriptions once.
- We start reading from top to bottom and after we’ve read the title we immediately know which color belongs to which data serie.
- We know which Y axis belongs to which data serie since we added a tiny bit of extra information to the data serie description. We now included the units of measure in the title.
- We don’t need a separate legend.
Back to the double Y-axis issue
At first, my main goal of writing this blog was to illustrate the possible impact of messing around with multiple Y-axes into a single chart. Whilst writing this blog, I found out a lot more was wrong with this graph and I couldn’t keep myself from not explaining some of them. I’m convinced that if I’d dig even further into this simple graph, I could come up with more imperfections but the main goal wasn’t redesigning this graph, but illustrating the risk of using two Y-axes. Back to this issue.
I’ve drawn a couple of examples of different Y-axis scales to show how the message of the simple graph can be completely different when taking a quick look.
Examine the following examples and find out what your first impression would be..
Without looking to much at the Y-axis scales, the story this graph tells is that when the amount of murders decreases with by only the slightest bit, that the market share of IEX crashes completely. Wow.. what a story.
Again, without looking to much at the Y-axis scales, this graph tells a different story. For every US murder case, Internet Explorer relatively looses the same amount of market share.
For this example, I used a redesign of the graph. What story is this graph telling?
Give it a try
I spent about 15 minutes in SAP Dashboards building an interactive demo in which you can play around with the Y-axis scales. This way you can find out what the impact can be of having messy scale ranges next to having two Y-axes in a single graph.
I can imagine you don’t all have the privilege of having a large HANA instance in your SAP wonderland. Because of this, you might have to wait a couple of seconds every now and then before your reports and dashboards pop up. Time to throw in some magic.
With this tutorial, I’ll show how you can make the waiting in SAP Dashboards / Xcelsius a little bit more exciting than just having to look at the default SAP Dashboards hourglass load indicator.
What are we going to do?
We’ll build an easy loading screen, which will pop-up whenever the dashboard is busy retrieving data.
Step 1: Setting up the connection properties
Navigate to the data manager and open the ‘Usage’ tab of the connection you want to activate the loading screen for.
In the ‘Load Status’ section of this tab, there are a couple of fields displayed. Normally, you might activate the ‘Enable Load Cursor’ checkbox, which will result in showing the good old hourglass.
If you want to advance things, you might use the ‘Loading Message’ and ‘Idle Message’ texts, which you can bind to a cell through the ‘Insert In’ option. After you binded to a cell, you can have a label component to display the text. This looks better than the hourglass but is still not really what we’re aiming for.
Step 2: Changing the ‘Load Status’ properties
Change the text in ‘Loading Message’ into ’1′ and the ‘Idle Message’ text into ’0′. We’ll use this text as a dynamic visibility parameter, to show and hide our loading screen.
What have we done? Basically, if a connection is retrieving data, the value 1 will be placed into the cell defined under ‘Insert In’. When the data is retrieved and the connection turns idle, the 1 will be replaced by a 0.
It could look something like below.
Step 3: Configure the loading screen
In the demo XLF, I’ve included a very simple but nice loading screen, including a small animation (SWF file). This SWF file is displayed by using the ‘Image component’.
This simple screen, consists of just a small amount of objects which doesn’t affect performance in any way worth mentioning. The most easy trick, is to use a canvas container component to include the separate objects of the loading screen.
Now navigate to the properties of the canvas container and open the dynamic visability properties. Bind the ‘Status’ cell to the cell selected for ‘Insert In’ in step 2 of this tutorial. Set the key to, for example, 0.
This property will ensure that the loading screen will only be displayed if cell A:1 of your worksheet has value 1. The value 1 is inserted on refreshing data.
Step 4: Enjoy the waiting
If you fire up your dashboard and a connection is being refreshed, the load screen will popup. It might look like displayed below.
Click the image for the live SWF demo.
You can download the source xlf file here.
The main goal of adding a better looking loading screen with a more dominant presence, is to improve the overall user experience. The user is being informed in a clear manner, that data is being loaded. If you’d like, you could make specific texts for specific sets of connections. You could also display the average waiting time. The possibilities are almost endless.
I often put a semi transparent topping on the rest of the dashboard when a ‘dialog’ like the load indicator is active. Take a look at the example below (the text is Dutch).
I’ve used a black rectangle with a certain level of transparency. This makes it clear to the user that something is going on. This may prevent mouse clicking frustration without seeing charts being refreshed.
I hope you learned something by reading this post.
Update 12/14/12: My colleague Ralph Knoops came up with a handy site with free load indicator animations. You can also download the sample FLA files from that site and change them according to your own preference.
In this blog post, I want to share a simple feature for SAP Dashboards to visually support the ability to compare multiple KPI’s with each other.
Imagine that you have multiple KPI’s you’d like to analyze. In the example below, I’ve displayed three simple deviation graphs (0 = target; above 0 is ok; below 0 is not ok) that display KPI info. It can be interesting to analyze if there is a relation between the scores of the three KPI’s in a specific month.
In the graph design below, It is quite difficult to compare the values. If you scan from the top graph to the two graphs below, you’ll easily loose track of the right column.
This has multiple reasons:
- The title of the individual KPI graphs is placed above the graph, instead of left of it. While comparing a bar in the top graph with the graphs below, you’ll have to ‘cross’ the title of the graph below. This distracts the reading process.
- Every graph has it’s own X-axis including category labels for the month.
- The distance between the three graphs is quite large.
- The black Y-axis distracts while analyzing (non-data pixels)
Now how can we easily support the process of comparing the KPI values for a specific month? I’ve made a simple demo dashboard to reduce the issue. In the following example, I’ve used five KPI’s.
In this example, you can easily compare the bars of the graphs because the selected month is put into ‘focus’ by marking it with a grey area. I’ve used a simple combination of dynamic visability and drill functionality. From a design perspective, I’ve eliminated some of the graph elements like the Y-axis, the X-axis labels, KPI titles (could be placed on the left) etcetera.
This is just a quick showcase / prototype of the technical functionality.
Let me know what you think of this.
Final note: This dashboard was developed using SAP Dashboards 4.0 SP04 Feature Pack 3
This week one of my colleagues asked me for help, while facing a challenge in Xcelsius / SAP Dashboard Design, at one of our customers.
The customer wanted to be able to drill down a whole bar, from a stacked bar chart, into a separated bar chart in wich the segments of the stacked bar, would be displayed as individual bars.
This doesn’t sound like a problem until you check the properties pane of the stacked bar chart object. If you set the ‘insertion type’ for the series (every single segment of a stacked bar is a single serie) on column or row, you’ll notice that the destination area of the individual series must be different from each other. This makes it hard to drill down a whole bar at the same time by clicking just a random segment of the stacked bar. If you select ‘insertion type’ value, you can only drill one value at a time.
Well how do you fix this?
I cracked this nut by adding some filter boxes and some MS Excel logic (which of course can be made invisible during run-time).
The further explanation of the case and my solution are included in the SWF file which you can open by clicking here.
For downloading the XLF file, click here.
Final remark: Design aspects were irrelevant for this case. The only purpose for now was fixing the issue. If I had to design a set of graphs for this case, the dashboard might have looked completely different.
In general, the amount of data you load into your dashboard model, should be as small as possible. Their should be a purpose of every bit of data existing in your Xcelsius / SAP Dashboard Design model. It makes it easier to support and it’s better for the overall performance.
One way of minimizing the amount of loaded data is to set ‘Input values filters’ on a SAP BW Netweaver data connection. It’s quite simple to do this and I won’t explain this in detail now since many resources already described how to do this.
Using filters on key-figures
There is one specific thing I’d like to pay some extra attention to; using ‘input values filters’ on SAP BW query ‘key-figures’ instead of characteristics. If you set up a input filter, you need to bind to the cell that contains the filter value.
What is important here, is that you use the ‘Key’ value instead of the description. The tricky part for ‘key-figures’ is, that they don’t have a ‘key’ value. Does this mean we cannot set a ‘Input Values Filter’ on key-figures? The answer is no, you can set a filter on key-figures.
How to do this?
- Open up your SAP BW Query Designer and navigate to the key-figure you want to filter on.
- Select the key-figure and navigate to it’s properties.
- Navigate to the ‘Extended’ tab.
- Copy the ‘Enterprise ID’ value.
- Use this value as the ‘key’ value for the key-figure.
1. If you want to filter on multiple values, separate the individual filter values by using ;
(dot comma) between every value.
2. The filter value is not case sensitive
An alternative route is to get all key figure ‘Enterprise ID’ values by using the ‘Output Values’ section inside the data connection properties. Select the node under >Characteristics > key-figures > input help > key.
Next, bind to a cell range and all available values will be transferred into the assigned data range.
If you have any more questions on this topic, feel free to contact me.