Design Studio SDK Extension – Motion Chart Use Case
Idea Behind the Use Case:
SAP BusinessObjects Design Studio is an analysis tool which serves the purpose to make intuitive design based on analytical content and other OLAP applications. So, while working on the charting components of Design Studio, I found a motion chart online built in D3.js (source: https://bost.ocks.org/mike/nations/) which helps to analyze the data with three dimension (X-Axis, Y-Axis, Bubble Radius) over the years. Therefore, some research was done on how to include or develop such component in Design Studio. Hence, as a part of Design Studio Extension development, use case of Motion Chart has been recreated using SAP Design Studio SDK 1.6.
What is Motion Chart?
Motion Chart is a dynamic bubble chart which allows efficient and interactive exploration and visualization of longitudinal multivariable data. They provide mechanisms for mapping ordinal, nominal and quantitative variables onto time, 2D coordinate axes, size, colors, glyphs and appearance characteristics, which facilitate the interactive display of multidimensional and temporal data.
Technology Used:
Using Design Studio SDK in Eclipse IDE, the Motion Chart has been coded by implementing basics of JavaScript and its libraries, D3.js and jQuery.
- D3.js plays an important role in this use case for the rendering of chart, the axis and the movement of bubbles over the graph etc.
- Knowledge and concepts of HTML, DOM and CSS
- know how of SVG and canvas
Final Steps:
After Motion Chart was developed and tested, it was deployed as SDK Extension Feature, packed into archive file which is readily available for installation in SAP Design Studio as Custom Component.
Github Link to the Motion Chart Component:
https://github.com/AntarjotSingh/SAP-Design-Studio-SDK/tree/master/com.sap.motionchart