Skip to Content

<body><b>Introduction</b><br><br>

In this blog, I’ll be discussing about changing the Chart types dynamically in a Web Report. You’ll be able to display the data in graphs using any of the Charts available in the chart sub types of Web Application Designer in addition to the chart types available in the standard web query template.<br>

For this purpose I’ll be using the command for Resetting and Reinitializing an existing web item <b>RESET_ITEM</b>. <br>

In this example, a table web item is converted to different types of charts.<br>

This blog is divided into two sections. The first section deals with Saving the chart types you want to display in your web report to the library in Web Application Designer.<br> The second section is all about converting the table web item to the Chart web item using the pre defined Chart types saved in library.<br> If you’re familiar with the process of Saving web items to the library, you can  directly proceed to section II.<br>

I’ve tried to explain the procedure step by step with screen shots, so that it’ll be useful for those who don’t have much experience in using Web Application Designer.<br><br>

<b>Pre-requisites</b><br><br>

IGS should be properly configured and running. Only then the different Chart types will be rendered in the Web Report.<br><br>

<b>Section I</b><br><br>

Open Web Application Designer.<br>

Create a New Template.<br>

Drag the Table web item to the Web Template.<br>

Assign the data provider (Query/Query view) to the table web item. <br>

Properties -> General -> Query/Query view.<br>

Save the web template.<br>

The next step is saving the chart types we require, in the Web Application Designer Library. <br>

In this example we want to display Tachometer, 3D Split Pie Charts, 3D Column charts and Line Charts. You can use any of the available Chart Types in Web Application designer.<br>

Drag the Chart web item to the web template.<br>

Choose Edit Chart. <br>

Select the required Chart Type. <br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/01.jpg|height=400|alt=image|width=600|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/01.jpg|border=0!<br><br>

I’ve selected the second chart sub type of Tachometer chart.<br>

Save the Tachometer Chart web item in Library. From the context menu, choose Save in Library.<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/02.jpg|height=200|alt=image|width=300|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/02.jpg|border=0!<br><br>

Create a New library or select an existing library.<br>

Provide a Description and a <b>Name</b> while saving the Chart web item in Library. <br>

<b>We will be referring this Chart web item in the web template by the name we provide here.</b><br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/03.jpg|height=233|alt=image|width=370|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/03.jpg|border=0!<br><br>

The Tachometer chart web item will be displayed in the Library. <br>

For changing the properties of the Web item in the library, choose Change web item as shown in the screen shot.<br>

Web Items -> Library tab -> Library Name -> Web Item -> From the Context menu, choose Change Web Item.<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/04.jpg|height=267|alt=image|width=301|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/04.jpg|border=0!<br><br>

Here you can change the General and Specific properties of the web item.<br> I’ve changed the height and width to 600 x 600. Provide a text in the Caption field if you want to display a title for your chart. <br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/05.jpg|height=400|alt=image|width=380|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/05.jpg|border=0!<br><br>

Now we will be adding other Chart types also in the library.

For this, from the context menu of the Chart web item in web template, choose Edit Chart.<br>

Choose Yes in the dialog box to continue.<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/06.jpg|height=93|alt=image|width=398|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/06.jpg|border=0!<br><br>

Choose the Chart Type, which is to be displayed as done previously for the Tachometer chart. For this scenario, I’ve selected 3D Split Pie chart.<br>

Next step is saving this 3D Split Pie chart web item in the library.<br>

After saving, if you want you can edit the Chart Properties. For this chart, I’ve changed the size to 600 x 600 and also selected the option Swap Display Axis.<br>

Similarly add all the required Chart Types to the library.<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/09.jpg|height=235|alt=image|width=219|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/09.jpg|border=0!<br><br>

As you can see in this screen shot, I’ve added four types of charts.<br>

Tachometer, Pie Charts, Bar Charts and Line Charts.<br>

Now, only the table web item is required in the web template as the charts are displayed in the web report by re-initializing the table web item.<br>Delete the Chart web item from the Web Template as shown in the screen shot. (If you’re using two different queries for Table and Charts, then you should not delete the Chart web item. Rather, you should hide it as explained later)<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/14.jpg|height=158|alt=image|width=249|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/14.jpg|border=0!<br><br>

Save the web template.<br><br>

<b>If you want to display the charts using another query, then proceed as explained below.</b><br>

Assign the query to the Chart web item by creating a new data provider as displayed in the screen shot. Now the table and chart web item are using two different Data Providers(Query/Query view).<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/Assigningdataprovidertothechartwebitem.JPG|height=271|alt=image|width=307|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/Assigningdataprovidertothechartwebitem.JPG|border=0!<br><br>

Hide the Chart web item in the web template as shown in the screen shot.<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/HidingChartwebitem.JPG|height=339|alt=image|width=297|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/HidingChartwebitem.JPG|border=0!<br><br>

