Skip to Content

This is basically a proof-of-concept in which we try to show as to how we can leverage the functionality of the Firefox HTML Canvas, to plot the SAP data in a graphical (Bar Graph) format.

This is a simple BSP application in which we retrieve the marks of all the students belonging to a particular class, for a specific test. The marks of all these students will be displayed as a HTML table and a bar-graph as well on the Firefox HTML canvas screen.

This application uses the API’s from the JavaScript provided by http://mochikit.com/.

This application has been tested on Firefox 1.5 and will require a minimum of Firefox 1.1+ for it to work. It does not work on Microsoft Internet Explorer.

Scenario:


In the first Firefox web-screen, the user has to select the ‘class’ and the ‘unit test’ for which he would like to retrieve the marks from SAP R/3 system.
In the second Firefox web-screen based on the selection made, the appropriate marks for all the students belonging to that particular class has to be returned as a table, and also displayed as a bar-graph.

Files Involved:


MochiKit.js:

This is available at http://media.liquidx.net/js/mochi/MochiKit.js

Color.js:

This is available at http://media.liquidx.net/js/mochi/Color.js. We define the various colors used in the Bar-Graph using this JavaScript.

Format.js:

This is available at http://media.liquidx.net/js/mochi/Format.js. We define the various formatting options in this JavaScript.

CanvasGraph.js:

This is available at http://media.liquidx.net/static/canvasgraph/CanvasGraph.js. All the api’s needed to create the bar-graph and also other form of graph (pie, line etc) are defined in this JavaScript.

TableBarChartDemoorig.js:

We define the parameters needed to create the Bar-Graph in this JavaScript.
Source code of TableBarCharDemoorig.js is show below,

Step1:

You will have to create a table (I have called it ZMARKS) which stores the marks and class information. The table would contain the following fields,

Class name

Test ID

Student Name

Subject Marks (In my case just 3 subjects, Maths, Physics and Chemistry)

image

<b><font size=3>Step 2:</font></b>
Create the BSP application, go to transaction SE80 and create a new ‘BSP Application’. I have named mine as ZHTMLCANVAS.
This application will have 2 web pages. So create 2 Page with Flow Logic (I have named the pages as first.htm and student.htm respectively). Also import all the JavaScript and Image files into the MIME repository.

<b><font size=3>Step 3:</font></b>
Creating the first web page (first.htm).
The first web-page will have 2 select boxes. The first select box is for choosing the class and other for choosing the Unit test. There will also be a button ‘Fetch’, on clicking this button the data will be retrieved from SAP R/3.

Enter the following in the Layout tab,

<TEXTAREA NAME=”comments” COLS=80 ROWS=8>
<%@page language=”abap”%>
<HTML>
<HEAD>
     <title>Select Class and Unit Test to be displayed as Graph</title>
</HEAD>

<BODY>
       <IMG SRC=”intelli.PNG” ALT=”Intelligroup”>
       <H2>Select Class and Unit Test</H2>

     <form name=example>
     <pre>     
     <b>Choose the Class: </b><select name=class>
     <option value=”10″>Class 10</option>
     <option value=”12″>Class 12</option>
     </select>
     </pre>

     <pre>
     <b>Choose the Unit Test: </b><select name=unittest>
     <option value=”UNIT1″>Unit Test 1</option>
     <option value=”UNIT2″>Unit Test 2</option>
     <option value=”UNIT3″>Unit Test 3</option>
     </select>
     </pre>

     <INPUT type=”submit” value = “Fetch” name=”OnInputProcessing(go)”>
     </form>

</BODY>
</HTML>
</TEXTAREA>

Enter the following for the <b>OnInputProcessing</b> in the Event Handler tab

<TEXTAREA NAME=”comments” COLS=80 ROWS=6>

  • event handler for checking and processing user input and

  • for defining navigation

