Animated layered charts

Over the last few weeks i have been working with my colleagues at Cleartelligence on our html5 businessobjects dashboarding offering, and boy, does it look good! I managed to surface up and get some air this evening, and thought i’d post a little example of the kind of visual capabilities we will put at the hands of BO clients.

Being able to layer charts is an important way to articulate a comparison between two data sets. While  side by side comparison is typically adequate, in some cases, you just wish you could place two charts on top of each other to get the real picture, and perhaps add some drama.. Using our solution, this is one of the things you will be able to have.

(OOH, OOH, this works great on my iPhone..!)

Control the dashboard size in SAP BI Launchpad 4.0

Xcelsius dashboards developers who leverage the BI 4.0 BI Launchpad as the content portal for delivering their work, have long suffered from the sloppy interface between Xcelsius and the portal.
First (and foremost), when you publish an Xcelsius or dashboard object (the .swf) into the BI Launchpad (or InfoView for that matter), you lose control over the canvas size. This means that the dashboard will open in a window the size allowed by the user browser and preferences. The impact on the dashboard design can be devastating, rendeing completely unusable in some extreme situation, or at a minimum less then professional looking, as fonts get “squashed” components overlap, and graphics degrade as they stretch or slim down.
This is nothing new, and has been the same situation since XIR2, through 3.1, and now, with 4.0, the problems still remain.
To have complete control over your dashboard presentation, you really should consider hosting it in a different portal, but that is not always feasible. If you are “stuck” with the BI Launchpad, you can use the following technique to address the problem described above, as well as another, less common problem, related to flash crossdomain restrictions. If your dashboard has live data and is making connections to a web service or xml feed, the web service url will have to be fully qualified in the xlf file. The problem will hit you if any of your users use a variation on the host name you used in your web services url. For example, if you use http://myboserver:8080 and your users use a fully qualified name, or even an IP address to get to the server (http://myboserver.mycompany.com:8080), they will end up with a crossdomain error instead of a working dashboard. To overcome this problem, you need to use a dynamic host name, based on the client request.
To address both problems, you can do the following:
First, add a flash variable connection in your xlf. In my example, I called mine host. Use this host flash variable to create a formula in your model that will concatenate the flash variable value with the rest of your web service url. Flash variables are populated on the swf initialization, and the values will be passed to the model before the web service connections are made.
Next, create a directory on your BO web server (tomcat in most cases) and place a .jsp file in it with the following code:

<%
//Initialize var
String host = "";
//Get the host name from the http request
host = request.getServerName();
//Construct an openDoc URL and pass the host name to the swf. Use this url as the content src of the iframe, where you can set the specific height and width
String url = "http://"+host+"/BOE/OpenDocument/opendoc/openDocument.jsp?iDocID=Abvx6T2dOeZNiF8bWJ11Qfk&sIDType=CUID&lsShost="+host;
%>
<iframe src="<%=url%>" height=630 width=1030 marginheight=0 marginwidth=0 frameborder=0></iframe>

 
Now, create a hyperlink in the BI Launchpad to this file (for example, if your file is called link.jsp, which resides in a folder called links and you wanted to use a relative path, your url would look like this: ../../../../../../links/link.jsp)
That’s it! Your swf is still safely secured in the BO repository, openDoc will only work if the user has logged in properly (or prompt the user to logon if not), so any universe security built into your connection will remain intact, and your dashboard will open using the width and height specified, regardless of the host name the users end up using.

Webi Refresh on open in 4.0

Published by Ron Keler in Web Intelligence on April 2nd, 2012 | No Comments »

I never quite understood why webi reports save with data by default. Since almost all usage scenarios of webi i have ever encountered involve either viewing reports on demand, or viewing the last scheduled instance, leaving data saved on reports is not only a nuisance, but also a security problem.

Experienced report developers know to purge the report data before saving and set the report option to refresh on open, to assure the reports hits the database when opened.

In BI 4.0, the refresh on open option was moved, and i wanted to share its location, since i spent some time finding it myself… So:

Open your webi report in design mode using the interactive (java) viewer (the rich client works the same, i have not checked the html viewer, i assume it’s located in the same general area…). Click on the report properties button (top button in left toolbar) and then click the Edit button (small button at top)

  

You will see the option to refresh on open at the bottom of the Edit screen (with some other familiar choices…):

 

Google visualization donut chart

Published by Ron Keler in Data visualization on March 29th, 2012 | No Comments »

While working on an iPad compatible version for our healthcare enrollment dashboard, i wrote about utilizing google visualization API charts. One of the chart types we utilized in Xcelsius was a donut chart, and while the google visualization library doesn’t have a donus chart per se, i was able to produce one using some layering techniques. This nice interactive donut chart will render just as well on any browser or device. You can find the source code below. Enjoy.

 

