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:
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
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.
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’.
In the chart designer -> Overview window, select Points.
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:
A new point is created. Now, rename it to the value which the respective customizing id attribute will have at runtime.
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.
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.
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