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.jsColor.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)
<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,
<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;
}
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,
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,
Choose the appropriate information, and click on ‘Fetch’ button, and the second page will appear like below,
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.
2 Comments
