Creating a Bar Chart with RadCartesianChart, part of Telerik Windows 8 UI Controls

In an earlier blog post I reviewed how to create a line chart using RadChart for Metro. In this blog post I will review how to create a bar chart, and no doubt you will notice some striking similarities.

All of this is done with the Telerik Windows 8 UI Controls.

We’ll begin with the data.  Our bar chart will compare revenues for five stores.

[ Click on the image to see full size ]

Our first class will define the StoreRevenue type and will have a static method to generate some sample data (normally, of course, you would get this data from a database or a webservice).

public class StoreRevenue
 {
     public string StoreName { get; set; }
     public double Amount { get; set; }

     public static ObservableCollection<StoreRevenue> GetStoreRevenue()
     {
         var revenues = new ObservableCollection<StoreRevenue>();
         revenues.Add( new StoreRevenue() { Amount = 20, StoreName = "Macy's" } );
         revenues.Add( new StoreRevenue() { Amount = 50, StoreName = "Gimbels's" } );
         revenues.Add( new StoreRevenue() { Amount = 10, StoreName = "A&S" } );
         revenues.Add( new StoreRevenue() { Amount = 40, StoreName = "E. J. Korvette" } );
         revenues.Add( new StoreRevenue() { Amount = 60, StoreName = "Crazy Eddie's" } );
         return revenues;
     }
 }

Our ViewModel class will serve as the datacontext for the bar chart,

class ViewModel : INotifyPropertyChanged
 {
     private ObservableCollection<StoreRevenue> storeRevenues;
     public ObservableCollection<StoreRevenue> StoreRevenues
     {
         get { return storeRevenues; }
         set
         {
             storeRevenues = value;
             NotifyPropertyChanged();
         }
     }

     private void NotifyPropertyChanged( [CallerMemberName] string caller = "" )
     {
         if ( PropertyChanged != null )
         {
             PropertyChanged( this, new PropertyChangedEventArgs( caller ) );
         }
     }

     public event PropertyChangedEventHandler PropertyChanged;
 }

In the code behind for MainPage.xaml we’ll set the datacontext and populate the StoreRevenues property of the VM,

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var vm = new ViewModel();
    vm.StoreRevenues = StoreRevenue.GetStoreRevenue();
    DataContext = vm;
}

We’re now ready to implement the bar chart. We begin by creating a resource for the label style.

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

We turn next to the Grid, where we’ll add an internal Grid with two columns and two rows,

<Grid
    Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid Name="xStoreRevenue"
        Grid.Column="2"
        Grid.Row="2">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="30"></RowDefinition>
            <RowDefinition
                Height="*"></RowDefinition>
        </Grid.RowDefinitions>

The first column in the first row holds a label for the chart,

<TextBlock
    Style="{StaticResource BaselineTextStyle}"
    Text="REVENUE by STORE ($thousand)"></TextBlock>

We’re now, finally, ready to add the RadCartesianChart.  We begin by setting the MajorLinesVisibility to display,

<telerik:RadCartesianChart
    Grid.Row="1"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid
            MajorLinesVisibility="Y"></telerik:CartesianChartGrid>
    </telerik:RadCartesianChart.Grid>

Next we’ll set the VerticalAxis, which will be a linear axis that will hold the values, and the horizontal axis which is a categorical axis to hold the store names,

<telerik:RadCartesianChart.VerticalAxis>
    <telerik:LinearAxis
        LabelStyle="{StaticResource LabelStyle}"></telerik:LinearAxis>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:CategoricalAxis
        LabelStyle="{StaticResource LabelStyle}"
        LabelFitMode="MultiLine"></telerik:CategoricalAxis>
</telerik:RadCartesianChart.HorizontalAxis>

We turn now to the Series, which will be a BarSeries, and thus a Bar chart. The first task is to set the ItemsSource to bind to the StoreRevenues property of the VM (shown above),

<telerik:RadCartesianChart.Series>
    <telerik:BarSeries
        ItemsSource="{Binding StoreRevenues}">

We set the value binding to bind to the property Amount,

<telerik:BarSeries.ValueBinding>
    <telerik:PropertyNameDataPointBinding
        PropertyName="Amount"></telerik:PropertyNameDataPointBinding>
</telerik:BarSeries.ValueBinding>

Similarly, we set the categorical binding to bind to the StoreName and that completes our series and the Chart itself.

             <telerik:BarSeries.CategoryBinding>
                 <telerik:PropertyNameDataPointBinding
                     PropertyName="StoreName"></telerik:PropertyNameDataPointBinding>
             </telerik:BarSeries.CategoryBinding>
         </telerik:BarSeries>
     </telerik:RadCartesianChart.Series>
 </telerik:RadCartesianChart>

That’s all there is to creating a bar chart with the RadCartesianChart, part of the RadControls For Metro.