Click here to Skip to main content
Click here to Skip to main content

Gantt Chart

By , 2 Oct 2008
 

GanttChart.JPG

Introduction

This component makes it easy to add a Gantt chart to your application. You just need three lines of code to get it working.

This Gantt chart control includes these features:

  • The columns are automatically shown based on the width of the component and the time between the start date and the end date. If there're more than two days between those dates, it will only show the date; otherwise, it will show the time of the day (with minimum 5 minutes apart).
  • You can set the color (including the hover color) for each bar individually.
  • The Gantt chart automatically shows a custom scroll bar when it contains more rows than the visible area allows.
  • You can easily obtain information about the bar when hovering your mouse above one.
  • An easy to use multi-row tooltip text.
  • Change bars using your mouse.

Background

I tried to find a good, free, and easy Gantt chart control to use in my project, but didn't have any luck. Then, I decided to make one myself, which actually was easier than I thought it would be.

Using the code

To get the Gantt chart component to show something, you only need this:

GanttChart1.FromDate = New Date(2007, 12, 12, 0, 0, 0)
GanttChart1.ToDate = New Date(2007, 12, 24, 0, 0, 0)
GanttChart1.AddChartBar("Row 1", Nothing, New Date(2007, 12, 12), 
    New Date(2007, 12, 16), Color.Aqua, Color.Khaki, 0))

As mentioned above, this component also includes a multi-line tooltip text.

With GanttChart2
  Dim toolTipText As New List(Of String)
  toolTipText.Add("Time:")

  .ToolTipTextTitle = .MouseOverRowText
  .ToolTipText = toolTipText
 
End With

When a tooltip-text-row is included, the line is automatically bolded.

It is also possible to save the Gantt Chart to an image file:

GanttChart2.SaveImage("C:\TestImage.jpg")

The included Zip file contains a project showing how to use its different features.

History

  • Version 0.55
    • Added the feature to drag the bars (after editing a bar, a BarChanged event is fired).
    • If time between start and end date is larger than 60 days, the Gantt chart switches over to showing months instead of days.
  • Version 0.54
    • The Gantt chart can now be saved to an image file.
  • Version 0.53
    • ScrollBar added to component.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Adagio.81
Denmark Denmark
Member
No Biography provided

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
Questionhow to add waiting Cursors in your libmemberMember 87300737 May '13 - 16:54 
in My project, I have list item. for each item have gantt chart.
when user click on item, system will load grantt chart'item.
I meet problem when user click other item the your lib need to deplay time for refesh and draw chart again.
 
How to add waitting cursors when your lib draw chart ( I had add cursors in my code but it not effect).
AnswerHow To Add Text to BarsmemberFamous Mortimer15 Apr '13 - 9:50 
Here is a very simple example how to add text to the center of each bar. You can adjust to fit your application, create a new sub to populate from your data source or add a new property 'bar.text' etc.
 
After the code in GanttChart.vb
                    ' Draws the bar

                    grfx.DrawRectangle(Pens.Black, obRect)
                    grfx.FillRectangle(obBrush, obRect)
 
Add this:
                    'add text to bar
                    Dim txt As String = "raz" & ControlChars.CrLf & "dwa" & ControlChars.CrLf & "trzy"
                    Dim txtFont As New Font("Arial", 10)
                    Dim txtWidth As Integer = grfx.MeasureString(txt, txtFont).Width
                    Dim txtHeight As Integer = grfx.MeasureString(txt, txtFont).Height
                    Dim barWidth As Integer = bar.TopLocation.Right.X - bar.TopLocation.Left.X
 
                    'if text will fit, add it
                    If txtWidth < barWidth And txtHeight < barHeight Then
                        grfx.DrawString(txt, txtFont, Brushes.Black, (barWidth / 2 - txtWidth / 2) + bar.TopLocation.Left.X, (barHeight / 2 - txtHeight / 2) + bar.TopLocation.Left.Y)
                    End If
 
