Gantt Chart

Example of a Gantt Chart
Example of a Gantt Chart

With a Gantt Chart chronological relations between tasks or projects or even milestones can be visualized in a clear way and therefore support project management by visualizing complex relations. This article show how to set up a view template for Gantt-Charts.

  1. Make sure your nodes have a start and end attribute defined as a double attribute. With these attributes, you define the start and end date. The format has to be a continuous number as in Excel. E.g. the date “01.01.2012  00:00:01AM” equals the number “40909,00001”.
  2. Create a new view template file and insert the example code from the bottom of this article.
  3. Customize the view template’s properties to your project’s needs (red marked properties in the code example have to be adapted). The table below summarizes, describes all available properties for this view template type and relates to their appearance in the screenshot above.

Available view properties in the Gantt Chart:

View Template Style SectionNameCodeDescription
GanttTaskChildEdgeClass<Property Name="ChildEdgeClass">
<Value>BitterEdge</Value>
</Property>
Defines the edge class which is used to define the hierarchical relations between the nodes
GanttTaskDependencyEdgeClass<Property Name="DependencyEdgeClass">
<Value>SweetEdge</Value>
</Property>
Defines the edge class which is used to define dependencies between the nodes
GanttTaskStart<Property Name="Start">
<Value IsReference="true" Converter="ExcelDateConverter">start</Value>
</Property>
Defines the node attribute which represents the start date of the task
GanttTaskEnd<Property Name="End">
<Value IsReference="true" Converter="ExcelDateConverter">end</Value>
</Property>
Defines the node attribute which represents the end date of the task
GanttTaskDescription<Property Name="Description">
<Value IsReference="true">Class</Value>
</Property>
Defines the node attribute which will be shown in the description column of the Gantt Chart
GanttTaskTitle<Property Name="Title">
<Value IsReference="true">id</Value>
</Property>
Defines the node attribute which will be shown in the title column of the Gantt Chart
GanttTaskTooltip<Property Name="ToolTip">
<Value IsReference="true">id</Value>
</Property>
Defines the node attribute which will be shown if you hover over the element with the mouse
GanttTaskDeadline <Property Name="Deadline">
<Value IsReference="true" Converter="ExcelDateConverter">end</Value>
</Property>
Defines the deadline date of the task
GanttTaskFillColor<Property Name="FillColor">
<Value>Blue</Value>
</Property>
Defines the color of the task in the Gantt Chart
GanttTaskIsHighlighted<Property Name="IsHighlighted">
<Value>true</Value>
</Property>
Defines whether the task should be highlighted
GanttTaskIsMilestone<Property Name="IsMilestone">
<Value>true</Value>
</Property>
Defines whether the task should be a milestone
GanttTaskIsSummary<Property Name="IsSummary">
<Value>true</Value>
</Property>
Defines whether the instance is a summary
GanttTaskProgress<Property Name="IsHighlighted">
<Value>0.92</Value>
</Property>
Defines the progress of the task as double
GanttChartVisibleRangeStart <Property Name="VisibleRangeStart">
<Value Converter="StringToDateTimeConverter" Expression="dd.MM.yyyy hh:mm:ss">30.04.2016 00:00:00</Value>
</Property>
Defines the time where the time ruler part of gantt chart (right part) starts
GanttChartVisibleRangeEnd <Property Name="VisibleRangeEnd">
<Value Converter="StringToDateTimeConverter" Expression="dd.MM.yyyy hh:mm:ss">10.05.2016 00:00:00</Value>
</Property>
Defines the time where the time ruler part of gantt chart (right part) ends
GanttChartPixelTimeLengthUnit <Property Name="PixelTimeLength">
<Value>0.1</Value>
</Property>
Sets the timespan that will be rendered as one pixel
GanttChartPixelTimeLength <Property Name="PixelTimeLengthUnit">
<Value>Hour</Value>
</Property>
Sets the type of the units used for PixelTimeLength

Gantt Chart Template:

 <?xml version="1.0" encoding="utf-8" ?>
 
 <View xmlns="https://www.soley.io/schemas/slvt" Provider="Soley.Framework.AddIns.DataViewProviders.GanttChartDisplayBinding">
 
 
   <Styles>
     
       <Style VisualTarget="GanttChart">
           <Properties>
               <Property Name="VisibleRangeStart">
                   <Value Converter="StringToDateTimeConverter" Expression="dd.MM.yyyy hh:mm:ss">30.04.2016 00:00:00</Value>
               </Property>
               <Property Name="VisibleRangeEnd">
                   <Value Converter="StringToDateTimeConverter" Expression="dd.MM.yyyy hh:mm:ss">10.05.2016 00:00:00</Value>
               </Property>
               <Property Name="PixelTimeLength">
                   <Value>1</Value>
               </Property>
               <Property Name="PixelTimeLengthUnit">
                   <Value>Hour</Value>
               </Property>
         </Properties>
     </Style>
       
     <Style DataSource=".Node" VisualTarget="GanttTask">
       <Properties>
           <Property Name="ChildEdgeClass">
               <Value>BitterEdge</Value>
           </Property>
         <Property Name="DependencyEdgeClass">
               <Value>SweetEdge</Value>
           </Property>
         <Property Name="Start">
               <Value IsReference="true" Converter="ExcelDateConverter">start</Value>
           </Property>
         <Property Name="End">
               <Value IsReference="true" Converter="ExcelDateConverter">end</Value>
           </Property>        
         <Property Name="Description">
               <Value IsReference="true">Class</Value>
           </Property>    
         <Property Name="Title">
               <Value IsReference="true">id</Value>
           </Property>
         <Property Name="ToolTip">
               <Value IsReference="true">id</Value>
           </Property>
       </Properties>
     </Style>
     
     
   </Styles>
 </View> 

Do you have further questions? Then leave a comment or post in our forum!

Was this article helpful?

Related Articles