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
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)
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.
LOOP AT flight_tab ASSIGNING <fs>
WHERE carrid = 'LH'.
lv_price = <fs>-paymentsum.