I had the need to create a VERY simple Gantt chart – with no moving parts – just to show project start and end date ranges, along with a line for today’s date, and throw in some “health” statistics – like below:
- Simple Custom Silverlight Gantt Chart using Toolkit
This turned out to have many working pieces, due to the fact that I had to “Template” out a lot of controls (like the chart itself, the series bars, and the axis).
Now I want to point out that my implementation is not perfect – there’s a lot that I want to try to improve upon. For best example, I use a LinearAxis instead of a DateTimeAxis to display my dates, because I could not get the DateTimeAxis to work even for a simple example.
But first, let’s list out the pieces that I had to implement individually, starting from a starting point of using a simple run-of-the-mill BarSeries:
Getting rid of the Legend
- Getting a Today Line added to the chart
Getting a ToolTip for the Today Line
Adding a Text Label for the end point, and having that label be either inside or outside the box depending on how big it was
Changing the bar’s ToolTip (this was easy)
Getting the X Axis to display Dates instead of “Days from Min Date” (Messy, yes)
Getting the X Axis to have a dynamic interval such that it only shows about 6 -7 points at a time
Getting the X Axis to Rotate
Getting “Extra Stuff” inside the Y Axis Label area
And last but hardest, setting the “Start Date” so that the bars do not go all the way across starting from 0.
The key to the Charts, and apparently Silverlight in General (this was only my second big Silverlight Project) is having controls where their style overwrites their “Control Template”. Basically this just means that you start with how it is currently laid out and you change it up by adding, removing, and updating the controls.
So the first thing you want to do is to set up your project. Although I was going to use this in SharePoint for SharePoint data pulling, I just created a vanilla Silverlight Application and said “Yes” to create the sample Web application that lets you debug. You need to download the Silverlight Toolkit, which gives you TONS of really cool controls, including some basic-to-intermediate charting (http://silverlight.codeplex.com). You’ll note that it puts the files (by default) in C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10, and from there you have the Bin folder where the dll’s are stored, and in the Source folder are ZIP files with the FULL SOURCE CODE! There’s also a nifty Samples folder that has one page that shows you a bunch of generated charts. So grab your references from the BIN folder, and make sure you include System.Windows.Controls.Data.Toolkit, System.Windows.Controls.Toolkit, and System.Windows.Controls.DataVisualization.Toolkit. I just added them all to be lazy, so I don’t know if I missed telling you about one of them, or if one I listed is redundant for this project.
Once you have your project set up, the first thing you should do is to create a very simple out-of-the-box Bar Chart to see what it looks like. You’ll need to go to your XAML file and add a reference to the Charting components:
and if you want some sample data, add a reference to the System dll:
Next, inside your Grid that serves as your Layout Root, “draw” a chart with a Dependent axis (X – bottom horizontal) and an Independent axis (Y – left vertical). Throw in some sample data, and your chart XAML looks like this:
Next post we will start looking into customizing all of these pieces.