jqPlot charts within BSP pages
This weblog will demonstrate how easy it is to implement a jqPlot chart within BSP pages.
First we need a small BSP page which selects some data in “OnInitialization” Eventhandler:
* event handler for data retrieval SELECT * FROM sflight INTO TABLE flight_tab.
Table is defined as page attribute:
flight_tab TYPE TY_FLIGHTS
To implement jqPlot it’s necessary to load some scripts. jqPlot depends on jQuery, so we need that too. For this example I didn’t link to these js-files direclty, as in some companies Internet access is handled very strictly (I know, it wouldn’t make sense to view this BSP page on a mobile device which normally has internet connection, but think of VPNs). To do that just import your JS-files as MIME object into your BSP applikation.
Now we can link from our BSP site to these resources in HEAD part:
(you can copy following code snippets into your BSP code view, all necessary coding is shown in this blog)
<!DOCTYPE html> <%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jquerymobile page</title> <link rel="stylesheet" href="jquery.jqplot.min.css" /> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.jqplot.min.js"></script> <script src="plugins/jqplot.dateAxisRenderer.min.js"></script>
To have all jqPlot plugins available for more plot options, just insert all “.min.js” files into a plugins folder. We’ll only need dateAxisRenderer for this example, but if you want to play around with different chart styles you can import all plugin files at once.
Now we can prepare our data for jqPlot array. jqPlot date plugin needs date values in a special format (CCYY-MM-DD). So I insert some quick and dirty coding to build this array (I know it’s not JSON standard, but that’s the way jqPlot understands data inputs):
DATA: lv_line1 TYPE string ,lv_price TYPE char20 . FIELD-SYMBOLS: <fs> TYPE sflight. CLEAR: lv_line1. LOOP AT flight_tab ASSIGNING <fs> WHERE carrid = 'LH'. lv_price = <fs>-paymentsum. CONDENSE lv_price. CONCATENATE lv_line1 `['` <fs>-fldate(4) `-` <fs>-fldate+4(2) `-` <fs>-fldate+6(2) `', ` lv_price `], ` INTO lv_line1. ENDLOOP. lv_line1 = `[` && lv_line1 && `]`.
The only thing what’s missing here is where this chart will show up on our website. We just need to insert one html DIV element in BODY part.
<body> <div id="chart1" style="width:500px;height:300px;margin-top:40pt;"></div> </body> </html>
And that’s the complete output in a browser:
In this example different currencies aren’t respected at the output, which comes directly from flight table!
You can use popular jquerymobile framework, which gives you possibility to build a nice mobile webpage with a great user experience. Full coding for BSP layout is available at https://gist.github.com/2910208
See more ideas by me on G+