FlexChart | ComponentOne
FlexChart / Understanding FlexChart / FlexChart Types / WPF Gantt Chart
In This Topic
    WPF Gantt Chart
    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.

    WPF Gantt Chart

    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}";
    }