Posts tagged fun
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.
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.
Sound enabled SAP Dashboard model
312 months ago
Intro
Fridays always are the days on which a funny moment can pop up. This also was the case at one of my customers where I’m hired for my SAP BusinessObjects BI expertise. Since the EURO2012 soccer championship is near and every department has their own ‘betting’ poules, I suggested that it might be fun to build a funny EURO2012 dashboard in SAP Dashboard Design to show which colleagues were doing great and which weren’t. This was the beginning of something really funny.
I came up with the idea of a dashboard showing the match schedule, ranking of colleagues for the poule, but also some funny elements like a live twitter feed and sound board. The sound board would offer the possibility to show a picture and play some funny quotes from colleagues. I’m sure you can come up with some quotes from your own buddies.The idea was received as very cool, but now I just had to think how to build it. It took me quite some experimenting and thinking, but in the end the solution was quite simple.
Sound in a meaningful way
Of course the EURO2012 dashboard is a funny application of sound in a dashboard but from a User Experience design perspective, there can be very useful applications of sound in dashboards. What about a voice over for the most important functionalities? Or a played sound alert, in addition to a color code alert, if something really critical is going on? Or perhaps for users that suffer from colour blindness or have trouble seeing things in general. I’m convinced that there are scenario’s in which sound can be useful. Of course, your design should be sound independent but it can add extra value.
The challenge
The biggest challenge was how to integrate music files, for example MP3, inside my SWF file. Of course I could integrate my dashboard in a HTML site which exists out of multiple containers. For example one container for the dashboard and one for the sound play controls etc. But I wanted to integrate the whole functionality in a single dashboard.
So I wanted to record voice (MP3) and integrate it in my SWF file or activate it from within my SWF file. At first sight I was thinking about using a URL button or connection to trigger the sound files. But quite fast I realized that it would probably be possible to convert MP3 to SWF. Than all I had to do is import the SWF object inside my dashboard using the SWF loader or Image component.
That should work right?
How to do this?
Step 1: Find a tool to convert audio (e.g. MP3) to SWF
I searched Google and the Hoo Technologies converter. It’s plain simple and does exactly what I wanted to do. It even has a ‘record’ function from which you can directly record and convert your soundbites. The limitation is that in the trial version it only converts the first 60% of your sound clip. The simple solution of course, is to add some emptiness in the last part of your sound clip.
After the conversion, multiple files are created, including .WAV files. The only file you need is the .SWF file. The sound is included in this file.
Step 2: Create a dashboard and import the SWF sound files
Just create a dashboard model or open an existing and add the image component. This component supports SWF files (not xcelsius) and creates a nice play control object. After it’s imported, you can preview and test the result.
Concluding bits
Perhaps you expected the solution would be more complex but like many times, the most time is consumed by figuring out what’s the best way to realize this. The play control button starts playing as soon as the dashboard is loaded. This might be not what you’re looking for.
I noticed that if you include the SWF file in a dynamic visibility enabled canvas container, the play control object will start playing only when the object is visible. This means you could make a button that controls the visibility of the player component (which could be made 100% transparent) and with that the exact starting moment for the sound.
There is a test XLF and SWF available for download.
I wish you good luck with the implementation of this cool feature. If you come up with some interesting designs or applications (funny is also interesting) please share them with me.
That’s all for now folks!
Custom paint Parrot AR Drone at the VNSG2011
32 years ago
This week the VNSG 2011 event took place. The VNSG is the Dutch community for all SAP and BusinessObjects clients, partners and enthusiasts. Of course I had to be there so I joined the party. Since I recently switched jobs I was representing The Next View and our services. But these events are not only about keynotes and client cases, it’s also about bringing along some nice gadgets.
This year I came up with the idea of the Parrot AR Drone which can be controlled with your iPhone or iPad.
A couple of its features:
- WIFI connection with your iPhone or iPad
- Camera mounted on the quadrocopter
- Possibility for dog-fights if you own two pieces
This is how it looks like.
After it arrived at the office I gave it a indoor test flight. Because we decided to give it a custom paint job, the foam bumpers weren’t mounted during my test flight. The result? A paint trading job with one of the office walls.
After the drones arrived with their special paint job, we brought them along to the VNSG and we made a little movie clip.
The Next View – Parrot AR Drone
This sure is one of my favorite gadgets. The only down side is it’s limited battery life of approximately 15 minutes. Let’s see what we can come up with next year 
Recent Comments