Creating Gantt Charts using Chart Control

Download (0)

Full text


Creating Gantt Charts using the .Net Chart Control

Gantt charts (that is charts which graphically display tasks by start and end dates) are one of the more

challenging type of charts to create. Using the .Net Chart control however makes it a fairly easy task.

This sample shows how to use the.Net Chart control, using a VWG compatible wrapper for the control

and printing charts using the iTextSharp PDF open source libraries and a download Gateway.

Some background for the .Net Chart control, this is taken from Alex Gorev's Web blog:

This blog can be found at:

Also see:

So, requirements are either .Net Framework 3.5 SP1 OR .Net Framework 4.0.

This simple project was built as:

1) A Winforms example ( using VS C# 2010 with a Windows application as

the output type.

2) A VisualWeb GUI example ( using VS C#2010 with a class library

(GanttExampleVWG.dll) as the output type. This dll should be included in the bin folder of the

web library.

3) A Web site ( using VS Web Developer 2010, containing a default.aspx

page, a bin folder, a Reports folder and the web.config file.

"So I will start with a little bit of history... Dundas is one of the leaders in data visualization,

who provides well known Chart, Gauge, Map and other visual controls for different Microsoft

development platforms (ASP.NET, Windows Forms, SQL Reporting Services and

SharePoint). Microsoft acquired Dundas Data Visualization Intellectual Property in April

2007 and is integrating this technology in different Microsoft products. New Chart and Gauge

report items were already released as part of SQL Reporting Services 2008.

We also announced the new Map report item which will be available in the next release of

SSRS.Microsoft Chart controls (ASP.NET and Windows Forms), released at PDC 2008, also

based on the source code acquired from Dundas! Microsoft Chart control is available as a

separate installation for .NET Framework 3.5 SP1 and will be part of .NET Framework 4.0."


For the VWG version, Lufe provided me with a wrapper for the MsChart

control and I converted it into C#. Thanks Lufe, that was very much


To run the application on the web, add the following to the applications

section of the web.config:


<Application Code="GanttChart" Type="GanttExample.GanttChart, GanttExampleVWG"/> </Applications>

To use the .Net Chart control, you also need to add an httphandler:



<add verb="GET,HEAD" path="ChartImg.axd"

type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> ... </httpHandlers>

To print the chart control, I use the iTextSharp open source libraries (version 5 or above) to create PDF

documents on the fly. To print the chart area, we save the chart as a png image in the reports folder,

and then use the iTextSharp functions to get an instance of the image and include it in the document.

Include the iTextSharp.dll in the bin directories of the web site and in the VWG C# project include a

reference to it.

You will need to have a folder named “Reports” in the root directory of the web site.

The example was built using VWG Release 6.4.

The example in the web.config is using .ashx instead of .wgx for the VWG application.

Any questions or feedback, I can be reached at


The basics

Each task, start date and end date will be saved as a datapoint series of their own. We create a List of the series

type as "private

List<Series> seriesList = new List<Series>();".

For each task, we want to store the x-ordinal of the task (so tasks or resource with the same name will be laid out side-by-side) and two date values for the y-ordinal.

Datapoint values in the series are of the type "double" so we will convert the values to: string xlabel = string.Empty;

double xordinal = 0; double yplot1 = 0; double yplot2 = 0;


Now we loop through all the tasks (or resources) we want to plot. For each task/resource:

xlabel = is the name of the task or resource to show as the label

xordinal = an ordinal for the x-axis, as an example, different tasks for the same resource would have the same xordinal when displaying a resource gantt chart

yplot1 = the start date. yplot2 = the end date.

// To cast a date as a double, use the Office Automation date (ToOADate) function, you cannot directly cast a datetime value to a double (Note: Office Automation Dates have different min and max values than a datetime value)

yplot1 = (double)FromTime.ToOADate(); yplot2 = (double)ToTime.ToOADate();

// Use a different series for each datapoint

Series seriesInstance = new Series();

// For Gantt charts, we want a RangeBar graph type

seriesInstance.ChartType = SeriesChartType.RangeBar;

// Have a start and end date so plotting 2 points on the y-axis

seriesInstance.YValuesPerPoint = 2;

// We want to draw datapoint side by side (night is day?)

seriesInstance.CustomProperties = "DrawSideBySide=false";

// Add the datapoint to the series, specifying tooltiptext, color and label

xordinal = (double)itemIndex;

seriesInstance.Points.AddXY(xordinal, yplot1, yplot2); seriesInstance.Points[0].ToolTip = someTipText;

seriesInstance.Points[0].Color = resourceColor; seriesInstance.Points[0].AxisLabel = xlabel; seriesList.Add(seriesInstance);


Now that all the datapoints have been collected, add them to the chart and update it.

// Add all the series to the chart

foreach (Series plotSeries in seriesList) {

chart1.Series.Add(plotSeries); }

// Force x-axis to show each task or resource

chart1.ChartAreas[0].AxisX.Interval = 1; // Set y-axis to show each day of the month

chart1.ChartAreas[0].AxisY.Interval = 1;

// Set x-axis to show in reversed order so dates are displayed left-to-right

chartArea1.AxisX.IsReversed = true;

// Set other y-axis properties

chartArea1.AxisY.IsStartedFromZero = false; chartArea1.AxisY.IsMarginVisible = false; chartArea1.AxisY.IsStartedFromZero = false;

chartArea1.AxisY.IntervalType = DateTimeIntervalType.Days;

// Set the y-axis labels

chart1.ChartAreas[0].AxisY.Minimum = firstDate.AddDays(-1).ToOADate(); chart1.ChartAreas[0].AxisY.Maximum = lastDate.AddDays(+1).ToOADate(); //chart1.ChartAreas[0].AxisY.LabelStyle.Format = "MMM dd ddd";

//chart1.ChartAreas[0].AxisY.LabelStyle.Format = "ddd MMM dd";

chart1.ChartAreas[0].AxisY.LabelStyle.Format = "ddd M/d";

// Force redraw of chart


Sample output from the project (showing by task)