This will only work if the text will fit inside the bar. My bars are 108 pixels tall so i can fit several lines but if yours are small or the default size, try one line
QuestionHow to control the column text (need to change the moth to days)memberMember 982388314 Apr '13 - 19:33 
In the example chart 1 contians days while the upper only month, how to control it???
AnswerRe: How to control the column text (need to change the moth to days)memberAdagio.8117 Apr '13 - 0:50 
Currently it is only controlled automatically based on the time between first date and last date. You might want to look at the function
GetFullHeaderList

GeneralMy vote of 5memberdoktor0_929 Jan '13 - 9:23 
Kanon Adrian
 
Fandt din kode ved et tilf�lde - lige hvad jeg manglede
 
/Morten
GeneralRe: My vote of 5memberAdagio.8129 Jan '13 - 20:52 
Er glad for at du kan bruge det Smile | :)
QuestionSpeed improvement ?!memberPSoft200014 Nov '12 - 3:54 
Why two almost identical for loops ?
 
The bar is not yet needed!!!
 
The foreach Loop is needless
 
The Speed will increase dramatically Wink | ;)
 
Optimised version:
 
Private Sub DrawNetHorizontal(ByVal grfx As Graphics)
        Dim FUN As String = "DrawNetHorizontal"
        Dim index As Integer = 0
        Dim width As Integer = 0
        Try
            If shownHeaderList Is Nothing Then Exit Sub
            If shownHeaderList.Count = 0 Then Exit Sub
            index = 0
            width = (widthPerItem * shownHeaderList.Count) + barStartLeft
            For index = 0 To GetIndexChartBar("QQQQQQ")
                Try
                    grfx.DrawLine(lineColor, 0, barStartTop + (barHeight * index) + (barSpace * index), width, barStartTop + (barHeight * index) + (barSpace * index))
                Catch EXC As Exception
                    '...
                End Try
            Next
            lastLineBottomStop = barStartTop + (barHeight * (index - 1)) + (barSpace * (index - 1))
        Catch EXC As Exception
            '...
        End Try
    End Sub
 
Greetings
 
vmeyer
QuestionText on BarsmemberMember 95508663 Nov '12 - 10:01 
Hi, is there a way to show text on bars permanently?
QuestionHow to change line height for bars ?membermjfuchs4 Oct '12 - 1:39 
Hello,
 
got it running now, found the dll.
 
how can i achieve a larger vertical spacing for the bars or even broaden them ?
 
Greetings
 
mjfuchs
AnswerRe: How to change line height for bars ? [modified]memberMember 95508663 Nov '12 - 10:12 
Hi,
 
try to change the code line:
 
Private barHeight As Integer = 9
 
in GanttChart Class. If you increase the value the bars get heigher.
If you need more space between the bars lines change the code line:
 
Private barSpace As Integer = 5
 
Smile | :)
Have a nice day.


modified 4 Nov '12 - 8:46.

Question1 Question and 1 Errormembermjfuchs2 Oct '12 - 2:06 
Hello,
 
i found this an liked it very much. I am using VB 2010 Express and whenn starting the sample it works. but i do get the following message:
 
Warnung 1 Der Typ "TestApplication.GanttChart" wurde nicht gefunden. Stellen Sie sicher, dass auf die Assembly, die diesen Typ enthält, verwiesen wird. Wenn dieser Typ Teil Ihres Entwicklungsprojekts ist, stellen Sie sicher, dass das Projekt mithilfe der Einstellungen für die aktuelle Plattform oder eine beliebige CPU erstellt wurde. 0 0
 
My Questions:
 
How do i get rid off that message because i want to write a deliverable application ?
 
Where do i find the control object to integrate it in my own applications/forms ?
 
Are there any references /DLL or anything to load to get the control ?
 
Greetings Matthias
Questionsignatures on blocksmemberibrogim4 Sep '12 - 1:29 
Hello,
how to make signatures on blocks?
Sorry, My English is bad!
QuestionC# Version (bug fix help needed)memberOrilon1 Sep '12 - 0:08 
Hi there,

Firstly big thanks to Adagio.81 for your contribution and time in making this control!

