Recognizing the pattern in adding RadCartesian charts

The area, bar and line chart look quite different. They display their data differently and do not seem necessarily interchangeable.  Thanks to the architecture of Windows 8 RadChart controls, however, to learn how to build one is to learn how to build them all. 

It Begins With Data

Start by creating a data class,

public class Data
{
   public string Product { get; set; }
   public double Sales { get; set; }
}

Add to the Data class a static method that generates a collection of Data instances to serve as a proxy for retrieving data from a database or from a web service,

public static List<Data> GetData()
{
   var data = new List<Data>();
   data.Add( new Data()
   {
      Product = "Tissues",
      Sales = 54.76
   } );
   data.Add( new Data()
   {
      Product = "Paper cups",
      Sales = 67.23
   } );
   data.Add( new Data()
   {
      Product = "Pens",
      Sales = 22.99
   } );
   return data;
}

Creating the Charts

With that data, you are ready to create your chart. Turn to MainPage.xaml.  Inside the main grid, add a RadCartesianChart object,

<Chart:RadCartesianChart x:Name="sales"
                         ClipToBounds="False"
                         Height="200"
                         Width="200"
                         Margin="50">
 

You can add one or more behaviors as well. For example, I like the TrackBall behavior that allows you to “roll over” points in the chart and see additional information, such as the exact value,

<Chart:RadCartesianChart.Behaviors>    <Chart:ChartTrackBallBehavior ShowInfo="True"                                    InfoMode="Multiple" />
</Chart:RadCartesianChart.Behaviors>
 

Set the VerticalAxis to take a LinearAxis (that is, your values)

<Chart:RadCartesianChart.VerticalAxis>
   <Chart:LinearAxis />
</Chart:RadCartesianChart.VerticalAxis>

Set the Horizontal axis to take a Categorical Axis (your products)

<Chart:RadCartesianChart.HorizontalAxis>    <Chart:CategoricalAxis />
</Chart:RadCartesianChart.HorizontalAxis>

Now you add your series. If you are building an Area chart, you add an AreaSeries, for a BarGraph a BarSeries, and for a LineGraph a LineSeries,

<Chart:AreaSeries ItemsSource="{Binding}">
   <Chart:AreaSeries.CategoryBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Product" />
   </Chart:AreaSeries.CategoryBinding>
   <Chart:AreaSeries.ValueBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Sales" />
   </Chart:AreaSeries.ValueBinding>
</Chart:AreaSeries>

Notice that we add PropertyNamePointBinding properties for the Product and Sales properties, binding appropriately.

That’s it.  If you want to change this to a BarSeries, replace every AreaSeries with BarSeries, above, e.g.,

<Chart:BarSeries ItemsSource="{Binding}" PaletteMode="DataPoint">
   <Chart:BarSeries.CategoryBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Product" />
   </Chart:BarSeries.CategoryBinding>
   <Chart:BarSeries.ValueBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Sales" />
   </Chart:BarSeries.ValueBinding>
</Chart:BarSeries>
 

You can do this for any of the RadCartesianCharts.