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; }
             storeRevenues = value;
     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.

            Value="Yellow" />

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

    Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid Name="xStoreRevenue"

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

    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,


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,

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

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),

        ItemsSource="{Binding StoreRevenues}">

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


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


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


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 are disabled in preview mode.