The Weekly Source Code 36 - PDC, BabySmash and Silverlight Charting
First, let me remind you that in my new ongoing quest to read source code to be a better developer, Dear Reader, I present to you thirty-fifth in a infinite number of posts of "The Weekly Source Code."
At the end of my crazy babies talk at PDC (Tips on how I prepared here) I had a big demo where I gave a URL to a Silverlight version of BabySmash that Grant and I built for the show. You can watch the presentation online if you like and fast forward to the end (around 60 minutes in) and see the big demo. Basically we had the Silverlight BabySmash talk via ADO.NET Data Services (I'll post in detail in the near future) to a SQL backend. Then I had an MVC reporting site that had some charts that would update as folks smashed. There were over 90,000 smashes during the talk.
The chart was updating as folks were smashing and we even had a Baby vs. Baby fight break out where the "A" people and the "J" people were going at it. Jeff Atwood started the bloodbath with this tweet as he urged on the overflow room along with Phil Haack. That man's trouble, I tell you.
In the talk, I started out with a old .NET 1.1 chart from 2003 and showed it working, unchanged, in ASP.NET 3.5 SP1. It's just a nice reminder that things usually work just as they should. Then I upgraded it to a new .NET 4.0 ASP.NET Chart that I'll blog about in detail soon. Then, I showed the final site with the new Silverlight Charts. Tim Heuer has a great post on how to databind with these new charts.
What's really cool about these Silverlight Charts is that they are Ms-PL (Microsoft Public License) which is a REALLY relaxed license. They're released as part of the larger Silverlight Toolkit up at http://www.codeplex.com/Silverlight. There's a bunch of controls in there. It is a preview release though, so things will change, and hopefully only get better:
- Components in the Preview Quality Band
- Components in the Stable Quality Band
You can check out the Toolkit Chart samples and run them yourself here. It's nice that the chart sampler actually includes the source code within the Silverlight sample app. You can browse dozens of charts, then switch tabs and see the XAML and code-behind. This all lives in Microsoft.Windows.Controls.DataVisualization, the namespace (so far) for these controls.
My reporting page included a Silverlight Chart and a Virtual Earth control to show where people were smashing from. The data is coming from the Astoria ADO.NET Data Service, which is easy to get to via either JavaScript or from Silverlight.
You add the charts to your Silverlight application by adding a reference to the assembly then assigning a namespace to them:
xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"
Them, lay them out. I've got two charts here, one column and one pie. I also did some stuff like the linear gradient for the background, etc. Still, pretty simple.
<charting:Chart Grid.Column="0" Height="300" StylePalette="{StaticResource PaletteColors}" Style="{StaticResource ChartStyle1}" >
<charting:Chart.Background>
<LinearGradientBrush EndPoint="1.332,1.361" StartPoint="-0.107,-0.129">
<GradientStop Color="#FF6CA9D5"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</charting:Chart.Background>
<charting:Chart.Axes>
<charting:Axis x:Name="colAxis" Orientation="Vertical" AxisType="Linear" Minimum="0" Maximum="1"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:ColumnSeries x:Name="colSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>
<charting:Chart Style="{StaticResource ChartStyle1}" Grid.Column="1" Height="300" StylePalette="{StaticResource PaletteColors}" >
<charting:Chart.Axes>
<charting:Axis Orientation="Vertical" AxisType="Linear" Maximum="100000"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:PieSeries x:Name="pieSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:PieSeries>
</charting:Chart.Series>
</charting:Chart>
We had a generic list of "CharacterSmash" data, as in List<CharacterSmash> that we'd be binding to the chart.
private readonly List<CharacterSmash> characterData = new List<CharacterSmash>();
For the purposes of the presentation, I just polled for the data by making an asynchronous call to the service, then updating the bar and pie chart when it returned:
private void RequestSmashCountData()
{
var container = new SmashMetricsContainer(new Uri("/BabySmashPDC/SmashService.svc", UriKind.Relative));
// Setup data query
var query = container.SmashCount;
// Start the async query
query.BeginExecute((asyncResult =>
{
// Get the matching results from the service call
var matches = query.EndExecute(asyncResult);
UpdateCharacterData(matches);
UpdateBarChart();
UpdatePieChart();
}), null);
}
See how the BeginExecute includes the "do this when you return" as a lambda? It's a tidy syntax.
UPDATE: Tim Heuer emailed me to say that we're re-databinding the results. Instead, he wisely points out:
"On the code where you are getting the smash metrics for the silverlight charts…I see that you are re-binding the data?
If you bind to an observablecollection and just change that the chart should change with the data…including the Y-axis growth."
Excellent point! Tim's right. The way I'm doing it works, but it's old school. If I just updated a ObservableCollection the chart would notice the changes and update itself.
The updates are also clean, just databinding the results:
private void UpdateBarChart()
{
var axis = (Axis)FindName("colAxis");
if (axis != null)
axis.Maximum = GetMaximumCount() + 50;
var colSeriesControl = (ColumnSeries)FindName("colSeries");
if (colSeriesControl != null)
colSeriesControl.ItemsSource = characterData;
}
All we had to do that was interesting at all was to make sure the Y-axis grew as the data grew.
Who do we have to thank for this charting control? David Anson is who. Basically he was the Primary Dev and only Tester on the whole thing, and you should check out his blog for lots of inside information on charting in Silverlight.
UPDATE: David had development help from Jafar Husain, Jeremy Sheldon, Delian Tchoparinov, Alex Gorev and Sean Boon and designer Mehdi Slaoui Andaloussi.
If making a complex chart seems daunting, David has ChartBuilder that you run now in your browser. It'll generate and show you the XAML you need for your chart.
There was so much announced at PDC, I wanted to make sure that folks heard about this important release that might have been lost in the shuffle. Even better, the source is open so if you don't like it, change it.
Related Links
- Make your Silverlight Applications Smaller with ReXapper
- ChartBuilder and Intro to Charting with Silverlight
- Silverlight Tookit Samples
- http://www.codeplex.com/Silverlight
- Shawn Burke's blog (he's the boss)
- Silverlight Control Support Forum
- Tim Heuer on the Silverlight Toolkit
- Jesse Liberty's Silverlight Blog
- Grant Archibald on Silverlight and BabySmash
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
These basic tips from a few years back still stand - 
Seems silly, but it works. You'll see that I repeat myself four or five times to make sure important points get hit and pounded in. This style of arc works in most technical talks, but others are more complex so I use what I call a "pivot point."
