Design Studio 1.2 SDK - An adventure in creating a data bound Chart Component wrapper

[mike_howles4]

Update #2 (9/29/2014):

• Github Repository cleanup - New source code link here:
  entmike/DesignStudio1.3UtilityPack · GitHub
• Deployable version can be found here:
  Design Studio 1.2/1.3 SDK - Design Studio Utility Pack

Original Post:

This blog post is a long time in coming, as what started as one thing, ended up being something quite different by the time I was done banging around on it.

I've created a number of other SDK Components, however none up to this point have been Data Bound (bound to a Datasource) so because of that, usability is a bit limited unless we resort to a bunch of BIAL setters and getters to shuffle data around.  So I figured, no time like the present to dive in.

First, SAP's SDK documentation offers up 4 specific means of working with a Datasource's result set:

1. ResultCell
   A single data value.
2. ResultCellList
   A single row or column of data values.
3. ResultCellSet
   A complex cartesian selection of data values from rows/columns.
4. ResultSet
   A raw dump of the entire result set.

For my component, I focused on ResultCellSet, as it gave what I felt to be the most flexibility for my usages.  You can find more details in the SDK documentation.

It was quite simple to make a component databound.  Simply put, setting a databound flag in contribution.xml is all that is needed.  Once this is set, the DS runtime knows to make available a DataSource property in the property sheet on its own.  With that, I also added a property that corresponded to my ResultCellSet selection type.  Example:

<property id="dataResultCellSet" type="ResultCellSet" title="Chart Selection" tooltip="Optional - Select certain rows or columns of Query Results" group="DataBinding"/>

With that, I had to think about what to actually DO with the data.  Grouped Tables?  Autofilter Tables?  Insanely Cool D3 Visualizations?  How about something in the middle and a little tame.  I decided to write a chart wrapper with some options not present in SAP's charts today.

Why Charts?  I mean, SAP has a bunch of charts already, right?  Yeah, but they aren't yet as configurable as some people would like.  I still to this day think that BEx has the best configurable Charting API (the old IGS days, ah....) -- There are just simply a lot of nitpicky things about Design Studio's charts that I wish could be fixed, like Legend positioning and formatting, axis formatting/positioning, zooming, more granular control of series behavior, etc, etc, etc...  So do we wait until it gets better?  I'm impatient, so let's try it on our own!

At SAP TechEd 2013, with the announcement of the SDK coming with DS 1.2, it was said more than once that it was quite feasible to bring-your-own UI libraries and charting APIs if you were so inclined, so with that, I did a quick comparison between some popular HTML5/JS charting engines, and settled on using Highcharts for the following proof-of-concept.  While I could have gone with FusionCharts, ChartJS, or my own with D3, it doesn't matter.  Highcharts was the quickest for me to pick up, but this isn't my personal endorsement of it over any other charting API.  It didn't matter for this POC.  (No, I am not a Highcharts employee!)

Probably my biggest annoyance is how the SAP Charts will compound or concatenate excess dimensions in their chart.  Example view:

(By the way, I am using SAP Demo Cube 0D_DECU as the data source for all the following example.)

The Chart:

Yikes.

Sure, I could make a 2-Dimensional initial vie selection instead, however I do not want to be in the business of having to do a lot of BIAL acrobatics to drill out or in different measures and all that.  I'd prefer it to work more like you'd acquire Data in Lumira or export to Excel or query from Webi.  One pull, and then work with the data...

Typically, these pulls do one of a few things, such as projection (or local aggregation) or filtering or grouping.  Webi and CR today do these sort of things.  For my resolution of how to handle excess dimensions, I chose filtering for my proof of concept, however grouping and projection are equally valid in my opinion.

So, let's see a different approach to how SAP's charting engine concatenates the dimensions with the same data set.

Step 1, pick a data source and pop in the component.

Next, drag the Datasource on top of the component, and it automatically binds the datasource behind the scenes!

After setting a Series designation and an x-axis Dimension, the chart comes to life:

We can observe a few features already.  We can see that after picking which dimensions to chart, the excess dimensions are made as dropdown combos to filter around.  A separate exercise outside the scope of this effort would be aggregation/projection and/or grouping.  I'll leave it to the community to fill in the blanks :smile:

But, what can we improve on this chart?  We probably do no wish to see Costs mixed with quantities most likely, so let's see how we can filter down what we are looking at with the 'Chart Selection' property located on the property sheet:

Looking better...

...but I don't like line charts.  Let's try a groovy spline chart at runtime:

(Click image for animation):

You can see how the extra dimensions have become autofilter dropdowns (rendered using SAPUI5), and how we are also seeing the zooming capability of the Highcharts charting engine in effect.

What other options would be nice?  Let's do some legend formatting and switch to another chart type:

Pretty cool stuff.

A compilation of a few other chart types (not all-inclusive):

So, in summary, I think that the SDK as-is, provides a tremendous opportunity to use existing charting APIs, or even your own if you are a d3 wizard, with high effectiveness.  And while this has been a fun experiment, I do not plan on finishing this component in its current form, and am open to releasing the source to the community for dissection, if there's enough interest.  I can put it on Github, as I have a few of my other components as-is.

And lastly, as when it comes to any wrapper usages, make sure you are licensed or using open source software when using in a productive environment!

Comments and feedback and code sharing always welcome!