Creating a graphical chart in the Web UI
Feeling confident after my first victory I tried some more elaborate graphical charts and not without success if I might say. See the examples below and you have to admit your Web UI has never looked so cool and colorful before!
|Figure 1: Aster Plot|
|Figure 2: Bubble Chart|
|Figure 3: Interactive Collapseable tree|
This can be done in transaction SE80 with the import functionality
You then can get access by adding the following code:
Now let’s start with the SAP (ABAP) part. To keep things simple I returned to my first bar graph example which uses a flat table as input with only two fields ‘Letter’ and ‘Frequency’. In the view controller class of my Web UI view I created the method GET_JSON_STRING which first fills an internal table with randomized data. This internal table is then converted to JSON data as a string which is returned. See code example below.
The data object (var data) is now in the same format that this bar graph example can handle and it will be used to populate the bar graph on screen. Take note of the ‘.text’ at the end of the last statement. This .text is necessary because it is in fact the source parameter we defined earlier in the transformation we did in the ABAP code and it is added at the beginning of the JSON data string.
After I did my changes it was time for testing and to check if it worked. I pressed refresh (F5) a few times and I saw that the bar graph is updated every time with the newly generated random data. Proving to me that the SAP backend is providing my graph with data!
After this relative simple example I tried a more complex one but it is in fact using the same techniques as described above. The example below depicts a simple force-directed graph that shows character co-occurrence in the famous theatrical play Les Misérables. Probably not a requirement you will ever receive from a client but it makes a cool example none the less.
|Figuur 4: Force Directed Graph|
In this example I first upload a JSON file in my Web UI view and store it in a context node before passing the content to the HTML page again with the method GET_JSON_STRING from the view controller class. The cool thing in this example is that you can physically manipulate the nodes in the graph and that it shows the wide variety of graphical tools you have at your disposal.
Taking it to the next level – part 1.