I've converted the GanttChart to C#, but I'm having difficulty with it if anyone can help on these 2 issues (class added below)?
1) Initially it was causing VS to crash so I've temporarily excluded the paint method from firing when in design mode
2) It's loading all bars with 1 pixel width irrespective of the values you put in?
 
Sample Bars:
 
ganttChart1.FromDate = new System.DateTime(2009, 1, 1, 0, 0, 0);
ganttChart1.ToDate = new System.DateTime(2009, 12, 31, 0, 0, 0);
 
List lst = new List();
 
lst.Add(new BarInformation("Row 1", new System.DateTime(2009, 1, 1), new System.DateTime(2009, 5, 1), Color.Gray, Color.LightGray, 0));
lst.Add(new BarInformation("Row 2", new System.DateTime(2009, 1, 1), new System.DateTime(2009, 7, 1), Color.Gray, Color.LightGray, 1));
lst.Add(new BarInformation("Row 3", new System.DateTime(2009, 5, 1), new System.DateTime(2009, 8, 1), Color.Gray, Color.LightGray, 2));
lst.Add(new BarInformation("Row 2", new System.DateTime(2009, 10, 1), new System.DateTime(2009, 12, 1), Color.Gray, Color.LightGray, 3));
lst.Add(new BarInformation("Row 1", new System.DateTime(2009, 8, 1), new System.DateTime(2009, 11, 1), Color.Gray, Color.LightGray, 4));
 
foreach (BarInformation bar in lst)
{
	ganttChart1.AddChartBar(bar.RowText, bar, bar.FromTime, bar.ToTime, bar.Color, bar.HoverColor, bar.Index);
}
 
Class:
 
http://pastebin.com/RdttF899
Kind Regards
Chris
___________________________
"There are 10 types of people in the world.
Those that understand binary... and those that don't!"

GeneralRe: C# Version (bug fix help needed)memberOrilon2 Sep '12 - 23:59 
Hi again,
 
I've posted new changes to the C# version of the Gantt Chart - http://pastebin.com/b6HsgvXN[^]
 
It's now displaying the bars and layout correctly. I'm currently working on (adding) a "BarChanging" event for the control.
Will keep you posted.
Kind Regards
Chris
___________________________
"There are 10 types of people in the world.
Those that understand binary... and those that don't!"

Questionadd more rowsmemberwoerny24 Jul '12 - 11:08 
Hallo Smile | :)
 
great Project - very nice   Smile | :)
 
How can i add more Rows?
I trying this for testing.....
 
              
Dim lst As New List(Of BarInformation)
 
lst.Add(New BarInformation("Row 1", New Date(2011, 7, 3), New Date(2011, 7, 5), Color.Aqua, Color.Khaki, 0))
lst.Add(New BarInformation("Row 2", New Date(2011, 7, 1), New Date(2011, 7, 2), Color.AliceBlue, Color.Khaki, 1))
lst.Add(New BarInformation("Row 3", New Date(2011, 7, 5), New Date(2011, 7, 7), Color.Violet, Color.Khaki, 2))
lst.Add(New BarInformation("Row 4", New Date(2011, 7, 3), New Date(2011, 7, 5), Color.Aqua, Color.Khaki, 3))
lst.Add(New BarInformation("Row 5", New Date(2011, 7, 6), New Date(2011, 7, 5), Color.Aqua, Color.Khaki, 3))
 
but the row 5 overwrite row 4.
 
Can you help me?
AnswerRe: add more rowsmemberAdagio.8124 Jul '12 - 19:26 
Try to change the row index number for the last row. Both row 4 and 5 is set to use row index 3
 
Color.Aqua, Color.Khaki, 3))
 
The bolded part is the row index. Change that number to 4 and it will add a new row. The first row has index 0, second row has index 1, etc
 
Hope that helped
GeneralRe: add more rowsmemberwoerny25 Jul '12 - 10:13 
D'Oh! | :doh:    ohhh sh*t

i see a lot of tree .... but can't see the forest Wink | ;)
 
Thanks it works
QuestionAdd a Text Columnmembermono543218 Jul '12 - 7:06 
How Can add another text column HELP
AnswerRe: Add an other Text Columnmembermono543213 Aug '12 - 11:27 
please help
QuestionFix for Ghost BarmemberGoofkop13 Apr '12 - 1:00 
I found the code that caused the ghost bars and I fixed it for you:
 
