Telerik blogs

In this post, I will explore creating a line chart using the RadCartesianChart from the Telerik Windows 8 UI Controls.  You can Download Telerik Widows 8 Controls here.

Figure 1 shows the chart we wish to build. This is a linear chart built with a RadCartesianChart. It represents revenue for the last six months of 2012,

image

The best way to approach building a line chart (or any chart) is to start with the data you wish to display. In this case, we will use mock data representing Monthly Revenue earned from July through December 2012. The class that will hold our data is MonthRevenue.cs,

public class MonthRevenue
{
    public DateTime Date { get; set; }
    public double Amount { get; set; }
}

The chart itself will be bound using a ViewModel class (as part of the Model/View/ViewModel architecture). The VM in this case is fairly straight forward except that it must also do the work of generating our “dummy” data,

public class MainViewModel : INotifyPropertyChanged
{
    public MainViewModel()
    {
        LoadData();
    }
 
    private void LoadData()
    {
        var myRevenues = new List<MonthRevenue>();
        myRevenues.Add( new MonthRevenue()
              { Amount = 20, Date = new DateTime( 2012, 7, 10 ) } );
        myRevenues.Add( new MonthRevenue()
              { Amount = 10, Date = new DateTime( 2012, 8, 10 ) } );
        myRevenues.Add( new MonthRevenue()
              { Amount = 30, Date = new DateTime( 2012, 9, 10 ) } );
        myRevenues.Add( new MonthRevenue()
              { Amount = 20, Date = new DateTime( 2012, 10, 10 ) } );
        myRevenues.Add( new MonthRevenue()
              { Amount = 40, Date = new DateTime( 2012, 11, 10 ) } );
        myRevenues.Add( new MonthRevenue()
              { Amount = 10, Date = new DateTime( 2012, 12, 10 ) } );
        Revenues = myRevenues;
    }
 
    private List<MonthRevenue> revenues;
    public List<MonthRevenue> Revenues
    {
        get { return revenues; }
        set
        {
            revenues = value;
            OnPropertyChanged();
        }
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(
               [CallerMemberName] string caller = "" )
    {
        if ( PropertyChanged != null )
        {
            PropertyChanged( this, new PropertyChangedEventArgs( caller ) );
        }
    }
 
}

Notice that each entry in the myRevenues collection is of type MonthRevenue, and thus has an amount and a Date (the DateTime is created in the order year, month, date).

With the data ready, we can now create our chart.

Open the References and add a check box next to RadControlsForMetro,

Reference Manager

Next, open MainPage.xaml and add a using statement for the Telerik controls

 
xmlns:telerik="using:Telerik.UI.Xaml.Controls"

We’ll be using a style to set the labels both on the x and y axis (as seen in the figure above) so let’s create that as a resource,

<Page.Resources>
     <Style
         x:Key="LabelStyle"
         TargetType="TextBlock">
         <Setter
             Property="FontSize"
             Value="30"></Setter>
         <Setter
             Property="Foreground"
             Value="Yellow"></Setter>
     </Style>
 </Page.Resources>

We’re now ready to add our chart to the Grid,

<Grid
    Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <telerik:RadCartesianChart
        Name="xRadChart">

Within the chart we’ll declare a Grid, and within that we’ll set that we want our Major Lines to be visible,

<telerik:RadCartesianChart.Grid>
    <telerik:CartesianChartGrid
        MajorLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>

Next, we’ll set the Horizontal and vertical axes. The HorizontalAxis is slightly more complicated because not only do we want it to be categorical, but we want a special type of Categorical axis, we want a DateTime that is going to mark the months,

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:DateTimeCategoricalAxis
        DateTimeComponent="Month"
        LabelFormat="{}{0,0:MMM}"
        LabelStyle="{StaticResource LabelStyle}" />
 </telerik:RadCartesianChart.HorizontalAxis>

The vertical axis is more straightforward but note that it uses the same labelstyle.

<telerik:RadCartesianChart.VerticalAxis>
    <telerik:LinearAxis  LabelStyle="{StaticResource LabelStyle}"/>
</telerik:RadCartesianChart.VerticalAxis>

We’re now ready to add the Line series, binding its value to the Revenues property of our VM. We need to specify the Value and the Category binding so that the chart knows which data to retrieve for each axis.

<telerik:LineSeries
     ItemsSource="{Binding Revenues}">
     <telerik:LineSeries.ValueBinding>
         <telerik:PropertyNameDataPointBinding
             PropertyName="Amount" />
     </telerik:LineSeries.ValueBinding>
     <telerik:LineSeries.CategoryBinding>
         <telerik:PropertyNameDataPointBinding
             PropertyName="Date" />
     </telerik:LineSeries.CategoryBinding>
 </telerik:LineSeries>

There are a number of ways to set the VM as the DataContext for the chart, we’ll do so in the OnNavigatedTo event handler in the code behind,

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
     xRadChart.DataContext =new MainViewModel();
 }

That’s it, you now have a fully functioning chart displaying revenues over months.

Source code for this example can be found here.


jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Comments

Comments are disabled in preview mode.