Skip to Content

Introduction

A Gantt chart aims to show the timing of tasks or activities as they occur over time. Gantt charts have now become an industry standard as a key project management tool for representing the phases, tasks and activities that are scheduled as part of a project work breakdown structure or timeline of activities. Effective gantt chart representation of business data can be generated using web dynpro business graphics.

Before you begin

Make sure that the IGS has been configured correctly and is running.

h4. Process

Insert a Business Graphics UI element in the web dynpro project’s main view.

The UI element BusinessGraphic appears in the Outline window.

You see the following structure in the Outline window:

image

Edit the UI Element properties

In the outline window, click the Business Graphics UI element with the secondary mouse button.

Select ’Insert Category’

’Category’ will contain the details which are to be shown in the Y axis of the chart.

Again, click the Business Graphics UI element with the secondary mouse button and select ’Insert Series’.

Select ‘Series’ from the list box Type.

’Series’ will contain the details which are to be shown in the X axis of the chart.

Choose Finish.

Expand the newly inserted series.

Right click the series_point

image

Select ‘Time value’ from the list box Type.

Repeat the previous step again to add another Time Value to the Point.

TimeValue1 and TimeValue2 will contain the start date and end date respectively for each bar on the chart.

The outline box will look like this after having completed all these steps.

image

image

Data binding:

1 Select the Business Graphics UI element in the outline window.

Open the Properties window.

Enter the following properties:

1. chartType – gantt

2. igsUrl – specify the Url of the IGS server here

3. seriesSource – select the context node ‘Source’.

2. Select ‘Category’ -> Properties.

Enter the following properties:

Descripion – Select the context attribute Category -> CategoryText.

3. Select ‘Series’ in the outline window.

Enter the following properties:

Label – Select the context attribute source -> output -> status

Pointsource – Select the context node source -> output.

4. Select ‘Point’ in the outline window.

Enter the following properties:

customizingID – Select the context attribute source -> output -> status

label – source ->output -> label

valueSource – source -> output

5. Select ‘TimeValue1’ in the oultine window.

Enter the following properties:

Value – source.output.sdate

6. Select ‘TimeValue2’ in the oultine window.

Enter the following properties:

Value – source.output.edate

Settings in the Chart Designer:

In the outline window, right click the BusinessGraphics UI element and select ‘Start Chart Designer’.

image

In the chart designer -> Overview window, select Points.

image

The various types of bars which are to be dispalyed on the chart based on the customizing identifier, ‘status’ in this example, are to be specified here. A new point should be created for each bar type. In this example, the bars should vary according to the status of the employee. The points should have as its names the different values which the context attribute specified as the customizing ID in the point (here,source -> output -> status) will contain at runtime.

Adding a new point:

image

A new point is created. Now, rename it to the value which the respective customizing id attribute will have at runtime.

image

image

Create the required number of points in this way. Here the appearance of each type of bar can also be specified. To do this, select the point, in its properties specify the required details.

image

To display labels on the bars, select ‘Show labels’ checkbox in the properties window for that particular point.

Displaying legend

To display legend, edit the entries below ‘Data Series’ and rename each of them with the corresponding texts for the labels. In the property ‘Customizing identifier’ specify the corresponding point’s name.

image

As the final step, select ‘Gantt’ in the overview window. Here, make sure that the ‘Use categories’ and ‘Visibility’ options are selected in the properties.

Controller implementation

Result

image

To report this post you need to login first.

5 Comments

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

  1. Hi,
    I created the application as described in your nice blog. But the time ranges are not displayed as bars.
    The time axis corresponds to the entered time ranges and each time range has a marker box somewhere in the middle of the specified time range.
    Do you have an idea what the problem could be?
    I use NW04s.
    Thanks & regards,
    Sven
    (0) 
    1. Hi,
      I solved it now. I had to set the ‘Marker Shape’ property to ‘None’, then the bars were displayed.
      Regards,
      Sven
      (0) 
  2. Mehul Prajapati
    Hi, Blog is too good and executed nicely.
    But I am facing on problem. There is no correspondence of category with point element. If I need to create point for 3rd category and my 2nd category is blank. How can I do that? For each series it allows to add element in order only. I am not able to add element for 5th category by skipping 4th one. I want something like  (add element at 4th position)
    oupt1.addElement(4,op1);
    If i add blank elements between then it ruins graphics.
    Has anybody faced the same problem? Please help
    (0) 

Leave a Reply