Additional Blogs by Members
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member
0 Kudos

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







5 Comments