Using Simple Graphics in a Web Dynpro application
By Tulasi Palnati
Description:
Add a Simple Business Graphic to your Web Dynpro application
Go to NWDSàCreate Web Dynpro Project (SimpleGraphics)
Right click on componentsàCreate a Component (SimpleGraphicsV)
Open the SimpleGraphicsV. Right click on the “RootUIElementContainer” in the Outline pane and select “Insert Child”. Select the element “Type” of
BusinessGraphics. Give your Element the name “Simple Graphic”
You can see it both in the Outline pane, and the Layout pane, both shown here.
Highlight “SimpleGraphic” element in your view. Then go to the “Property” view in the bottom right hand pane. Ensure that the property chartType is set to
“columns”.
Change the height property to 300
Change the width property to 500
You will see that Business graphic in your View’s layout has been resized.
Right Click on the “SimpleGraphic” element in the Outline pane. In the menu select “Insert
Category”. Right Click on the“SimpleGraphic” element in the Outline pane. In the menu select “Insert Series” .Add 2 other simple series to the
BusinessGraphics.
Set the Label properties of your Simple Series as follows
Go to the “Context” view of your View. Right Click on the “Context” node and in the menu select “New àValue Node” .In the popup give it the name
“SimpleGraphic” .Click “Finish”.
Add 4 “Value Attributes” to the node “SimpleGraphic” in your context – with the names:
Category, ValueOne,ValueTwo and ValueThree. Category should be of type “string”ValueOne, ValueTwo, and ValueThree should be of type “double”
Select the “Layout” of the SimpleGraphicsView.
- In the Outline pane of the SimpleGraphicsView, highlight the “SimpleGraphic” node.
- In the Property view in the bottom right hand pane, set the “seriesSource” property.
- Click the button shown in the seriesSource This will show a popup window of your
Views context.
- In the context popup select the node “SimpleGraphic”, then click “OK”.
- The seriesSource property will then be set as shown.
Set the “Category” view element’s “description” property to the context SimpleGraphic.Category
Set the “SimpleSeries1” view element’s “value” property to the contextSimpleGraphic.ValueOne.
Set the “SimpleSeries2” view element’s “value” property to the contextSimpleGraphic.ValueTwo.
Set the “SimpleSeries3” view element’s “value” property to contextSimpleGraphic.ValueThree.
Add the code to fill the data to view context
Go to implementation tab of SimplegraphicVàAdd the code in wdDoinit() method
Right click on Application àSelect create application (simpleGraphicAppl)à NextàNextàFinish.
Rightclick on SimpleGraphicsApplàDeploy Archive and Run
The output as follows
Introduction to chart Designer to Business Graphics(Extension to first application)
Open the view SimpleGraphicsV.Go to the “Layout” of the view.In the Outline pane, right click on your Business Graphic “SimpleGraphic” and in the menu
select “ Start Chart Designer” .
The Chart Designer will show up in the upper right hand pane for your Business Grahphic. It is shown in the image below.
Edit the properties of your business graphics in chart designer.
Set the Title of your businessgraphic. Just highlight the“Title” element in the “Overview” pain. Then enter your title in the “Caption” property. Set the Legend
caption. Same process you did for the “Title”, but for “Legend”.
Set the Border properties of the legend to have a solid black border. Set the Title and Unit “caption” property under the “Categoryaxis” element. (Open up the
node, you will see a Title element).
Set the Unit caption as Months. Do the same as above but for the first Value Axis node.
- Set the Value Axis Title Caption
- Set the Value Axis Unit Caption
Change the Background Color. Highlight the “Background” element in the Overview pane.
Under “Area Properties” you can set the color. Do not forget to save your Metadata.
Right click on SimplegrahicsApplàDeploy Archive and Run.
The output as follows:
