Business Graphics: Real-Time scenarios(Part-II)

Introduction:

In this web log I am going to explain creating a Business Graphics from Excel Data.

Here I am going to use HSSF API to read Excel Data. The Details description of reading Excel data using HSSF API is explained in my previous Reading Excel Data from Java Using HSSF API

STEP 1:

Create a WebDynpro Project and add the HSSF API Jars in Java Build Path. We also have to add these Jars in Lib Folder of this application in Package Explorer.

STEP 2:

Add one Business Graphics UI Element in the View and set Required Properties.

: Such as:; IgsUrl; SeriesSource; ChartType; BackGroundColor; FontFamily; Height, width,; Top, Botttom etc…

And add one Category and required no of SimpleSeries.

While creating Business Graphics Please sure about whether your IGS Server is installed and configured with your server or not.

We can check Like this open a browser with url as
http://&ltServerName(or)IP&gt:&ltport no default:8030>/

If IGS is installed then following figure will appear.

Otherwise we will get a picture of broken pie-chart labeled “Graphics Rendering Problem”:

STEP 3:

Create corresponding nodes and attributes and Bind it with Business Graphics.
Bind these Properties with corresponding Context values.

Business Graphics:: SeriesSource

Category:: Description

Simple series:: Value

STEP 4:

Create one Action “CreateBGForExcelData” in the Implementation add following codes.

public void onActionReadDataFromExcel com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionReadDataFromExcel(ServerEvent) IWDMessageManager msgMgr = wdComponentAPI.getMessageManager(); try { wdContext.nodeSimpleGraphics().invalidate(); InputStream in = new FileInputStream(“c://data.xls”); HSSFWorkbook wb = new HSSFWorkbook(in); HSSFSheet sheet = wb.getSheetAt(0); // the 1st sheet for (int j=1;j<10;j++) { IPrivateSimpleGraphicsView.ISimpleGraphicsElement bussinessElement=(ISimpleGraphicsElement) wdContext.createSimpleGraphicsElement(); HSSFRow row = sheet.getRow(j); bussinessElement.setCategory(“Category” + j); bussinessElement. setSeries1((row.getCell((short))). getNumericCellValue()); bussinessElement. setSeries2((row.getCell((short)1)). getNumericCellValue()); bussinessElement. setSeries3((row.getCell((short)2)). getNumericCellValue()); bussinessElement. setSeries4((row.getCell((short)3)). getNumericCellValue()); bussinessElement. setSeries5((row.getCell((short)4)). getNumericCellValue()); wdContext.nodeSimpleGraphics(). addElement(bussinessElement); } } catch (Exception e) { e.printStackTrace(); } //@@end} STEP 4:

Create one Button and Link this Action with On Click Event of this Button.

STEP 5:

Customize your Business Graphics Output with Chart Designer.

The SAP Chart Designer is a tool that enables you to influence the properties – that is, the graphical elements – of a business graphic, such as chart type, size, layout, color, and shading. And we can change all properties for Global settings, Layout, Background, Title, Dataseries etc.

The Chart Designer is divided into three areas:

• The graphics preview
The area on the left-hand side in which the business graphic is displayed. This area is used to display a preview of the Customizing settings. Changes to these settings are displayed immediately in the graphics preview, which lets you implement necessary changes in the business graphic display instantly.

• Overview of graphical elements
The area in the upper-right side that contains the list of graphical elements
Each graphical element, in turn, has one or more properties. To change a property, select a chart element either from the chart window or by name in the chart element window. The properties of the chart element are then displayed, and you can edit and change the values of the properties.

• The property list

The properties are listed in the area below the graphical elements. To change a property, select a graphical element either with the mouse in the graphics preview or from the overview of graphical elements. The properties of the graphical element are then displayed. You can change the values of these properties.