This weblog will demonstrate how easy it is to implement a jqPlot chart within BSP pages.

For developers who can’t wait for UI5 with integrated chart engine and don’t want to use webdynpro charts, it is possible to implement one of these javascript chart engine. There are various javascript chart libraries available with different license aggrements: Highcharts, RGraph, flot just to name a few. For this example here, I choose jqPlot, because it’s simple to use, looks pretty and has a lot of chart options. See some demos for jqPlot here.

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

Layout:

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)

 <%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %>              jquerymobile page               


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:  TYPE sflight.       CLEAR: lv_line1.       LOOP AT flight_tab ASSIGNING     WHERE carrid = 'LH'.      lv_price = -paymentsum.      CONDENSE lv_price.           CONCATENATE lv_line1 `['`                  -fldate(4) `-`                  -fldate+4(2) `-`                  -fldate+6(2)                  `', `                  lv_price                  `], `             INTO lv_line1.    ENDLOOP.       lv_line1 = `[` && lv_line1 && `]`.

Now ABAP variable “lv_line1” has necessary data string in it. With next code snippet jqPlot options are defined via javascript:

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.

 
  


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!



Style enhancement


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+













New NetWeaver Information at SAP.com




Very Helpfull


                          




                                                            









                            User Rating:  Be the first one !