donut.html src:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Task');
       data.addColumn('number', 'Hours per Day');
       data.addRows([
       ['A',    roundNumber(11*Math.random(),2)],
       ['B',      roundNumber(2*Math.random(),2)],
       ['C',  roundNumber(2*Math.random(),2)],
       ['D', roundNumber(2*Math.random(),2)],
       ['E',    roundNumber(7*Math.random(),2)]
       ]);
var options = {
width: 450, height: 300,
colors:['#ECD078','#D95B43','#C02942','#542437','#53777A'],
legend: {position: 'none'},
   animation:{
       duration: 800,
       easing: 'in'
     }
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function roundNumber(num, dec) {
 var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
 return result;
}
</script>
</head>
<body>
<div id="link_div" style="z-index: 3; position: absolute; left: 180px; top: 30px;">
<a href="javascript:drawChart()">Change Data</a>
</div>
<div id="chart_div" style="z-index: 1; position: absolute; left: 0px; top: 20px;"></div>
<div id="circle_div" style="z-index: 2; position: absolute; left: 180px; top: 127px;">
<img src="circle.png"></div>
</body>
</html>

Xcelsius Flight Seat Order models visualized

Published by Ron Keler in Xcelsius on March 25th, 2012 | No Comments »

On a recent international flight I had a chance to ponder how much the order of seating passengers really impact the amount of time it takes to get all the passengers seated. On one flight, the crew called passengers to board the plane by row number. Starting from the back of the plane and working their way to the front, row by row, passengers were called to board. On another flight, general boarding commenced immediately. Between passengers who do ignore the ground crew directions regarding which rows are boarding, and the many other variables that impact seating airplane passengers, does it really matter that much? While I do not have enough data to make a call either way, I was able to come up with a visualization exercise for this problem that combines several Xcelsius modeling techniques, such as combining the player selector with a history component to get a staggered dynamic visibility effect (the rows appear in order, and stay painted). Enjoy the XLF here.

Randomize seating order

Live poll using Xcelsius

Published by Ron Keler in Uncategorized on March 14th, 2012 | 4 Comments »

Which phone do you like best? iPhone? Android? Blackberry?

The example below integrates several techniques to come up with an interesting concept: an Xcelsius based live poll. This sample integrates Xcelsius with ajax to store your vote in the database table, xml feed to report the results of the current poll, and eic (external interface connection) to fire the xml connection when after firing the vote ajax function. By the way, i voted for the iPhone… (This example was tested on firefox)

Dynamically resizing images in Xcelsius

Published by Ron Keler in Xcelsius on March 8th, 2012 | No Comments »

It is sometime useful o be able to dynamically change an image size in Xcelsius, based on user inputs for example, or on a data variable that changes live, or as a result of user input. Xcelsius components, except for charts, are typically fixed in size and position, and there is no way to move or resize components on the fly. However, using the following technique, you can dynamically change the size of images in your Xcelsius swf to fit your data visualization needs.
To accomplish this effect, i used the slideshow component, and bind it to a url that is constructed dynamically based on the user input in the width or height sliders. The url is pointing to a php file that streams the image and changes it’s size based on the width and height variables supplied over the url (using PHP GD library). You can find all the source files (.php, .xlf) here. Enjoy!

 

Xcelsius bubbles

Published by Ron Keler in Xcelsius on March 1st, 2012 | 2 Comments »

Not much to say about this one, i just really like bubbles… Using bubble charts in Xcelsius can be very appealing.

 

Bookmark Xcelsius Dashboard

Published by Ron Keler in Xcelsius on February 23rd, 2012 | 4 Comments »

The other day, my colleague Josh Tapley (http://data-ink.com) and I had a conversation about being able to “bookmark” an Xcelsius dashboard. Basically, the idea would be to “save” the user context on the dashboard and be able to return to the same context. Well, below is an example of such an implementation. The dashboard is embedded in a php page. The Bookmark button on the dashboard is a text label with html code to trigger a javascript ajax function that takes the user context in the dashboard selectors, assigns them an id, and saves them in a database table. When the id is passed back to the embedding page, the proper values are retrieved and are used to initialize the dashboard. Enjoy!

Medicare dashboard – for your iPad

Published by Ron Keler in BI At Large on February 16th, 2012 | No Comments »

The pursuit of BI Happiness involves being able to view your own dashboards on your iPad or iPhone. To that end, i began converting our medicare dashboard into a pure html5 version. It works much the same way, using the dame data architecture (leveraging our mySql datawarehouse with php generated xml feeds to get data to the dashboard). This pure html/js version uses google visualization API with ajax calls to retrieve the xml data on combo box change. The xml feeds get converted to JSON format that can then be fed into a google data visualization DataTable and displayed in the chart. I also implemented transition animation effects, so as you change your state selection, the chart will “swoosh” nicely, just like in flash… Enjoy it on your iPad! And check in soon, more features coming…

© BI HAPPY
CyberChimps