Skip to Content

Creating business graphics in WebDynpro for Java is fairly easy if the server is configured right. But if you want to go beyond the standard color schemes and font types it is getting harder. This blog describes some steps I have taken to create good looking graphs in WebDynpro.

I used SAP Netweaver 7.0 SP12 for creating these graphs. The server runs on Solaris.

Transparent color

In order to make the graph transparent, so you can see the background of the portal through it, you can use the property transparentcolor of the BusinessGraphics ui element. Choose a color that you surely won’t use for the lines, axis or fonts in your graph and set the backgroundColor of your graph to the same value.

Font

If the IGS graphics do not show up in the desired font, you will have to change the configuration of IGS, see note 596825. You will have to adapt the XMLCHART configuration, not the GFWCHART, because this is the format that is used within WebDynpro.

XML customizing

 In the wdDoModifyView hook method, which is called just before rendering the view, you can customize your business graphics using an XML document. You can e.g. change the color of each individual series.* </p><p>if (firstTime) {<br />   final IWDBusinessGraphics gfx = (IWDBusinessGraphics) view.getElement(“StackedColumnsGraph”);<br />   final StringBuffer cuString = new StringBuffer();<br />   cuString.append(“<?xml version=\”1.0\” encoding=\”utf-8\”?>”);<br />   cuString.append(“<SAPChartCustomizing version=\”1.1\”>”);<br />   cuString.append(“<GlobalSettings>”);<br />   cuString.append(“<Defaults>”);<br />   cuString.append(“<FontFamily>Arial</FontFamily>”);<br />   cuString.append(“</Defaults>”);<br />   cuString.append(“</GlobalSettings>”);<br />   cuString.append(“<Values>”);<br />   cuString.append(“<Point id=\”SeriesList1_Point\”>”);<br />   cuString.append(“<Color>”);<br />   cuString.append(“RGB(234,136,45)”);<br />   cuString.append(“</Color>”);<br />   cuString.append(“</Point>”);<br />   cuString.append(“<Point id=\”SeriesList_Point\”>”);<br />   cuString.append(“<Color>”);<br />   cuString.append(“RGB(255,198,33)”);<br />   cuString.append(“</Color>”);<br />   cuString.append(“</Point>”);<br />   cuString.append(“</Values>”);<br />   cuString.append(“</SAPChartCustomizing>”);<br />   gfx.setDirectCustomizing(cuString.toString());<br />   gfx.forceUpdate();<br />  }</p><p>In this example I modify the color of two data series called SeriesList1_Point and SeriesList_Point.</p><p>Legend*

The legend of the graph doesn’t adapt automatically to the colors set in the XML customizing document. In order to overcome this I created an own legend using small images. The texts are of course defined in the Message Pool, to easily allow multi language support.

Here you can see the result in the SAP portal.

!https://weblogs.sdn.sap.com/weblogs/images/27041/igscustomizing.JPG|height=399|alt=image|width=591|src=https://weblogs.sdn.sap.com/weblogs/images/27041/igscustomizing.JPG|border=0!</body>

To report this post you need to login first.

3 Comments

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

  1. Former Member
    Hi Peter, when changing the colors in the series instead of the point settings the legend is changed accordingly! However, you can also change the color using points and let the legend display it in addition to the series entries. See the legends property MoreInfo!
    One comment to the font configuration: note 1028690 should be mentioned as well as it describes the True Type font files that are shipped with the IGS.
    Regards, Kai
    (0) 

Leave a Reply