It's very easy to make a Gantt Chart in Asp.Net, just takes a little math
Recently I was asked how to make a Gantt chart in Asp.Net. Now I am too cheap to actually go and buy some software to do this for me, so I decided to figure it out on my own; can't be that hard right? I will just use some strategically crafted div's to look like legitimate graphs. Turns out it really wasn't that tough... wasn't even a lot of code!
First thing I did was make some sample data. Whenever I have used a Gantt Chart in the past, it has been used to plot projects over time. So my basic elements were:
- Title
- Start Date
- End Date
Now you can have endless extra crap on there, but that is the basics. Also, instead of dates, you could easily substitute numbers, but I am going to go with dates. I just produced a DataTable with those as my 3 DataColumns and some dummy data:
| title | start | end |
| Super Important Project |
6/8/2008 |
7/3/2008 |
| A Project |
6/3/2008 |
6/30/2008 |
| Crappy Project |
6/25/2008 |
7/3/2008 |
| Party Project |
6/13/2008 |
6/23/2008 |
| Being stupid |
6/28/2008 |
7/8/2008 |
| Getting Hammered |
6/18/2008 |
7/1/2008 |
| Recovering |
7/2/2008 |
7/5/2008 |
Now that we have the data, it is just down to the math of how we are going to get this to work. First of all, let me explain my approach to CSS graphing: using divs and the css 'width' property can easily make you a horizontal bar graph, just stack a couple divs on top of eachother that are different widths, different backgrounds and there you go, you have some nifty graphs. The only challenge here is that we can't just use a simple percentage. The left side of the graph isn't necessarily on the far left side, and with width is going to be relative to where it starts... hmmm.
I actually drew this out on some scratch paper on my desk to make it easier to see, using a nice even number: 10.
Now with this information, we can figure out how to render each div (graph line). Since I am working with DateTime variables, I can easily convert this into TimeSpans and then Days which is an int... then it's easy math. Notice I added in the *100 up above, that is so I am working with full percentages instead of decimals, like css uses. Here is the code I cam up with for defining where to start a div and how wide for it to be. Here is my function that takes in title String, start DateTime and end DataTime and returns a nicely formatted div. I am also using the global variables dtMin, and dtMax which are DateTime variables that are the maximum and minimum dates in the data (I use LINQ to find that easily, you can see in the code). dateSpan is another global variable, an int that is simply (dtMax - dtMin).Days.
public string doGantt(object t, object s, object e)
{
string title = (string)t;
DateTime start = (DateTime)s;
DateTime end = (DateTime)e;
int numberOfDays = (end - start).Days;
int startDivAt = (start - dtMin).Days > 0 ? (start - dtMin).Days * 100 / dateSpan : 0;
int howWide = end != dtMax ? ((end - start).Days + 1) * 100 / dateSpan : (end - start).Days * 100 / dateSpan;
count++;
return "<div class=\"gantt\" style=\"background:" + colors[count%colors.Count()] + ";width:" + howWide + "%;margin-left:" + startDivAt + "%;\"> "+title+"</div>";
}
Notice in there I call an array I had declared called colors[] which simply has the colors {"navy","maroon","orange"} in it - this simply rotates the colors of the graph. The code is pretty straight forward I think; had to do a little magic to prevent it from falling off the edge of the page. Then to implement it, you just need to add in a repeater in your aspx:
<fieldset>
<legend>Gantt Chart</legend>
<asp:Repeater ID="rpt" runat="server">
<HeaderTemplate>
<div style="font-weight:bold;font-size:1.2em"><%= dateHeader %><br /></div>
</HeaderTemplate>
<ItemTemplate>
<%# doGantt(Eval("title"), Eval("start"), Eval("end")) %></td>
</ItemTemplate>
</asp:Repeater>
</fieldset>
And then you set your DataSource and DataBind and you have a Gantt Chart...
rpt.DataSource = dt;
rpt.DataBind();
It even resizes liquidly to the size of the container. It is very vanilla, but definitely a good start to a simple, no images Gantt chart that could be expanded/spruced up very easily!