Skip to Content
Author's profile photo Durairaj Athavan Raja

SDN POINTS BLOW OUT: Simple Bar Chart BSP application

This is in response to SDN: End of the Year SDN POINTS BLOW OUT!! Contest announced by Craig Cmehil. Though i have submitted this sample before the deadline to Craig, took sometime to post a weblog on the same, Sorry for the inconvenience Craig.

Warning:  This is just a tech demo of firefox  element. For serious business graph in SAP scenario there are better delivered mechanism. SAP delivers Internet Graphics Service as a tool for business graphics. To learn more about it check out this online help and this weblog by Thomas Jung.

This is a simple BSP application and this will work only in Firefox 1.5.

Let’s get started.

Step1. Create a BSP application from transaction SE80.

Step 2. Create a page and paste the following line of code in to the layout  \ tab.

<%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>
<htmlb:content design=”design2003″ >
<htmlb:page title=” ” >
types: begin of itabtype ,
name type string ,
value type string ,
value1 type string ,
end of itabtype.
data: itab type standard table of itabtype .
data: var1 type i ,
var2 type i.
data: wa like line of itab .
clear:wa, itab.
refresh itab .
move: ‘CountryA’ to wa-name ,
’20’ to wa-value,
’40’ to wa-value1 .
append wa to itab .
move: ‘CountryB’ to wa-name ,
’50’ to wa-value ,
’30’ to wa-value1 .
append wa to itab .
clear wa .
move: ‘CountryC’ to wa-name ,
’70’ to wa-value ,
’40’ to wa-value1 .
append wa to itab .
<canvas id=”chart” width=”500px” height=”100%”></canvas>
<br>India USA UK
<script type=”text/javascript”>
var ctx = document.getElementById(‘chart’).getContext(‘2d’);
function chart( x, w, val ) {
clear wa .
var1 = ’10’ .

loop at itab into wa .
var2 = var1 + ’10’ .
ctx.fillStyle = ‘#08f’;
chart(<%= var1 %>,10,<%= wa-value %>);
ctx.fillStyle = ‘#10f’;
chart(<%= var2 %>,10,<%= wa-value1 %>);
var1 = var1 + ’30’ .

Step3. Save, activate and test the application in Firefox 1.5 and the result should look like below.


This is a very basic demo, to learn more about Fire fox <canvas> element check out this tutorial.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.