Code Example of a Complex Business Graphic Presentation (SAP Library

Code Example of a Complex Business Graphic Presentation

The example below illustrates the following for a complex scatter chart, a non-category-based chart type:

· The structure of the Business Graphic UI element with its subelements

· The corresponding context structure

· The source code of the controller implementation that fills the context with data. This code can be defined either in the wdDolnit method or in the supply function of the controller implementation

Note

For detailed information about the use of a business graphic, see Using Business Graphics. For the description of a step-by-step procedure, see Creating a BusinessGraphics UI Element.

Displaying a Scatter Chart

The non-category-based chart types can contain more complex data series that are specified using the series object. To display points in a scatter chart, you need the definition of the x and y values.

1. Structure of the BusinessGraphics UI element for a scatter chart in the “TestScatterView” view (see screenshot of the SAP NetWeaver Developer Studio below):

This graphic is explained in the accompanying text

This graphic is explained in the accompanying text 2. Structure of the corresponding context, which provides the data and must support the creation of the BusinessGraphics UI element (see screenshot of the SAP NetWeaver Developer Studio below):

Re. item 1: Screenshot of the UI element structure

Re. item 2: Screenshot of the context structure from the example

This graphic is explained in the accompanying text

XValue has type x

YValue has type y

This graphic is explained in the accompanying text

Node B represents a non-singleton node

The context attributes xValue and yValue have type String.

3. Data binding

The individual associated objects of the BusinessGraphics UI element and their subobjects are bound to the corresponding context nodes and context attributes.

Object	Object ID	Data Binding	Path Within the Context Structure
BusinessGraphics	BG	series-Source property ® value node A	TestScatterView.A
Series	Series	pointSource property ® value node B	TestScatterView.A.B
Point	Point	valueSource property ® value node B	TestScatterView.A.B
Value	XValue	value property ® value attribute xValue	TestScatterView.A.B.xValue
Value	YValue	value property ® value attribute yValue	TestScatterView.A.B.yValue

4. Source code in the wdDolnit method of the controller implementation, which fills the context with data at runtime.

/** Hook method called to initialize controller. */

public void wdDoInit()

{

//@@begin wdDoInit()

IPrivateTestScatterView.IANode aNode = wdContext.nodeA();

// loop over series

for (int aIndex = 0; aIndex < 2; ++aIndex)

{

IPrivateTestScatterView.IAElement aElement = aNode.createAElement();

aNode.addElement(aElement);

// set series attributes (...)

IPrivateTestScatterView.IBNode bNode = aElement.nodeB();

// loop over points

for (int bIndex = 0; bIndex < 4; ++bIndex)

{

IPrivateTestScatterView.IBElement bElement = bNode.createBElement();

bNode.addElement(bElement);

bElement.setXValue(String.valueOf(aIndex*10 + bIndex));

bElement.setYValue(String.valueOf(100 + aIndex*10 + bIndex));

}

//@@end

}

5. Display of the scatter chart in the browser:

This graphic is explained in the accompanying text