Telerik blogs

To get started working with any control, I find it useful to begin with a fresh project.  So below you will see that I have very simple XAML for my WPF application which adds a RadChart to the form.  In this post, I want to demonstrate the basic setup and binding of data to the RadChart.

<Window x:Class="CreateABasicChart.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="484" Width="750" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">  
    <Grid> 
        <telerik:RadChart Margin="10,10,12,12" Name="radChart1" /> 
    </Grid> 
</Window>  

image

The RadChart is broken down into two distinct sections.  The large gray section that says "No Data Series" is where the chart information itself will be displayed.  The Legend section is, as it states, where the legend information resides.  We need to provide some data to the chart for it to be useful so I have used LINQ to SQL to work with the Northwind database.  A DataSeries is the information that the chart is displaying and each series will be listed in the Legend area.

image

This example will display a chart with the Order Quantity and the Units in Stock for specific products using LINQ to SQL below.

using (var data = new NorthwindDataContext())  
{  
    radChart1.ItemsSource = (from p in data.Products  
                            from o in data.Order_Details   
                            where o.ProductID == p.ProductID   
                            && p.UnitsInStock < o.Quantity  
                            && p.UnitsInStock > 0  
                             select new { o.Quantity, p.UnitsInStock }).Take(10);  

The ItemsSource property provides a very flexible model for binding data to the RadChart.  In this instance, I am rsetting ItemsSource to an IEnumerable of anonymous types.

image

Voila! We now have a basic 2D chart, the default RadChart type.  Note that the Order Quantity and Units In Stock were identified as separate data series.  The Legend displays the name of each series as "Series 0" and "Series 1".  The Chart area breaks down the information into the chart display.  The chart type can be changed using the DefaultSeriesDefinition property.  There are over 30 different chart variations to choose from out of the box.  The next step is to provide some information in both the legend and the RadChart so the user understands what the data represents.

radChart1.DefaultView.ChartTitle.Content = "Out of Stock Orders";  
radChart1.DefaultView.ChartArea.AxisY.Title = "Number of Units";  
radChart1.DefaultView.ChartArea.AxisX.Title = "Products";   
 
radChart1.DefaultView.ChartArea.DataSeries[0].Label = "Order Quantity";  
radChart1.DefaultView.ChartArea.DataSeries[1].Label = "Units in Stock";   
 

image

So with minimal effort we have a chart that displays the information with crisp and clean visuals and minimal code.  One last item I would like to mention is that ability to set the Chart Type for each data series.  Below you will note that by simply changing the Defintion for each series in the RadChart, I can switch from 2D to 3D. 

foreach (var series in radChart1.DefaultView.ChartArea.DataSeries)  
{  
    series.Definition = new Telerik.Windows.Controls.Charting.Bar3DSeriesDefinition();  

image 

And there you have it, a quick way to get a RadChart up and running in your WPF applications.


Comments

Comments are disabled in preview mode.