This is part 3 from an article on Telerik XAML Q3'11 Beta, authored by Michael Crump and Evan Hutnick. Part 1 | Part 2
SilverlightShow will occasionally publish content related to 3rd party Silverlight and Windows Phone products, following interest and article topic requests received through our surveys and feedback email (editorial at silverlightshow dot net).
In this third and last installment of Telerik XAML Q3’11 Beta—A Walkthrough we discuss RadChartView. If you read Parts 1 and 2, you’ll know that in the upcoming mid-November release, in addition to RadBarCode and RadVirtualizingWrapPanel, our XAML team here at Telerik is including an exciting and brand-new control: RadChartView. If you haven’t read Parts 1 and 2, you should. All good news aside, we recommend you download the beta so you make the most of this and the other two articles.
Introducing RadChartView
For anyone who has read the XAML Beta announcement or been working with the RadControls for Windows Phone, the look and feel of RadChartView may seem a bit familiar… because it is! Our Data Visualization and Windows Phone teams have collaborated to create a charting engine that is 100% view-agnostic, meaning it powers RadChart for Windows Phone, the new RadChartView, and is the base of our proof-of-concept RadChart for WinRT. The end result is a fast, versatile, and highly optimized charting solution that works across platforms and lives up to the Telerik XAML standard of maintaining the same code-base and API while providing powerful cross-platform charting. Read on as we dive into the new RadChartView Beta and explore some of the functionality that we have available today.
You can also check out the RadChartView demos here.
Getting Started
Before we actually get to the good stuff, there are just a few preliminary steps to properly set things up—we’ll be into code soon enough, don’t worry!
First, make sure you download the RadControls for Silverlight Q3 Beta trial to gain access to the new RadChartView. Once it is installed, open up Visual Studio 2010 and create a new Silverlight project. With your new project loaded, add the following assemblies from your installed directory for the Telerik Silverlight tools:
- Telerik.Windows.Controls
- Telerik.Windows.Controls.Chart
- Telerik.Windows.Data
Finally, add the Telerik namespace:
1: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
As well as a few rows and columns in our default LayoutRoot grid:
1: <Grid x:Name="LayoutRoot"
2: Background="White">
3: <Grid.RowDefinitions>
4: <RowDefinition />
5: <RowDefinition />
6: </Grid.RowDefinitions>
7: <Grid.ColumnDefinitions>
8: <ColumnDefinition />
9: <ColumnDefinition />
10: </Grid.ColumnDefinitions>
Now… let’s get started. 
Setting the Bar
The “Hello World” of any charting solution is creating a bar chart. This is one of the standard types of charts used across every industry and vertical to show data. So, if a chart can accomplish it with ease we’re off to a good start. Assuming you may be familiar with the previous RadChart from our Silverlight and WPF suites, we are going to walk through the steps to set up a simple bar chart and explain along the way the architecture behind ChartView.
The first step is to define a RadCartesianChart – a new term for anyone familiar with the previous RadChart. One of the issues that we ran into with RadChart is that when we tried to continue adding functionality to an existing solution, it became obvious that it’s not something that scales well. We need to add more advanced functionality or functionality based on a particular scenario. RadChartView takes a different approach and instead works on an opt-in model for including different functionality. This also means we can separate out different charting scenarios to ensure our code is as clean and optimized for each type of chart as possible. Anytime you’re working with a standard X-Y axis, you’ll use RadCartesianChart:
1: <telerik:RadCartesianChart x:Name="xRadCartesianChart">
2:
3: </telerik:RadCartesianChart>
Of course, before we go any further we’ll need a bit of data to display in our charts. Rather than explain in fine-grained detail how I’m putting together sample data, here’s a quick copy-and-pasteable chunk of code you can use to create a collection of five ObservableCollections of our SampleChartDataItem:
1: public partial class MainPage : UserControl
2: {
3: public ObservableCollection<ObservableCollection<SampleChartDataItem>> chartData { get; set; }
4:
5: public MainPage()
6: {
7: InitializeComponent();
8:
9: this.DataContext = this;
10:
11: this.Loaded += new RoutedEventHandler(MainPage_Loaded);
12: }
13:
14: void MainPage_Loaded(object sender, RoutedEventArgs e)
15: {
16: Random rnd = new Random();
17:
18: chartData = new ObservableCollection<ObservableCollection<SampleChartDataItem>>();
19:
20: for (int y = 0; y < 5; y++)
21: {
22: var tempCollection = new ObservableCollection<SampleChartDataItem>();
23:
24: for (int i = 0; i < 20; i++)
25: {
26: tempCollection.Add(new SampleChartDataItem()
27: {
28: id = i,
29: value1 = rnd.NextDouble() * 20,
30: value2 = rnd.NextDouble() * 40 * (i % 2 == 0 ? 1 : -1),
31: angle = i * 18,
32: dtvalue = DateTime.Today.AddDays(i)
33: });
34: }
35:
36: chartData.Add(tempCollection);
37: }
38: }
39: }
40:
41: public class SampleChartDataItem
42: {
43: public int id { get; set; }
44: public double value1 { get; set; }
45: public double value2 { get; set; }
46: public double angle { get; set; }
47: public DateTime dtvalue { get; set; }
48:
49: public SampleChartDataItem()
50: {
51:
52: }
53: }
With that out of the way, we can now turn that data into something visible...
Working with a bar series is relatively easy – the three main things we need to work with are ValueBinding, CategoryBinding, and ItemsSource. In most scenarios consider ValueBinding as your Y-Axis and CategoryBinding as your X-Axis, so here we’ll use value1 for Y and id for X, along with the first collection in chartData to populate some data:
1: <telerik:BarSeries ValueBinding="value1"
2: CategoryBinding="id"
3: ItemsSource="{Binding chartData[0]}" />
Before running it, however, we need to define the Axis being used. As I previously mentioned, RadChart assumes nothing and allows you to use the exact pieces you need for displaying data. Since I am using categorical data (id) and value-based data that works on a linear scale (value1), I can use a LinearAxis for Y and a CategoricalAxis for X:
1: <telerik:RadCartesianChart.HorizontalAxis>
2: <telerik:CategoricalAxis />
3: </telerik:RadCartesianChart.HorizontalAxis>
4: <telerik:RadCartesianChart.VerticalAxis>
5: <telerik:LinearAxis />
6: </telerik:RadCartesianChart.VerticalAxis>
Now we can run our application and see the following:
If we wanted to add another series, we could simply copy and paste our first bar series declaration and instead use chartData[1] to view different data, switching to value2 instead of value1. Before running though, go ahead and modify your Cartesian Chart declaration to look like so:
1: <telerik:RadCartesianChart x:Name="xRadCartesianChart"
2: Palette="Metro">
This will allow RadChartView to assign colors based on the current palette; otherwise both series would look the same. Now running will produce the following:
Much nicer! But, of course, now that we are showing a few different types of data it would be ideal if we could display axis and grid lines to make this a bit easier on our eyes. We accomplish this detail by using the Cartesian Chart Grid, containing all the settings for axis display within the charting surface. In our case, we’ll set the MajorLinesVisibility to XY, MajorXLineDashArray to ‘2 0’, MajorXLinesRenderMode to Inner, and StripLinesVisibility to XY. In code this looks something like the following:
1: <telerik:RadCartesianChart.Grid>
2: <telerik:CartesianChartGrid MajorLinesVisibility="XY"
3: MajorXLineDashArray="2 0"
4: MajorXLinesRenderMode="Inner"
5: StripLinesVisibility="XY" />
6: </telerik:RadCartesianChart.Grid>
With our newly set grid, we can see the chart as follows – a much better representation that is fully customized to meet our requirements without unnecessary extras, thus ensuring high performance:
Now that is a sweet-looking chart. >Get the full code here.
Feeling a bit Scattered?
Don’t worry—it’s about this easy to do everything with RadChartView. Take, for example, a ScatterPoint chart in the new format. As it turns out, courtesy of our previous exercise, we have a bit of code that we can re-use from our other RadCartesianChart. Give it a new name, change rows, remove the bar references, modify the horizontal axis, and you’ve got the basis for a new chart:
1: <telerik:RadCartesianChart x:Name="xRadChart2"
2: Grid.Row="1"
3: Palette="Metro">
4: <telerik:RadCartesianChart.HorizontalAxis>
5: <telerik:LinearAxis />
6: </telerik:RadCartesianChart.HorizontalAxis>
7: <telerik:RadCartesianChart.VerticalAxis>
8: <telerik:LinearAxis />
9: </telerik:RadCartesianChart.VerticalAxis>
10: <telerik:RadCartesianChart.Grid>
11: <telerik:CartesianChartGrid MajorLinesVisibility="XY"
12: MajorXLineDashArray="2 0"
13: MajorXLinesRenderMode="Inner"
14: StripLinesVisibility="XY" />
15: </telerik:RadCartesianChart.Grid>
16: </telerik:RadCartesianChart>
To add a new ScatterPoint series, we add a new ScatterPointSeries and set out xValueBinding to value1, YValueBinding to value2, and itemssource to chartData[2]—see below:
1: <telerik:ScatterPointSeries XValueBinding="value1"
2: YValueBinding="value2"
3: ItemsSource="{Binding chartData[2]}">
4: <telerik:ScatterPointSeries.PointTemplate>
5: <DataTemplate>
6: <Ellipse Width="5"
7: Height="5"
8: Fill="Red" />
9: </DataTemplate>
10: </telerik:ScatterPointSeries.PointTemplate>
11: </telerik:ScatterPointSeries>
Going with the Cartesian Chart theme, the XValue runs along the horizontal axis while the YValue runs along the vertical axis. ItemsSource works as expected to supply the binding with data. Before we run it again, we’ll set a PointTemplate to make our ScatterPoint data really stand out. This will be a basic shape for right now, but since this is a DataTemplate we can always utilize bindings and converters to customize our chart.
Once this code is in place, you brand new Scatter Point chart will look something like the following:
Simple and easy!
Polar Chart, Anybody?
One chart type notoriously missing from the previous RadChart implementation was a Polar chart. Thankfully the architecture of RadChartView has solved that dilemma with RadPolarChart, an alternative to the Cartesian Chart that offers data displayed in a polar format.
To start, we’ll add a new RadPolarChart to our XAML with a few properties set:
1: <telerik:RadPolarChart x:Name="xPolarChart"
2: Grid.Column="1"
3: Grid.RowSpan="2"
4: Palette="Metro">
5: </telerik:RadPolarChart>
The next step is to define several series on our chart. For Polar charts we have PolarAreaSeries, PolarLineSeries, and PolarPointSeries, all of which take the same properties to display data – AngleBinding, ValueBinding, and of course ItemsSource. We also want to define a template for our PointSeries, this time my choice being a Rectangle. These series definitions are as follows:
1: <telerik:PolarAreaSeries ItemsSource="{Binding chartData[2]}"
2: AngleBinding="angle"
3: ValueBinding="value1" />
4: <telerik:PolarLineSeries ItemsSource="{Binding chartData[3]}"
5: AngleBinding="angle"
6: ValueBinding="value1" />
7: <telerik:PolarPointSeries ItemsSource="{Binding chartData[4]}"
8: AngleBinding="angle"
9: ValueBinding="value1">
10: <telerik:PolarPointSeries.PointTemplate>
11: <DataTemplate>
12: <Rectangle Width="10"
13: Height="10"
14: Fill="Orange" />
15: </DataTemplate>
16: </telerik:PolarPointSeries.PointTemplate>
17: </telerik:PolarPointSeries>
And of course, to give the data somewhere to display we will set our PolarAxis and RadialAxis:
1: <telerik:RadPolarChart.PolarAxis>
2: <telerik:PolarAxis />
3: </telerik:RadPolarChart.PolarAxis>
4: <telerik:RadPolarChart.RadialAxis>
5: <telerik:NumericRadialAxis />
6: </telerik:RadPolarChart.RadialAxis>
End result? A beautiful looking Polar chart with crisp, clean rendering:
Wrapping Up
Hopefully this walkthrough has helped you to understand and appreciate the new architecture behind RadChartView. Be sure to download the source code for this article and check out the RadControls for Silverlight and WPF Q3 2011 Beta release right now, if you haven’t already—let us know what you think! You can also look forward to more helpful walkthroughs covering what’s new in the Q3 2011 Telerik XAML releases so stay tuned!
If you enjoyed this article, you can find similar postings by XAML Evangelist, Evan Hutnick, on his Telerik blog.