Update #2 (9/29/2014):

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.)

/wp-content/uploads/2014/01/1_370779.png

The Chart:

/wp-content/uploads/2014/01/2_370780.png

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.

/wp-content/uploads/2014/01/3_370782.png

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:

/wp-content/uploads/2014/01/4_370786.png

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 🙂

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:

/wp-content/uploads/2014/01/5_370805.png

Looking better…

/wp-content/uploads/2014/01/6_370806.png

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


(Click image for animation):

/wp-content/uploads/2014/01/m_370807.gif

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:

/wp-content/uploads/2014/01/7_370808.png

Pretty cool stuff.

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

/wp-content/uploads/2014/01/8_370809.png

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!

To report this post you need to login first.

23 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Michael,

    A very informative post once again. Thank you!

    In the process, since you’ve clearly had the opportunity to analyse the capabilities of the standard Design Studio charts, I have a related question, which in fact stems from this Design Studio Applications Not Resizing post.  This post suggests that components do not resize for different screen resolutions.  The issue is not the screen resolution specifically but rather the fact that in Design Studio 1.2, some components, such as charts, do not automatically resize when the browser window size changes, even if the height and width properties are set to “auto”.  Maybe I’m mistaken but I could have sworn this worked properly in Design Studio 1.1.

    I’m wondering if you’ve come across this issue with the standard charts and if so how you addressed it?  Here are the steps to reproduce the issue:

    1.  Create a new blank Design Studio project targeting the desktop

    2.  Drop the chart component onto the canvas and set the Chart Type to Column

    3.  Set the layout properties as follows:

    • Top Margin: 0
    • Left Margin: 0
    • Bottom Margin: 0
    • Right Margin: 0
    • Width: auto
    • Height: auto

    4.  Assign a BEx data source

    5.  Launch the application preview

    6.  Resize the browser window

    The result I experience is that the chart initially takes up the entire area of the default browser size when the browser window first opens.  If you then resize the browser, the chart does not adapt automatically, as I would expect given the “auto” setting of the width and height properties.  I was under the assumption that the purpose of the “auto” size setting was intended to allow the development of responsive page layouts but this doesn’t appear to be the case.  The chart size remains fixed.  Interestingly, if you apply the same layout settings to a Button component on the canvas then it does resize automatically with the browser size.

    What has your experience been with the standard Design Studio charts in this context?  In comparison, how does your Highcharts component behave when the height and width properties are set to “auto”?

    Regards,

    Mustafa.

    (0) 
    1. Mike Howles Post author

      Thanks for the feedback.  You are right, the delivered charts act differently when you have an elastic/responsive width/height of ‘auto’.  They do not resize as you’d expect them to.  It appears that it will re-orient itself if you change a property programatically in BIAL to force a re-render, however that’s a flaky workaround.

      My POC does not have this problem, to answer your other question.  Setting width and height to ‘auto’ behaves as expected.  I will post a GitHub link today.

      (0) 
  2. Fahad Ajaib

    Hi Michael,

    Thanks for such a nice post. I have one question regarding chart types. is it possible to change the chart type dynamically, for example by selecting a type name from drop down box should change the chart type automatically?

    Thanks and best regards.

    Fahad

    (0) 
  3. Carlos Pachon-Gomez

    Thank you Michael!

    Really useful post.

    I am bit of a newbie when it comes to SDK but your post has inspired us to explore the HighCharts functionality.

    So, I have used the code you posted in Git Hub and followed all the instructions in the “Developer Guide: Design Studio SDK” to add an SDK Extension to a Design Studio Installation.

    I can get the highcharts plug in to work on Design Studio Client when running it from Eclipse, but after having added the SDk extension, if i pick the highcharts component from the Custom Components I get this error:

    Error message: ‘my’ is undefined Line Number: 493 Pos: 4 Function:Unknown function name (strict mode) URL: http://localhost:61245/aad/zen/mimes/sdk_include/com_sample_highcharts_HighCharts/res/js/component.js?version

    DS Highcharts error.png

    Any help or pointers you can give me will be greatly appreciated

    Regards

    Carlos

    (0) 
    1. Mike Howles Post author

      I believe Manfred Schwarz also ran into this. Can you click the road web application button to see if it corrects itself?  I suspect it is either a bug Mustafa and I have found or it is a namespace issue. I’ve been too consumed with other work this past month to dig into it but I should have some time to look further if the reload button trick does not work.

      (0) 
  4. Peter Pat

    hi Michael,

    thank you for your great post!

    We have a requirement to combine two charts, an Stacked bar chart with a line-chart.

    I saw that the sapui5 library provides the class sap.viz.ui5.Combination.


    There is no documentation how to combine charts with this class.

    I thought maybe you have an idea whether iam on the right way or not?

    Or is there any other simple way to solve that requirement?

    Thank you for your feedback!

    (0) 
  5. Shlomi Weiss

    Hi Michael

    Thanks for the blog, it is very helpful

    I wanted to know if it’s possible to have the option to display cumulative values on the chart?

    I didn’t see any option on the properties to do it.

    Thanks

    Shlomi

    (0) 
    1. Mike Howles Post author

      It is technically possible, however not implemented in this example.  Nothing to preventing that happening with a little SDK work, though!

      (0) 
  6. Abdul MUGHNI

    Hi Michael,

    Very helpful article indeed.

    I have a requirement to create a Gantt chart like component which shows text values for the different tasks. I was thinking of modifying the stacked bar chart to add text(task names) instead of data values that would enable it to resemble a Gantt chart. Do you know how i can add a text value as a data label instead of the numeric data value?

    Thanks,

    Abdul

    (0) 

Leave a Reply