Creating Gantt Charts using the.net Chart Control

Transcription

1 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 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: 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 (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.

2 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: <Applications> <Application Code="GanttChart" Type="GanttExample.GanttChart, GanttExampleVWG"/> </Applications> To use the.net Chart control, you also need to add an httphandler: <httphandlers>... <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 [email protected]

3 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;

4 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.

5 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();

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