Sue Hernandez's SharePoint Blog

SharePoint and Related Stuff

Simple Silverlight Gantt Chart using Toolkit

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.

PREREQUISITES

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:

xmlns:chartingToolkit=”clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit”

and if you want some sample data, add a reference to the System dll:

xmlns:sys=”clr-namespace:System;assembly=mscorlib”

 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:

 <chartingToolkit:Chart
    
x:Name=”testChart”
    
BorderBrush=”Transparent”
     
Height=”400″

     Width=”400″>
    
<chartingToolkit:Chart.Series>
         
<chartingToolkit:BarSeries>
               <chartingToolkit:BarSeries.DependentRangeAxis>
                   
<chartingToolkit:LinearAxis
                        
Orientation=”X” />
               
</chartingToolkit:BarSeries.DependentRangeAxis>
              
<chartingToolkit:BarSeries.IndependentAxis>
                   
<chartingToolkit:CategoryAxis
                        
Orientation=”Y” />
              
</chartingToolkit:BarSeries.IndependentAxis>
              
<chartingToolkit:BarSeries.ItemsSource>
                   
<DoubleCollection>
                        
<sys:Double>50</sys:Double>
                        
<sys:Double>100</sys:Double>
                        
<sys:Double>250</sys:Double>
                   
</DoubleCollection>
              
</chartingToolkit:BarSeries.ItemsSource>
         
</chartingToolkit:BarSeries>
    
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>

Next post we will start looking into customizing all of these pieces.

Advertisements

One response to “Simple Silverlight Gantt Chart using Toolkit

  1. Uday Singh January 31, 2012 at 6:21 am

    Where can I find the source code of these posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: