Telerik UI for Windows 8 XAML

In this help article, we are going to create a chart from scratch using the chart-related classes in the Telerik UI for Windows Universal. The first thing we need to do is to add a reference to the needed assemblies. We need the following assemblies:

  • Telerik.Core.dll

  • Telerik.UI.Xaml.Primitives.dll

  • Telerik.UI.Xaml.Chart.dll

Alternatively, you can add reference to Telerik UI for Windows Universal SDK.

After adding the reference you will need to add the Telerik.UI.Xaml.Controls.Chart namespace:

XAML Copy imageCopy
xmlns:telerik="using:Telerik.UI.Xaml.Controls.Chart"

With the references and namespace in place, you are ready to declare your chart, which is represented by a concrete class. The following example demonstrates how to add RadCartesianChart to your application. Here is the XAML declaration:

XAML Copy imageCopy
<telerik:RadCartesianChart>
</telerik:RadCartesianChart>

Now there are two ways to proceed with the setup of the chart:

  • Setting all properties and behaviors of your chart from scratch.

  • With Galleries - you can choose the basic look of your chart from the gallery database and the XAML code will be automatially generated for you. Then you can edit it to customize the chart.

Both approaches will be described in the sections below.

Defining RadChart Example

Now we'll define a horizontal axis and a vertical axis. Specifying the proper axes depends on your data and how you want it visualized. For example, if we want to visualize categorical data using a categorical series like Bar or Area, the horizontal axis should be a categorical axis while the vertical axis should be logarithmic or linear. Here is how we define the axes:

XAML Copy imageCopy
<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>

Now we have a chart with two axes but no data. In order to visualize data we will need to add the desired chart series. The presentation of the data itself is achieved by declaring a chart series inside our chart and feeding these series with data. Each chart series visualizes its data point collection in a different way. RadChart supports large number of series out of the box, the simplest of which is the line series. Here is how we define the line series:

XAML Copy imageCopy
<telerik:RadCartesianChart x:Name="radChart">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:LineSeries ItemsSource="{Binding}">
    </telerik:LineSeries>
</telerik:RadCartesianChart>

In addition, we use the ItemsSource property of the series to bind the data to the DataContext of this series. Now that the series is specified, you'll see some randomly generated data. This data is generated only when the control is loaded at design time so that the user can have a visual clue how the series looks. When it comes to real data, 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 can be any valid IEnumerable instance 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:

C# Copy imageCopy
this.radChart.DataContext = new double[] { 20, 30, 50, 10, 60, 40, 20, 80 };

We are done. We have our simple line chart setup. To summarize, we used a Cartesian Chart object with the proper axes chosen - depending on the data you plan to display. We added the desired series object to visualize our data and finally we filled the series with data.

Working with Galleries

The Galleries provide very convenient way to generate charts in just a few seconds. They contain sample XAML definitions for all basic scenarios for all chart types. You just have to choose a chart from the samples and its XAML definition will be auto-generated in your code. When you have the base of the chart, you can easily change it's properties to fit in your model.

Here is a demo explaining how to work with Galleries.

After you have defined a chart in XAML, you can go to the Designer and select it - a button will appear in the top right corner. If you click on the button a menu with all chart types will appear:

Gallery 1

Each chart type contains several variations covering the most common scenarios. Now you can expand each chart type to see all available setups for this type.

Caution

When you select the desired chart, you will be asked if you wish to replace ALL existin XAML code in your current chart with the one defined in the gallery sample.

Gallery 2

Let's select the second sample from the Area Charts. If you click on the continue button this code will be auto-generated in XAML:

XAML Copy imageCopy
<telerik:RadCartesianChart PaletteName="DefaultDark">
    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid MajorLinesVisibility="Y"/>
    </telerik:RadCartesianChart.Grid>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:AreaSeries CombineMode="Stack">
        <Charting:CategoricalDataPoint Value="1.0"/>
        <Charting:CategoricalDataPoint Value="1.9"/>
        <Charting:CategoricalDataPoint Value="1.9"/>
        <Charting:CategoricalDataPoint Value="2.3"/>
        <Charting:CategoricalDataPoint Value="2.1"/>
    </telerik:AreaSeries>
    <telerik:AreaSeries CombineMode="Stack">
        <Charting:CategoricalDataPoint Value="1.0"/>
        <Charting:CategoricalDataPoint Value="1.0"/>
        <Charting:CategoricalDataPoint Value="1.0"/>
        <Charting:CategoricalDataPoint Value="1.0"/>
        <Charting:CategoricalDataPoint Value="1.0"/>
    </telerik:AreaSeries>
</telerik:RadCartesianChart>

And this is the result of the auto-generated code:

Gallery 3

Now you are free to edit!