Archive for the ‘Data visualization’ Category

How to publish CONNECTED SAP Dashboard (Xcelsius) as HTML5 OUTSIDE the mobile app!

This is a fully functioning connected HTML5 version of an SAP dashboard that connects to the eFashion universe on State change and refreshes the data. Yes. You are not reading this wrong. No plugins used, no third party tools or tricks, just SAP dashboard XLF file. Read on to learn more…

Ever since I read Joseph Warbington SCN post about finding SAP Dashboard html5 source files when previewing a dashboard for Mobile, I’ve been intrigued with the possibilities this opened up.

So, during the SAPPHIRE conference, I managed to find an SAP employee on the show floor who was a member of the Dashboard product team. “Can you please tell me when will SAP make the option to export dashboards outside the mobile App available?” I asked. “Well, never… there is no such plan and dashboard relies on the platform for certain things, so we will not make such functionality available…”. Hmmm… Really. Well, this conversation left me a bit disappointed (and by the way, I have no idea if this is the official SAP stance, this was just one side conversation, with one person who works at SAP, who may or may not know the entire product road map). So, after I got home, I decided to try and replicate the full dashboard functionality in HTML5 outside the BI app.

As Joseph Warbington describes, harvesting the HTML5 source files is relatively simple, and it all works just fine, except for one important piece. Connections… Since SP5, we can use the Query Browser to embed connectivity in the mobile dashboards, and quite frankly, without connectivity, I don’t really see much enterprise use in the dashboard. And of course, when trying to get the connections to “just work” after copying the HTML5 files from the Temp directory does not work.

So, armed with chrome network debugger, fiddler, a good understanding of the various BO SDKs (the web services and enterprise ones in particular) and with the invaluable help of my colleague, Yevgeniy (Eugene) Tsvetov, we set out to understand how Dashboard invokes connections and what we would need to get the connections to work outside the BI APP. The result is displayed at the top of this post.

The files generated by SAP dashboard already contain all the scaffolding needed for the connections to work, the only thing that is really missing is the enterprise session. So, by adding a few lines of JS to the files generated, we can pass the session using the enterprise and web services SDK. And REST assured, it all works!

This opens up the possibility for Dashboard designers to post their fully connected awesome designs not just to the BI App, but also to any web site, without needing to use flash!!! Enjoy…

BI Happiness with html5 charts animation

Published by Ron Keler in Data visualization, HTML5 on April 16th, 2013 | No Comments »

The other day, my colleague Rob Blackburn wrote a really cool and elegant function to animate html5 charts for our dashboards. It was so cool, that it even made my scatter charts smile…

Infographic style crystal report

In a continued effort to demonstrate the capabilities of the various BusinessObjects reporting tools as adequate in the user interface area, i created this info graphic style crystal report. This report is modeled after my colleague’s Josh Tapley original InfoGraphic Style dashboard, and follows my example of the InfoGraphic style Webi. All this is simply a demonstration of the visual capabilities of these tools, and a statement of BI Happiness that declares that delivering data to users DOES NOT have to be ugly, boring and difficult. To be successful, users must WANT to use the reports, with no users adoption, any BI project is doomed. In this example, a crystal report was used, leveraging images and formatting options, as well as the RAS SDK with a custom viewer to embed the reports in a seamless fashion in a web page. Enjoy!

H + The Digital Series – animated interactive timeline chart

A colleague at work recently told me about the web series H +. It sounded interesting, so i went to check it out, and was instantly hooked! For me, this was a brand new genre, and one that fits the new connected world we live in perfectly. Each episode in the series is 3-6 minutes long, so you can watch the episodes in all kinds of time configurations. The story is thrilling, the production is superb, and the whole experience is riveting. One of the interesting things about the series is the way the plot unfolds, where each episodes jets the viewer into a different time slot, related to “the event” (i really don’t want to spoil anything…). So in an effort to try and put the pieces together, i created an animated line chart that plots the episodes timeline. Click on the image below to view the animation and mouse over the data points to get episodes info. Enjoy..

 

Recalls dashboard

The Consumer Product Safety Commission (http://www.cpsc.gov/) collects and publishes information about product recalls. The department made its database of recalls information available to the public as a web service, which means we can have fun with this data… Leveraging our html5 dashboarding framework, I created a dashboard that consumes the web service (allows user to select start year for the recalls data) and aggregates the number of recalls based on user selected attributes (like country or manufacturer). The chart display shows categories that had 4 or more recalls in the selected time frame, the Raw Data view dumps the entire data set on the screen. This is interesting stuff.. Enjoy!

Visualization for Unstructured Data

One of the most interesting data visualization and BI concepts these days is unstructured data analysis. To demonstrate one use case for visualization analysis of un-structured data, and digesting large amounts of information into a more palatable dish, i created the following website word analyzer. The idea started with analyzing news web sites, but this can certainly be used more generally. In this example, a website address is being scraped using a server side (php) program, all the words on the webpage selected are counted, and then loaded into a tag cloud and a column chart based on the number of occurrences on the page. Please checkout the example for some more info on how it works. I found it to be very interesting… Enjoy!

HTML5 Animated bubble chart

Published by Ron Keler in Data visualization, HTML5 on August 14th, 2012 | No Comments »

Bubble charts are very powerful data visualization tool since they can encapsulate large amount of analysis aspects in a compact presentation. Color, position and size are used to deliver a message. They can also be quite beautiful, and in this html5 animated version, randomized data is driving a bubble chart for some cool effects.. enjoy.

Tag Cloud and Charts Integration

The following example uses a DataTable to populate a Tag Cloud and a Map chart. The tag cloud is interactive, and clicking the state will filter the map and column chart accordingly. Just another example of our html5 data visualization capabilities… Click the image to open the example in a new window.

Visualizing Business Velocity

Published by Ron Keler in Data visualization, HTML5 on July 11th, 2012 | No Comments »

The definition of velocity as distance over time, can be translated in the business world into revenue over time. When looking to measure and visualize the business velocity, or speed, we can use a couple of approaches: actually displaying motion that indicate the speed, as a visualization, or displaying the distance covered (revenue gained) over the amount of time (say months). The visualization below allows you to use both approaches in a fun interactive way.
First, you can pick the velocity for each of the business unites (as measured by revenue per month). When you click the Run button, the speed selected will dictate the speed of the rising bars, visualizing the amount of time it would take each division to hit it’s $1M target.
You can also switch to the timeline display type to change the columns axis to be months, and display how long it would take each department to hit its target (shorter bar are good in this case).
All of this of course is html5 and will work just as beautifully on any browser and device… Enjoy.

What-if analysis example – HTML5 style

One of the interesting things dashboarding tools and technologies have always been able to do was providing users with the ability to run “what-if” analysis. Changing variables that impact results and allowing users to visualize the impact of the change is a very powerful tool. Using our html5 dashboarding solutions this can be done now on any device with ease. In the example below, you can change the price of the products on the table, and the chart below will reflect the change in the total based on a constant quantity sold. Enjoy.

© BI HAPPY
CyberChimps