In This Topic
Gantt chart is a type of chart which is commonly used for planning and scheduling projects. It provides useful ways of showing activities that are displayed against time. The chart has a list of activities plotted on Y-axis while X-axis plots an appropriate time scale. Activities are represented using bars where position and length of the bars indicate the start time and duration of the activities respectively.
As primary purpose of a Gantt chart is planning and scheduling, it can be used for a range of projects and in various industries, such as construction, engineering, manufacturing, infrastructure, IT and more.
In FlexChart, Gantt chart can be implemented using the Series class. To begin with, create a new Series object and specify its properties. Then, use the SymbolRendering event provided by the Series class to plot activity bars on the chart and the LabelRendering event provided by the FlexChart class to display the labels.
Below is the implementation in code:
<c1:FlexChart Name="flexchart"/>
| C# |
Copy Code
|
public partial class MainWindow : Window
{
// A static list to hold task data for use in the chart
public static List<Task> taskData;
public MainWindow()
{
InitializeComponent();
taskData = GetTasksData();
flexchart.Header = "Release Schedule";
flexchart.HeaderStyle = new ChartStyle { FontSize = 14, FontWeight=FontWeights.Bold };
flexchart.Background = Brushes.LightGray;
flexchart.ChartType = ChartType.Bar;
flexchart.BindingX = "Name";
flexchart.ItemsSource = taskData;
flexchart.Binding = "Start,End";
flexchart.Series.Add(new GanntSeries(taskData) { Tooltip = "{TooltipContent}" });
flexchart.DataLabel.Content = "{DurationInWeeks:n1} Weeks";
flexchart.DataLabel.Position = LabelPosition.Left;
flexchart.AxisX.Min = taskData[0].Start.ToOADate();
flexchart.AxisX.MajorUnit = 7D;
flexchart.AxisX.MajorGrid = true;
flexchart.AxisY.Reversed = true;
}
// Method to create and return a list of tasks with their start and end dates
public static List<Task> GetTasksData()
{
var taskList = new List<Task>();
var year = DateTime.Now.Year;
taskList.Add(new Task { Name = "Plan", Start = new DateTime(year, 5, 5), End = new DateTime(year, 5, 11) });
taskList.Add(new Task { Name = "Design", Start = new DateTime(year, 5, 12), End = new DateTime(year, 5, 18) });
taskList.Add(new Task { Name = "Development", Start = new DateTime(year, 5, 19), End = new DateTime(year, 5, 30) });
taskList.Add(new Task { Name = "Test Accept", Start = new DateTime(year, 6, 1), End = new DateTime(year, 6, 14) });
taskList.Add(new Task { Name = "Distribution", Start = new DateTime(year, 6, 14), End = new DateTime(year, 6, 21) });
return taskList;
}
}
// Custom series class for Gantt chart representation
public class GanntSeries : Series, ISeries
{
List<Task> taskData;
public GanntSeries(List<Task> taskData)
{
this.taskData = taskData;
// Event handler for custom rendering of the symbols (bars) in the Gantt chart
SymbolRendering += (s, e) =>
{
// Get the color from the chart's palette for each task (bar)
var color = ((IPalette)ActualChart).GetColor(e.Index);
// Set the fill and stroke (border) colors for the bar
e.Engine.SetFill(color);
e.Engine.SetStroke(color);
};
}
// multiple legend items for the series
string ISeries.GetLegendItemName(int index) => taskData[index].Name;
_Style ISeries.GetLegendItemStyle(int index) => new _Style { Fill = ((IPalette)ActualChart).GetColor(index) };
int ISeries.GetLegendItemLength() => taskData.Count;
}
public class Task
{
public string Name { get; set; } // The name of the task
public DateTime Start { get; set; } // The start date of the task
public DateTime End { get; set; } // The end date of the task
// Optional: You can add a method to calculate the duration of the task
public TimeSpan Duration => (End - Start);
public double DurationInWeeks => Duration.TotalDays / 7;
// Content for the tooltip to show task start and end dates
public string TooltipContent => $"{Start:MMM-dd} to {End:MMM-dd}";
}
|