case event_id.

  when ‘go’.

    navigation->set_parameter( name  = ‘unittest’ ).

    navigation->set_parameter( name  = ‘class’ ).

    navigation->goto_page(‘Student.htm’).

endcase.

</TEXTAREA>

Create the following Page Attributes as shown below,

image

<b><font size=3>Step 4:</font></b>
Creating second web page (student.htm).
The second web-page is where the result will be displayed. You will have a table with information retrieved from SAP R/3 in it. Apart from this you will have a bar-graph plotted based on the data in the table. There will also be a ‘Back’ button, which will take you to the first page.

Enter the following in the Layout tab,

<TEXTAREA NAME=”comments” COLS=80 ROWS=8>
<%@page language=”abap” %>

<head>
    <title>Marks as Bar Graph using HTML Canvas</title>
    <script src=”http://media.liquidx.net/js/mochi/MochiKit.js” type=”text/javascript”></script>
    <script src=”Color.js” type=”text/javascript”></script>
    <script src=”Format.js” type=”text/javascript”></script>
    <script src=”CanvasGraph.js” type=”text/javascript”></script>
    <script src=”TableBarChartDemoOrig.js” type=”text/javascript”></script>

<style type=”text/css”>

    table.api thead th, table.data thead th {

        background-color: #AFC7D1;

        border-bottom: 1px solid #ddd;

        padding: 2px;

        text-align: center;

    }

    table.api tbody td, table.data tbody td {

        background-color: #C5BCBF;

        padding: 2px;

        vertical-align: top;

        text-align: center;

        border-bottom: 1px solid #eee;

    }

    table.data

    .center {

        margin-left: auto;

        margin-right: auto;

    }

   

Intelligroup

   

Mark Sheet for Class <%=class%> in Test: <%=unittest%>

    <div class=”center”>
    <table id=”datatable” class=”data”>
        <thead>
            <tr><th>Serial</th><th>Student Name</th><th>Math</th><th>Physics</th><th>Chemistry</th></tr>
        </thead>
        <tbody>
        <%
              loop at  it_marks into w_marks.
        %>
        <tr>
            <td><%= sy-tabix – 1 %></td><td><%= w_marks-student %></td><td><%= w_marks-mmarks %></td><td><%= w_marks-pmarks %></td><td><%= w_marks-cmarks %></td>
        </tr>
        <%
              endloop.
        %>
        </tbody>
    </table>
    </div>

   

Bar Graph

   

  • event handler for data retrieval

select * from zmarks into table it_marks where test = unittest and class

= class.

</TEXTAREA>

Create the following Page Attributes as shown below,

image

Enter the following in the Type Definitions tab

Step 5:

Activate your BSP application and test it.

To activate your BSP application, right click on your application name and click ‘Activate’.

Once you have activated it, right click the application again and click ‘Test’ to execute the application.

On executing the application, this is how the first page will appear,

image

Choose the appropriate information, and click on ‘Fetch’ button, and the second page will appear like below,

image

Hope this weblog was useful to you all.

I would like to thank my colleague

Mr.Ajay Mathangi Kumar

for his valuable inputs while creating this application.

To report this post you need to login first.

2 Comments

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

  1. Brian McKellar
    hallo Sameer,

    I like your example to render graphics with the Firefox HTML canvas! In my opinion, the use of graphics within pages really bring a story over. My personal favourite technology has always been SVG. Unfortunately, it never really took off (one has to be truthful here) and also had the additional disadvantage that it was not possible to achieve small diagrams with inline rendering. It always required a second HTTP request per small diagram.

    And here HTML canvas just might become my next favourite technology. Why am I waiting? Mostly because of the Firefox-only limitation. One has to be (again) truthful and accept that both Firefox and IE are important and you can not ignore one. And this at the moment inhibits HTML canvas as very useful tool for websites.

    Nevertheless, it is good to understand the technology and see what can be done with it. And this is why I like your weblog, as it explores the use of light-weight graphics within applications.

    regards, brian

    (0) 

Leave a Reply