In an earlier blog post I reviewed how to create a line chart using RadChart for RadBarChartMetro. 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.

MetroBeta


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.