Using Chart Designer To Customize Business Graphics in Web Dynpro Java

Using Chart Designer to Customize
Business Graphics in WebDynpro
Applies to:
SAP Net Weaver 2004s (EP7), WebDynpro Java, Business Graphics.
For more information, visit the Web Dynpro Java homepage.
Summary
This article briefly describes how to use the chart designer to modify the properties of a business graphic
chart element and customize the chart as per requirement.
Author:
Arnab Pal
Company: Tata Consultancy Services Ltd.

Created on: 29th July 2009
Author Bio
Arnab Pal is a BE in Information Science and engineering. He is working with Tata
Consultancy Services for nearly 2 years. He is working in SAP Enterprise Portal for 1 year
mainly in Java WebDynpro programming
SAP COMMUNITY NETWORK

2009 SAP AG
SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

1
Using Chart Designer to Customize Business Graphics in WebDynpro
Table of Contents
Introduction ......................................................................................................................................................... 3
Create a Simple Business Graphic ..................................................................................................................... 4
Structure of a Simple Business Graphic Chart ................................................................................................... 4
Starting a Chart designer .................................................................................................................................... 5
Structure of a Chart designer .......................................................................................................................... 5
Properties of a Business Graphic Chart ............................................................................................................. 6
Global Settings ................................................................................................................................................ 6
Layout.............................................................................................................................................................. 7
Background ..................................................................................................................................................... 7
Plot area .......................................................................................................................................................... 8
Columns .......................................................................................................................................................... 8
Category axis .................................................................................................................................................. 9
Sub Category Properties ................................................................................................................................. 9
Line .............................................................................................................................................................................. 9
Grid Line .................................................................................................................................................................... 10
Title ............................................................................................................................................................................ 10
Unit ............................................................................................................................................................................ 10
Value axis ...................................................................................................................................................... 11

Title / Subtitle ................................................................................................................................................ 11
Legend .......................................................................................................................................................... 12
Series ............................................................................................................................................................ 12
Related Content ................................................................................................................................................ 13

2009 SAP AG

2
Introduction
A simple business graphic is a chart consisting of a category and one or more data series. Column charts,
bar charts and pie charts are typical examples of simple business graphics. Some more complex type of
business graphics is like scatter charts and portfolio charts. The chart designer is a tool used to customize
the chart properties of a business graphics. The following are some of the types of chart types provided by
Business Graphics.
Column Chart
Scatter Chart

2009 SAP AG
Split Pie Chart
Doughnut Chart

3
Create a Simple Business Graphic

The basic steps of creating a business graphic are:
Inserting a Business Graphic in the View
Editing the Properties for the UI Element
Editing its Context for the View
Changing the Type Property of the Data Series
Binding the Data
Supplying the Context with Data
Building, Deploying and Running the Project
This article will not will not cover how to create a business graphics in WebDynpro in details as these are
already explained in the following SAP documentation Using Business Graphics. This article will rather
concentrate on how to use the chart designer to modify the various chart properties.
Structure of a Simple Business Graphic Chart

A business graphic chart displays data in the form of number series and makes it easier for the user to
interpret the data especially when comparing more than one business values. The basic structure of a chart
is shown below (Column chart). Also refer Editing Charts in http://help.sap.com/

2009 SAP AG

4
Starting a Chart designer

The chart designer can be opened by right clicking the Business Graphics UI element in the outline view and
clicking Start Chart Designer as shown in the screen shot.
Structure of a Chart designer

The chart designer opens in a new tab within the SAP Netweaver development studio. The various
properties of the chart are shown under the overview tabs and the value and the various values and
attributes related to the corresponding properties are shown in the bottom right window as shown in the
screenshot. The various properties of the chart can be customized by selecting from the Overview tabs and
setting the different values or else by clicking the different chart element in the chart in the left
window(clicking the legends on the chart in the left will open the properties of the legend in the right bottom
pane).

2009 SAP AG

5
Properties of a Business Graphic Chart

The various chart properties are shown below. Most of the properties are self explanatory from the property
type. This article will cover only some of the important chart properties.
Note: The Columns property( ) is actually dependent on the type of chart chosen i.e. in this case Column
) property in
chart was chosen so its showing column property for portfolio chart it will show portfolio(
place of Columns
Global Settings
The type of chart can be chosen from the Chart Type drop down as shown in the screenshot
The dimension of the chart can be chosen from the Dimension Dropdown
Other settings are chosen to set the layout color and font settings.

2009 SAP AG

6
Layout
The layout settings are chosen to set the position of

the title, subtitle , chart and legend
Background
The Background property can be set to

change the background pattern, color and
border properties.

2009 SAP AG

7
Plot area
The plot area values are set to change the

properties of the plot area of the Chart
Columns
This property is specific for the column type of chart. This will change with the type of chart selected.
The type of column chart can be changed by

setting the values of this property.
E.g. By selecting the Block type as
Cylinder the Column charts columns
become cylindrical.

2009 SAP AG

8
Category axis
The properties of Category Axis are set by changing this property.
The minimum and maximum values can set manually or

set to automatic.
The order of the category axis can be set.
The position or the type of the category axis can be set
The Category is further divided into 4 set of properties

9
Line
Grid Line
Title
Sub Title
Sub Category Properties

Line
The properties of the category axis line are set by

this.
No of Major and Minor ticks in the axis line can be

set

2009 SAP AG

9
Grid Line
The properties of the category axis grid are

set by this
The title (Caption) of the Category Axis is set by this.
The unit (Caption) of the Category Axis data value is set by this.
Title
Unit

2009 SAP AG

10
Value axis
Using this the maximum and minimum value of

the value axis can be set both manually and
automatically
The scaling type of value axis can also be set

from this.
The value axis is further divided into 4 set of properties

9
Line
Grid Line
Title
Sub Title
The above four properties have the same functionality as they

have under Category Axis property.
Refer Sub Category Properties
Title / Subtitle
This is used to set the title or subtitle of the chart element.
The position of the title/subtitle, text properties area properties are also set from this.

2009 SAP AG

11
Legend
This is used to set the properties of the Legend
The position of the legend, caption and the

style of the legend is set from here as shown in
the above screenshot.
Series
The property of the value series are set from

this
The line type, labels can be chosen from this.
Another important property of showing the data

values in the labels in the form of percentage
can be set from here by setting the Format as
0.0$Percent % as shown.

2009 SAP AG

12
Related Content
Editing Charts
Using Business Graphics
https://www.sdn.sap.com/
http://help.sap.com/
For more information, visit the Web Dynpro Java homepage.

2009 SAP AG

13
Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not
supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.
SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document,
and anyone using these methods does so at his/her own risk.
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or
code sample, including any liability resulting from incompatibility between the content within this document and the materials and
services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this
document.

2009 SAP AG

14

Using Chart Designer To Customize Business Graphics in Web Dynpro Java

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Using Chart Designer To Customize Business Graphics in Web Dynpro Java

Uploaded by

Copyright:

Available Formats

Using Chart Designer to Customize

Business Graphics in WebDynpro

Company: Tata Consultancy Services Ltd.

SAP COMMUNITY NETWORK

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com