Skip to Content
Author's profile photo Bipin M

Time-Series Chart in SAP Lumira

During his keynote at the internal developer conference(D-Code) in Bangalore, Michael Reh EVP of SAP’s Business Information and Technology unit, announced the local ‘Visualize Your Success – the Lumira Extension Challenge‘! All SAP employees in India were invited to participate and the winning criteria was set “No Boundaries“. The guideline was to build & submit a Lumira extension with VizPacker and to use the extension to build and share a story and a use case. Exciting prizes were up for grabs too, including tickets to Sapphire (Orlando).

To start with, several useful resources were provided – Lumira download link,  D3 Gallery & Data Geek finalists, Matt Lloyd blogs & YouTube videos, and of-course the very useful Lumira documentation. Contestants had exactly five weeks to learn about Lumira, D3, create the extension and submit their visualizations, all this was to be done apart from regular office work – during evenings and/or weekends. At end of five weeks, over fifty visualizations were submitted and an internal panel of Lumira experts worked hard over a weekend to choose the winners.

I am very excited to describe the awesome experience of creating a custom extension that was adjudged the first runner’s-up entry: “Time-Series Chart”

The one thing on top of my mind was to create a highly re-useable visualization that could display data across various dimensions & measures. An initial idea was to create a radial+slider chart but I soon realized its limitation of being able to show at-most two dimensions. Next up was the “Time-Series chart” submission that could display multiple time dimensions across the X-Axis (Days/Months/Years or Minutes/Hours/Days etc), a dimension on the Y-Axis and multiple measures.

The Lumira extension challenge provided colleagues a wonderful opportunity to learn and experience the power of data visualization and how it can provide very useful insights. I was faced with several challenges – aging JavaScript skills, learning Lumira and some of its internals and of course widely popular D3.js with its pretty steep learning curve. For a starter, I downloaded the free version of Lumira and played around with it for 30 minutes. To my wonder, the ever elusive world of analytics & data visualization was right at my fingertips, very intuitive and yet so powerful. Matt Lloyd‘s blogs proved to be the ultimate quick-start guide and in the next 30 minutes, I was already running the sample extensions in Lumira and was ever more confident of building my own custom extension. This experience proves yet again that SAP is on a path to building successful products that are simple to use, provide stunning developer and end-user experience.

Next up was what seemed to be an up-hill task of learning D3. There were tons of tutorials, youtube videos on the web, though intimidating at-first it did not take a lot of time to realize that a systematic approach to learning helps to a great extent. My suggestion is to look at small/simple visualization examples in the D3 Library, walk through the code, look up the APIs in D3 documentation and try to understand it, finally try using the APIs in some sample chart and try different variations of it. With 1-2 hours/day for a week of D3 learning, I was ready to start building my very own custom extension. If you are building a custom extension from scratch, the easiest way would be to build the extension as a set of stand-alone web page(s) and javascript(s). If you will re-use a pre-built D3 chart, better approach might be to build it directly in viz-packer. Finally after some trial-and-error situations, a few days of coding, I was pleasantly surprised with the results, a wonderful visualization in few hundred lines of code. I also took feedback from peers and incorporated few good ideas.

Features of Time Series Chart 

  • Multiple dimensions support
  • A mini-view and a zoomed-out main view area
  • Selectable & scrollable areas in the mini-view
  • Minimum selection area for a set of measures across the lowest(bottom) dimension
  • Expand selection to span multiple dimensions
  • Measures Axis for selected data displayed at the top
  • Selected area also highlighted in
  • When measures axis is too cramped, axis labels changes to lowest dimension with minor ticks representing the measures
  • Display measure label once when only 1 measure is available
  • Color coded ranges for selected dataset
  • Numbers for individual items are displayed; Hovering over an item displays all information (dimensions, Avg etc)
  • Average values for currently selected dimensions (No average if only one set of measures are available)
  • Animations for selection changes, tooltip(item hover), axis changes etc

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.