So over recent months I’ve been playing with Mike Bostock’s D3 visualization library. But then who hasn’t?
I’ve been able to adapt a few of the examples from his Github repository using local file-based data. I even dropped a few into a SAPUI5 Shell template. The following screenshots show a short sequence from the beautiful animation of the Gates Foundation Education Spending dataset by Jim Vallandingham, and based on the great work of the NY Times crew:
And here are a few other examples:
I have more … but as I mentioned they all use CSV or JSON files as their source.
Being an SAP Analytics consultant and one working in the Retail industry I wanted to see if I could hook these visualizations up to SAP datasets and especially in a way that used the least amount of technology (some of my clients need convincing before they invest in the latest bolt-on). This seemed like a good way to demo the art of the possible using the client’s own data and to open the debate on the appropriate use of visualization technology. Incidentally as a company we’re also playing with the concept of Analysis as a Service (AaaS), and this approach aligns nicely with that concept too.
I wanted to do this without using Gateway or any other ‘bolt-ons’. At the very least and depending on the effort required this could become the entry-level production option for exposing SAP data via the HTML5 technologies. To restate the original objective, this seemed like an ideal way of bringing alive some of the more sophisticated visualization concepts for our clients using their own data.
The dataset I decided to use for this demo is the technical performance data that is captured using the operating system collector SAPOSCOL and which is accessible via the function modules in the SMON function group. Incidentally this will make an interesting use case for SAP HANA, and we’re also working on a prototype of this in the office at the moment.
Here is a quick overview of the process and a few ‘gotchas’ that robbed me of a few Saturday evenings (yes, what a very sad existence I lead):
- Decide on the dataset you want to use – this will no doubt be given to you in the form of a requirements specification, but the beauty of the ICF approach is that literally any ABAP function is available to you, along with all those that are yet to be written.
- Determine what kind of visualization best fits the data (there’s a famous book about the process of designing visualizations: The Grammar of Graphics (Leland Wilkinson, Springer, 2005 );
- Build the visualization using local data (CSV, JSON, XML, etc), this allows you to modularize the development. The client-side development uses open source HTML5 technologies and doesn’t require any appreciation of the SAP data structures. I am in awe of the D3.js library by Mike Bostock and use that as my visualization library of choice, but there a few others out there including the SAPUI5 framework itself, see the SAPUI5 page for some examples.
- Finally you have to set up the connection to the SAP data. Now there are a few ways of doing this and certainly SAP Gateway (and OData) is the official latest option. But remember I want to provide a proof of concept facility to stimulate interest, and so it must depend only on commonly available, standard SAP functionality. I settled on the Internet Connection Framework, and decided to build a custom ICF service that called a custom handler class. This had the extra benefit of easily allowing me to relax the Same-Origin-Policy protocol. You do this by adding the necessary headers to the server-side request handler, more of this in later installments. Doing so overcomes the restriction of calling SAP functions from client-side JavaScript (i.e. logic on a different ‘origin’). This took some research but I thank the following contributors for providing the knowledge for me to navigate this tricky area.
So let’s talk about the example we’ll build in this series. Here is the output we’re aiming for:
It will be a real time (well, very nearly real time) performance monitoring ‘dashboard’. The gauges and other animations are courtesy of the D3.js library, the client-side environment is the SAPUI5 Shell template from SAPUI5 and the data comes from the SAP function module: FILL_SNAPSHOT_DATA, delivered via the SAP ICF framework.
I’ll tackle each of these components in turn over the remaining parts of this blog series:
- Picking the visualization – introducing D3.js and the concept of data joins;
- Introduction to the SAPUI5 Shell ‘bootstrap’ environment and how to integrate components;
- Description of the SAP SMON functions and how to create a new service in the SAP ICF;
- Bringing it all together.
To recap: we are going to build a lightweight proof-of-concept dashboard that displays SAP performance data in an interesting and visually stimulating way. Look out for my next post
Andrew
PS I'm attending the Mastering SAP Analytics conference in Johannesburg currently and have been shamed into action by listening to Ingo Hilgefort and Miko Yuk, along with many of my wonderful analytics peers in South Africa, and the inspirational Chris Bertish - I'm just not doing enough with my life :smile:
3 Comments