If bar.StartValue < FromDate Then
   lengthTimeSpan = endValue - FromDate
Else
   lengthTimeSpan = endValue - bar.StartValue
End If
 
Now bars won't draw when they don't need to be drawn.
QuestionGhost Chart bar?memberGoofkop5 Mar '12 - 4:52 
Hello,
 
First of all I wanted to thank you for your amazing control, it has been a real life-saver for me!
 
I have been trying to make the chart bar a bit "dynamic", I can increase / decrease the days, go to month view, etc...
But I have encountered a small glitch, when I navigate to the next day there is a bar that shouldn't be there (also nothing happens when I hover over it)
 
This my example: I added an event on the 25th of december, from 10 to 12.
 
public Chart()
        {
            InitializeComponent();
 
            ganttChart1.FromDate = new DateTime(2012, 12, 24, 08, 0, 0);
            ganttChart1.ToDate = new DateTime(2012, 12, 24, 18, 0, 0);
 
            DateTime test = new DateTime(2012, 12, 25, 10, 00, 00);
            DateTime test2 = new DateTime(2012, 12, 25, 12, 00, 00);
 
            ganttChart1.AddChartBar("Row 1", null, test, test2, Color.Aqua, Color.Khaki, 0);}
            ganttChart1.AddChartBar("Row 2", null, test, test2, Color.Red, Color.DarkRed, 1);
 
This appears correctly like this: [^]
 
Now I used this code to navigate to the next day:
 
        private void button1_Click(object sender, EventArgs e)
        {
            DateTime newFrom = ganttChart1.FromDate.AddDays(1);
            DateTime newTo = ganttChart1.ToDate.AddDays(1);
 
            ganttChart1.FromDate = newFrom;
            ganttChart1.ToDate = newTo;
 
            ganttChart1.PaintChart();
            ganttChart1.Refresh();
            
        }
 
But when I click that button, a strange chart bar appears from the beginning of the Gantt Chart (no matter what the start hour is), it's also the exact same length as the normal event on the previous day. http://localhostr.com/file/f2HdDA2/gantt_2.png[^]
 
I have no idea what's causing this. This "Ghost" chart bar doesn't appear when I go back in the days or when I go to month view.
 
        private void button2_Click(object sender, EventArgs e)
        {
            DateTime newFrom = ganttChart1.FromDate.AddDays(-1);
            DateTime newTo = ganttChart1.ToDate.AddDays(-1);
 
            ganttChart1.FromDate = newFrom;
            ganttChart1.ToDate = newTo;
 
            ganttChart1.PaintChart();
            ganttChart1.Refresh();
        }
 
        private void btnMaand_Click(object sender, EventArgs e)
        {
            DateTime newFrom = new DateTime(ganttChart1.FromDate.Year, ganttChart1.FromDate.Month,1);
            DateTime newTo = new DateTime(ganttChart1.ToDate.Year, ganttChart1.ToDate.Month, 31);
 
            ganttChart1.FromDate = newFrom;
            ganttChart1.ToDate = newTo;
 
            ganttChart1.PaintChart();
            ganttChart1.Refresh();
        }
 
I'm sorry to bother you with this problem, but I can't figure it out.
Thanks,
Thomas
QuestionDo you have c# version??memberliusanpi28 Feb '12 - 16:30 
Do you have c# version??I want to study it.Thanks!
QuestionI don't know how to use its !!memberHighgain29 Jan '12 - 18:57 
just like subject!!
GeneralMy vote of 2 [modified]membermusthe9930 Dec '11 - 19:24 
Not working very well. The tool tips are buggy but good work anyway.

modified 31 Dec '11 - 1:35.

Question5 starmemberchunk2 Nov '11 - 4:25 
thanks maan if only you knew how manny lives you have saved you are a hero

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web04 | 2.6.130516.1 | Last Updated 2 Oct 2008
Article Copyright 2007 by Adagio.81
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid