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.
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