Creating Gantt Charts using the .Net Chart Control - Visual WebGui ...

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:
"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."
This blog can be found at: http://blogs.msdn.com/b/alexgor/archive/2008/11/07/microsoft-chartcontrol-vs-dundas-chart-control.aspx
Also see: http://code.msdn.microsoft.com/mschart
So, requirements are either .Net Framework 3.5 SP1 OR .Net Framework 4.0.
This simple project was built as:
1) A Winforms example (GanttExampleWin.zip) using VS C# 2010 with a Windows application as
the output type.
2) A VisualWeb GUI example (GanttExampleVwg.zip) 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 (GanttExampleWeb.zip) using VS Web Developer 2010, containing a default.aspx
page, a bin folder, a Reports folder and the web.config file.

For the VWG version, Lufe provided me with a VB.net wrapper for the MsChart
control and I converted it into C#. Thanks Lufe, that was very much
appreciated.
To run the application on the web, add the following to the applications
section of the web.config:
To use the .Net Chart control, you also need to add an httphandler:
...
...
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 kenn@kennware.com

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 seriesList = new List();".
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);
Loop again until all tasks/resources have been added to the seriesList.

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 leftto-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
chart1.Update();

Sample output from the project (showing by task)
Sample output from the project (showing by resource)