Skip to Content

jqPlot charts within BSP pages

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)

<!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 && `]`.

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

<script language="javascript" type="text/javascript">
 $(document).ready(function(){
     var line1 = <%= lv_line1 %>;
     var plot1 = $.jqplot('chart1',[line1],{
        title: 'Lufhansa flights',
        stackSeries: true,
        showMarker: false,
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
            }
        }
     });
 });
 </script>
</head>

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:

/wp-content/uploads/2012/06/20120611_flight_chart_109999.png

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

/wp-content/uploads/2012/06/20120611_flight_full_110027.png

See more ideas by me on G+

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