Save the web template.<br><br><br>

<b> Section II </b><br><br>

This section is about converting the table web item to the Chart web item using the Chart types saved in library.<br><br>

<b>If both the table web item and chart web item are based on the same Data provider(Query/Query view).</b><br><br>

The command for converting a Table web item ‘Table_1’ to a pre-defined chart item (Tachometer) saved in the library is<br>

<SAP_BW_URL ITEM=’Table_1′ CMD=’RESET_ITEM’ ITEM_ID=’ZTACHOMETER’><br>

where ZTACHOMETER is the <b>Name</b> I specified for this web item while saving it to the library (Refer section I).<br><br>

<img  />//weblogs.sdn.sap.com/weblogs/images/251708806/10.jpg|height=400|alt=image|width=600|src=https://weblogs.sdn.sap.com/weblogs/images/251708806/10.jpg|border=0!<br><br>

<b>HTML code for displaying the tabstrips with the differerent Chart types in Web Reports.</b><br>

If both the Table and Chart web item are using the same Query, this code has to be included in the BODY area of the web template.<br><br>

<p>

<textarea width=”100%” height=”400px” style=”width:80%;height:200px”  wrap=”logical” rows=”5″ cols=”20″>

<P align=center>

<TABLE cellSpacing=1 cellPadding=1 width=”60%” align=center border=0>

<TR>

<TD class=SAPBEXTbsTab><A href=”<SAP_BW_URL ITEM=’TABLE_1′ CMD=’RESET_ITEM’ ITEM_ID=’ZTACHOMETER’> “>Tacho Meter</A></TD>

<TD class=SAPBEXTbsTab><A href=”<SAP_BW_URL ITEM=’TABLE_1′ CMD=’RESET_ITEM’ ITEM_ID=’ZPIECHART’>”>Pie Charts</A></TD>

<TD class=SAPBEXTbsTab><A href=”<SAP_BW_URL ITEM=’TABLE_1′ CMD=’RESET_ITEM’ ITEM_ID=’Z3DCOLUMN’>”>3D Column Charts</A></TD>

<TD class=SAPBEXTbsTab><A href=”<SAP_BW_URL ITEM=’TABLE_1′ CMD=’RESET_ITEM’ ITEM_ID=’ZLINECHART’>”>Line Charts</A></TD>

<TD class=SAPBEXTbsTab><A href= “<SAP_BW_URL CMD=’LDOC’ TEMPLATE_ID=’ZWT_REPORT_CHARTS’>”>Table Display</A></TD>

</TR>

</TABLE>

</P>

</textarea>

<p><br><br>

<b>If data providers are different: ie, you’ve a specific Query/Query view for Charts.</b><br><br>

In this case we’ve to hide the Table web item at run time and display the Charts, otherwise the data will be displayed in both the Tabular format and in Charts.<br>

The code is given below.

<p>

<textarea width=”100%” height=”400px” style=”width:80%;height:200px”  wrap=”logical” rows=”5″ cols=”20″>

<P align=center>

<TABLE cellSpacing=1 cellPadding=1 width=”60%” align=center border=0>

<TR>

<td class=’SAPBEXTbsTab’><A href=”<SAP_BW_URL ITEM=’TABLE_1′ HIDDEN=’X’ CMD_1=’CMD=RESET_ITEM&ITEM=CHART_1&ITEM_ID=ZTACHOMETER’>”>Tachometer</A></td>

<td class=’SAPBEXTbsTab’><A href=”<SAP_BW_URL ITEM=’TABLE_1′ HIDDEN=’X’ CMD_1=’CMD=RESET_ITEM&ITEM=CHART_1&ITEM_ID=ZPIECHART’>”>3D Split Pie</A></td>

<td class=’SAPBEXTbsTab’><A href=”<SAP_BW_URL ITEM=’TABLE_1′ HIDDEN=’X’ CMD_1=’CMD=RESET_ITEM&ITEM=CHART_1&ITEM_ID=Z3DCOLUMN’>”>3D Column Charts</A></td>

<td class=’SAPBEXTbsTab’><A href=”<SAP_BW_URL ITEM=’TABLE_1′ HIDDEN=’X’ CMD_1=’CMD=RESET_ITEM&ITEM=CHART_1&ITEM_ID=ZLINECHART’>”>Line Charts</A></td>

<TD class=SAPBEXTbsTab><A href= “<SAP_BW_URL CMD=’LDOC’ TEMPLATE_ID=’ZWT_REPORT_CHARTS’>”>Table Display</A></TD>

</TR>

</TABLE></P>

</textarea>

<p><br>

The screen shot shows the tabstrips generated in the web report after inserting the code in the web template.<br><br>

<img  /></body>

To report this post you need to login first.

1 Comment

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

Leave a Reply