Basic silverlight (3) chart with datapoints hard coded in xaml

When learning Silverlight Toolkit Charts you probably would like an easy
example of a basic chart to start with.

Furthermore when you are trying to style your chart you surely would like
to see your Series populated with desired data points directly in Expression Blend.

I started reading this excellent article http://expression.microsoft.com/en-us/dd433476.aspx by Pete Brown.

The only problem I have encountered is that probably

the Toolkit namespaces changed between the Pete's article Toolkit version and the version I'm currently using (November 2009).

Well, let's see the xaml code:

   1 <UserControl x:Class="XamlChart.MainPage"
   2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   5 
   6         xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
   7         xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
   8         xmlns:my="clr-namespace:XamlChart"
   9 
  10         mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  11 
  12     <UserControl.Resources>
  13         <my:ChartConverter x:Key="ChartConverter"/>
  14     </UserControl.Resources>
  15 
  16     <Grid x:Name="LayoutRoot">
  17                 <charting:Chart Title="My Chart"  LegendTitle="Legend">
  18             <charting:AreaSeries Title="Series 1" DependentValueBinding="{Binding y, Converter={StaticResource ChartConverter}}" IndependentValueBinding="{Binding x, Converter={StaticResource ChartConverter}}"  >
  19                 <charting:AreaSeries.ItemsSource>
  20                     <controls:ObjectCollection>
  21                                <my:MyPoint x="5" y="6"/>
  22                                            <my:MyPoint x="6" y="7"/>
  23                                            <my:MyPoint x="7" y="5,3"/>
  24                                            <my:MyPoint x="8" y="9"/>               
  25                             </controls:ObjectCollection>    
  26                 </charting:AreaSeries.ItemsSource>                          
  27             </charting:AreaSeries>
  28                         <charting:Chart.Axes>       
  29                                 <charting:LinearAxis Orientation="X" Title="X Axis" Location="Bottom"></charting:LinearAxis>
  30                                 <charting:LinearAxis Orientation="Y" Title="Y Axis" Location="Left" ShowGridLines="True" ></charting:LinearAxis>            
  31                         </charting:Chart.Axes>
  32         </charting:Chart>
  33   </Grid>
  34 </UserControl>
  35 

At line 6 and 7 you can see the right namespaces for the November 2009 Toolkit and at line 8 the namespace of the application itself that is mandatory to add references to our own DataPoints in the xaml a few lines after.

Of course you must add references to System.Windows.Controls.DataVisualization.Toolkit.dll and System.Windows.Controls.Toolkit.dll in your project client side.

Now let's see our class that represent our Datapoints:

   1 using omitted for brevity
   2 
   3 namespace XamlChart
   4 {
   5     public class MyPoint
   6     {   
   7         public Object x { get; set; }   
   8         public Object y { get; set; }
   9     }
  10 }
  11 

The class is very easy! I've used objects instead of integers or doubles because I want to use this class for every data types (surely there's a better way to achieve this).

Since I used objects I had to use a value converter declared in the UserControl resources and defined in this way:

   1 namespace XamlChart
   2 {
   3     public class ChartConverter : IValueConverter
   4     {
   5         public object Convert(object value,
   6                            Type targetType,
   7                            object parameter,
   8                            CultureInfo culture)
   9         {
  10             return System.Convert.ToDouble(value);
  11         }
  12 
  13         public object ConvertBack(object value,
  14                                   Type targetType,
  15                                   object parameter,
  16                                   CultureInfo culture)
  17         {         
  18             return value;
  19         }
  20     }
  21 }

You should use another converter if you want to display other data type.

The Converter is used at line 18 of the xaml code where we set the DependentValueBinding and IndependentValueBinding. Anyway if you use the desired type in the MyPoint class you can ignore the converter stuff.

We have added at line 8 the namespace of our application and so we can reference our objects at lines 22,23,24 as a hard coded ItemsSource for our AreaSerie.

In the end (lines 28-31) I added two axes for our plot, but also them are not mandatory.