Telerik UI for Windows Phone by Progress

In this help article we are going to create a chart from scratch using the chart related classes in the Telerik UI for Windows Phone control suite. The first thing we need to do is to add a reference to the chart assembly. It is called Telerik.Windows.Controls.Chart.dll. After adding the reference we will need two namespaces. These are Telerik.Windows.Controls, as usual and Telerik.Charting. The Telerik.Charting namespace is the namespace in which the chart engine resides and it will be required for creating a few objects like the chart data points (among others) when we manually populate the chart with data. The namespace declarations look like this:

CopyXAML
xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"

With the reference and namespaces in place, we now have to declare our chart which is represented by a concrete class named RadCartesianChart. It is in the Telerik.Windows.Controls namespace. Here is the XAML declaration:

CopyXAML
<chart:RadCartesianChart x:Name="chart"/>

The next thing that needs to be done is to define the chart’s axes. We need to set a horizontal axis and a vertical axis. They can differ from each other. For example the horizontal axis might be a plain numerical axis while the vertical axis can be logarithmic or some other fancy type. Here is how we define the axes:

CopyXAML
<chart:RadCartesianChart x:Name="chart">
    <chart:RadCartesianChart.HorizontalAxis>
        <chart:CategoricalAxis/>
    </chart:RadCartesianChart.HorizontalAxis>
    <chart:RadCartesianChart.VerticalAxis>
        <chart:LinearAxis Maximum="100"/>
    </chart:RadCartesianChart.VerticalAxis>
</chart:RadCartesianChart>

Now we have a chart with two axes but no data. In order to visualize data we will need to have some visualization for it. The presentation of the data itself is achieved by declaring chart series inside our chart and filling these series with data points. Each chart series visualizes its data point collection in a different way. RadChart supports a few series out of the box the simplest of which is the line series. Here is how we define the line series:

CopyXAML
<chart:RadCartesianChart x:Name="chart">
   <chart:RadCartesianChart.HorizontalAxis>
       <chart:CategoricalAxis/>
   </chart:RadCartesianChart.HorizontalAxis>

   <chart:RadCartesianChart.VerticalAxis>
      <chart:LinearAxis Maximum="100"/>
   </chart:RadCartesianChart.VerticalAxis>

   <chart:RadCartesianChart.Series>
      <chart:LineSeries Stroke="Orange" StrokeThickness="2">
   </chart:RadCartesianChart.Series>

</chart:RadCartesianChart>

Now with this XAML things don’t look exactly right. There is nothing on screen. This is normal, we have not filled the series with data points yet. Here is how we can fill the series with data points:

CopyXAML
<chart:RadCartesianChart x:Name="chart">
   <chart:RadCartesianChart.HorizontalAxis>
       <chart:CategoricalAxis/>
   </chart:RadCartesianChart.HorizontalAxis>

<chart:RadCartesianChart.VerticalAxis>
       <chart:LinearAxis Maximum="100"/>
   </chart:RadCartesianChart.VerticalAxis>

  
<chart:RadCartesianChart.Series>
       <chart:LineSeries Stroke="Orange" StrokeThickness="2">

          <chart:LineSeries.DataPoints>
              <chartEngine:CategoricalDataPoint Value="20"/>
              <chartEngine:CategoricalDataPoint Value="40"/>
              <chartEngine:CategoricalDataPoint Value="35"/>
              <chartEngine:CategoricalDataPoint Value="40"/>
              <chartEngine:CategoricalDataPoint Value="30"/>
              <chartEngine:CategoricalDataPoint Value="50"/>
          </chart:LineSeries.DataPoints>
       </chart:LineSeries>
   </chart:RadCartesianChart.Series>

</chart:RadCartesianChart>

Filling the chart manually is hardly ever a feasible approach however, there should be a way to fill the chart with data in an automatic way and such a way there is. RadChart supports data binding out of the box and it works simply by assigning a value to the ItemsSource property of the series. The data source must at least support the IEnumerable interface and if it is an observable collection, the chart will update in real-time as the data in the collection changes. Let’s see how we can bind the chart to a simple data source:

CopyC#
this.chart.Series[0].ItemsSource = new double[] { 20, 30, 50, 10, 60, 40, 20, 80 };
CopyVB.NET
Dim dataSource(8) As Double
dataSource(0) = 20
dataSource(1) = 30
dataSource(2) = 50
dataSource(3) = 10
dataSource(4) = 60
dataSource(5) = 40
dataSource(6) = 20
dataSource(7) = 80
series.ItemsSource = dataSource

This is all there is to it. To summarize, we need a chart object with axes specifically chosen to provide an intuitive coordinate system. Then we add a series object to visualize our set of data points and finally we fill the series with data. The result of this XAML should look like this:

radchart-gettingstarted-screenshot