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=" " >
<htmlb:form>
<%
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 ) {
ctx.beginPath();
ctx.rect(x,100-val,w,val);
ctx.fill();
ctx.closePath();
}
<%
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' .
endloop.
%>
</script>
</htmlb:form>
</htmlb:page>
</htmlb:content>
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.
