Posts tagged Data Visualization
There’s only room for one Y-axis
21 month ago
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..
Example 1
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.
Example 2
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.
Example 3
Less murders or not, IEX will definitely loose tremendous market share.
Example 4
For this example, I used a redesign of the graph. What story is this graph telling?
Less murders or not, IEX will definitely not loose market share.
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.
Data Visualization poster – 8 tips for an effective dashboard
12 months ago
It’s been a while since I shared some new content with you. The main reason is because I’ve been extremely busy with client projects and expanding the Intelligence team at The Next View.
A couple of months ago, I gave a presentation at SAP Netherlands during the SAP Forum event. The SAP Forum (previously known as SAP World Tour) is a one-day event on which SAP presents their innovations and latest technology. I hosted a presentation on effective dashboard design and data visualization principles. Until now, I wasn’t aware of the fact that the photographers caught me in the middle of the action during the event 
Normally session attendees receive the presentation but I wanted to give them something extra. Something that would tickle and excite them even far beyond the moment of the actual presentation.
Together with some of my colleagues, we came up with the idea to create a high quality, A1 sized poster containing 8 tips on effective dashboard design. The idea was born. After many pizza sessions, different prototypes and discussions on content (could we copy Stephen Fews quote “no more pies” ?) the poster came to life. The creative brain for the design of the poster is colleague Frodo Jansen, a very talented UX and BI consultant.
At the SAP Forum venue, every attendee of my presentation received a poster and it was a great success. But we didn’t expect that it would go viral after mentioning it on social media like Facebook and Twitter. The result? We had to print over hundreds of extra copies. Customers even started sending pictures of their BI team putting the poster on their office walls or project war-rooms. A great success we never expected to become so big.
After this, I wanted to be able to spread this data visualization poster with my international followers so Frodo and I decided to translate it. Today, the English version of the Data Visualization poster is born.
Drop me a line to receive the poster digitally in high resolution or printed on hiqh quality A1 sized paper.
If you decide to put it on your office wall, I’d love to add a photo of that to my collection so make sure you’ll share it with me.
How to create a loading screen for SAP Dashboards
45 months ago
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.
Conclusion
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.
SAP Dashboards SP05: first impressions on mobile HTML5 functionality
386 months ago
Today SAP Dashboards Service Pack 05 is released on the SAP SCN marketplace. Of course I downloaded it right away.
The first thing I noticed on SCN is that it is a real Service Pack, not a full installation. So you can install it quite fast.
I installed it on Windows 7 and when you do this, the first time you start xcelsius.exe, you might receive an error message (C++ runtime error). Just right-click the xcelsius.exe file and select “run as administrator”. You only have to do this the first time. I encountered this issue before and already wrote a short blog about it in the past.
Object browser enhancement
SAP added a search box to the object browser pane. For me, this is great since I often have dashboards with lots of objects.
For example, when you enter “actual”, all objects with that name will be shown.
This (simple) feature has been on my personal wish list for quite a while now so I’m glad this feature has made it into this SP05 release.
Mobile compatibility panel
Of course, the main new features are to be found in the mobile and HTML5 support topic. One of the new features in this area is the whole new ‘Mobile compatibility panel’. This panel is new, next to the existing panels (components, query browser, object browser).
If you have an existing dashboard model and you open the mobile compatibility panel, all object names are shown, including a icon to tell if they are supported for mobile export.
In my (quite simple) dashboard example, the print button and sparkline object aren’t supported. This results in not displaying the objects in the dashboard in preview mode. The print functionality is integrated into the SAP BI mobile app so you might not need a separate print button anymore.
You can see in my example above, that the object names contain a number behind the name label. This means there is an error or a warning. In this case, the warnings apply on custom colour and theme settings of the used objects. Only one theme is supported for now, the Nova theme.
Next to this, you can see that there is a general comment, which suggests to change the canvas size to the optimal iPad screen resolution.
Previewing
The preview button has also changed. It now has two mobile related options. Fit to screen and orginal size.
After you select one of the available options, a iPad case surrounded dashboard will be shown, including the ability to test the interactivity of your dashboard model. Here comes some magic.
Since your navigating the dashboard with your fingers, and not a mouse, it can be tricky to see what line you are watching. SAP added a extra feature, which makes it able to easily analyse the data on mobile devices by showing a ‘mouse-over’ help screen showing relevant info.
Saving to platform
The options for saving your dashboard have also changed. You now have the option to save your dashboard as a flash file, as a mobile file, or both.
One of the SAP developers even put a little ‘easter egg’ or real mistake into this SP05 version. He probably was a Borat fan. See the menu option for ‘Save to platform as > Dashborads object for desktop only’.
iOS optimized font types
If you navigate the properties of the objects, you’ll also notice that some new font types are added, specifically for mobile use.
Support of most used components
I’ve made a little test dashboard with a subset of the components I personally use the most in dashboard projects.
In the design mode, this looks as follows.
If we now check the mobile compatibility panel, we’ll see some errors and warnings.
Note that the spreadsheet table, connection refresh button and horizontal bullet chart aren’t supported. Furthermore, there are some specific warnings regarding the combo box settings. It doesn’t support the number of labels displayed, six in my case.
If we preview it in mobile, you’ll get the following result.
Some results:
- The bullet chart has disappeared
- The alert functionality in the combination chart is removed
- The design of the buttons has changed
- There was a warning on the amount of labels of the combo box, but they are all selectable
- The refresh connections button has disappeared
- The spreadsheet table has disappeared
I’ve also tested some basic dynamic visibility functionality by using a toggle button to change the visibility of a graph and this worked.
Other general test results:
- The value component is not supported
- The area chart component is not supported
- The list builder component is not supported
- Mouse over interaction for buttons and graphs aren’t supported
- HTML formatting for text boxes is not supported
- Animated entry effects for objects aren’t supported
In general, quite a large set of components is supported in this first release. SAP announced that more components will be supported in the near future. Most of the unsupported components or properties are not critical.
Check the updated help section of SAP Dashboards to see all details on what is and what isn’t supported.
Support for data connections
All connections using the data manager are not supported.
For example, the BICS SAP Netweaver BW connection type through the ‘data manager’ is not supported for mobile. For SAP BW, only SAP BW connections using the query browser are supported. This means you’ll need to re-build all your connections through the query browser. This can result in quite some rework.
If you open the data manager, it states “These connections are not supported on mobile devices”. This means you’ll always have to use the query browser instead of the data manager if you want to use mobile dashboards.
Performance
I’ve tested the performance by opening existing SP02 dashboards in SP05 and the results are disappointing in some test cases. The time to open a dashboard is around 5x as long as in SP02 and starting a published dashboard also takes about 5x as long. I encountered the same performance issues while testing SP04 (FP3) in the past versus SP02.
Since performance is one of the core factors for user acceptance, this can be quite an issue. I hope to hear from you if you encounter the same performance issues. In the past, I’ve already logged SAP support calls for the bad performance in SP04 (FP3) but SAP couldn’t reproduce the performance issues.
What are your experiences?
Important update: The performance issues only exist when using custom themes. If you use default themes like Nova, performance is not different from other SP versions.
Prerequisites for use on iOS devices like iPad and iPhone
There are some important technical prerequisites for being able to view mobile dashboards on for example iPhone and iPad.
1. SAP BI 4.0 enterprise platform with SP05
You’ll need 4.0 SP05 for using mobile dashboards.
2. BI Mobile server installed on your enterprise platform
The BI Mobile server handles the synchronization between your mobile device and BO enterprise platform. It checks which BI content (Webi reports, Crystal reports, Xcelsius dashboards and in the future SAP Design Studio (ZEN) documents) is made available for mobile use. Next to this, it passes the parameters set in the opened BI report/dashboard and communicates this with the Enterprise platform and returns the data.
3. SAP Dashboard Design SP05
The SP05 version includes the new mobile panel, compatibility checks and publish to mobile modes.
4. The iOS app SAP BusinessObjects Mobile for iOS version 4.4 (planned release is December 15th 2012)
You’ll need the app for viewing the dashboards on a mobile device since the app includes the HTML5 wrapper.
The overall architecture looks as follows:
First conclusions
I’ve tested this new SP05 version for about two hours now and I must say I’m quite positive about the first results. Of course I’m waiting for the release of the iOS app SAP BI Mobile 4.4 so that I can actually deploy to a mobile device but up till then, this looks positive.
The main concern is rework for existing ‘data manager’ connections.
SAP does show they’re still investing in this existing dashboard product and finally some real innovation and enhancement is in place. If you look at the current state of SAP Design Studio, I think Xcelsius still is the best dashboard solution in SAP’s portfolio for the upcoming years.
Update 11/27/12:
A smart guy called Joseph Warbington discovered a way to test your dashboard in HTML5 and get the HTML5 ‘source’ files without publishing to the platform. He uses the temp folder of Xcelsius. Very smart
Check this page to find out how to do this.
Update 12/5/12:
The SAP BusinessObjects 4.4 mobile app will be released on December 15th 2012.
SAP press release: click here
Update 12/18/12:
This blog post has made it into a official SAP note on SAP Dashboards SP05. That’s funny .
SAP Dashboards: Visually supporting KPI score comparison
06 months ago
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)
- Etcetera..
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.
To see this in action in a demo SWF file, click here. You can download the source XLF file here.
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
Recent Comments