In this article I have three main goals:
Motivation:
In the last days I have been working in my My Snake App ( and more I have to do…. 
the last version is now in certification process, soon will be out!)
I decide to create a chart for show at the end some results about the game.
Here is the screen:
My goal was to show: the score and how many flowers by color the snake got.
Now, I’m writing this article to share that I did for get this!
Let’s start!
First, I recommend to get the trial version here, and after install it in your pc.
Now I hope you are ready, let’s create the following projects:
- Telerik.RadCartesianChartSample.Common : this is a portable class library that contains the model and view model. I want to reuse code between Windows 8 and Windows Phone, reason because I decide to do this!
- Telerik.RadCartesianChartSample(WinRT): this is the main project that represent the Windows 8 Sample.
Note: PCL is not always the best solution, but for this propose is. For example in my My Snake App I did not used PCL because I have dependences from UI that I can not separate and for this reason I decide to use directives (#if WP …. #else … #endif or #if Win8 …. #else … #endif ) and add files that I do “As Linked”.
For the Telerik.RadCartesianChartSample(WinRT) I created a Blank Project:
Note: I changed the namespace for Telerik.RadCartesianChartSample because if I need to share code between other platform is more easy to manage the namespaces.
Then I created the Telerik.RadCartesianChartSample.Common
Now in the Telerik.RadCartesianChartSample(WinRT) project add the reference. Click in Reference Manager > Windows >Extensions > Select RadControls for Windows 8
Now in Telerik.RadCartesianChartSample.Common project, create the
- BoardItem : represent one item in dashboard. This class has name, value and count ( in My Snake App I have one boarditem by flower that I have in the game).
- DashboardViewModel: this is my view model that will connect the model to the view.
Here is the class diagram that is the best thing to understand my model and view model.
In the DashboardViewModel constructor I will call a Init method, that will create my list of the DashboardItems, in my sample only 3. Because this is a sample, for generate data I will use a random values for the Count property in each BoardItem.
Here is:
DashBoardItems = new ObservableCollection<BoardItem>
{
new BoardItem{
Name = "Blue",
Value = 1,
Count = _random.Next(0,50)
},
new BoardItem {
Name = "Pink",
Value = 2,
Count = _random.Next(20,100)
},
new BoardItem {
Name = "Yellow",
Value = 3,
Count = _random.Next(0,100)
}
};
Note: My class implement the NotifyPropertyChanged class the is the implementation of the INotifyPropertyChanged interface. This is important for update the UI when some property is changed.
______
In the Telerik.RadCartesianChartSample(WinRT) we have the MainPage.xaml.cs where you will add the view model, here is:
public MainPage()
{
InitializeComponent();
DataContext = new DashboardViewModel();
}
And inside the MainPage.xaml create a grid layout that represent the root element in the page (If you want you can create columns and rows for define the header with the title, you choose!)
Inside the grid create the RadCartesianChart, something like:
<chart:RadCartesianChart PaletteName="DefaultDark">
</chart:RadCartesianChart>
Here you add the PaletteName that is a property that gets or sets the PaletteName value used to apply a predefined pallete to the chart.
There are 4 points that we need to define:
- RadCartesianChart.Grid : Gets or sets the CartesianChartGrid used to decorate the chart plot area with major/minor grid and strip lines.
- RadCartesianChart.VerticalAxis : Gets or sets the visual Axis instance that will be used to plot points along the vertical (Y) axis.
- RadCartesianChart.HorizontalAxis: Gets or sets the visual Axis instance that will be used to plot points along the horizontal (X) axis.
- BarSeries : is the value that will add to the RadCartesianChart.Series: Gets the collection containing all the series presented by this instance.
Defining the RadCartesianChart.Grid
<chart:RadCartesianChart.Grid>
<chart:CartesianChartGrid MajorLinesVisibility="Y">
<chart:CartesianChartGrid.MajorYLineStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
<Setter Property="StrokeDashArray" Value="4, 2" />
</Style>
</chart:CartesianChartGrid.MajorYLineStyle>
</chart:CartesianChartGrid>
</chart:RadCartesianChart.Grid>
Defining the RadCartesianChart.VerticalAxis
<chart:RadCartesianChart.VerticalAxis>
<chart:LinearAxis Title="Number of flowers" FontSize="18" MajorStep="{Binding MajorStep}">
<chart:LinearAxis.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="18" Foreground="Black" Margin="0,0,0,20"/>
</DataTemplate>
</chart:LinearAxis.TitleTemplate>
<chart:LinearAxis.LineStyle>
<Style TargetType="Line">
<Setter Property="Stroke"
Value="{StaticResource ChartColorKey}" />
</Style>
</chart:LinearAxis.LineStyle>
<chart:LinearAxis.LabelStyle>
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="{StaticResource ChartColorKey}" />
<Setter Property="FontSize"
Value="14"></Setter>
</Style>
</chart:LinearAxis.LabelStyle>
<chart:LinearAxis.MajorTickStyle>
<Style TargetType="Rectangle">
<Setter Property="Stroke"
Value="{StaticResource ChartColorKey}" />
</Style>
</chart:LinearAxis.MajorTickStyle>
</chart:LinearAxis>
</chart:RadCartesianChart.VerticalAxis>
Here there is a point that I want to referer:
MajorStep="{Binding MajorStep}"
In my viewmodel I have a MajorStep Property:
public int MajorStep
{
get
{
if (DashBoardItems.Any(item => item.Count < 10))
{
return 1;
}
if (DashBoardItems.Any(item => item.Count > 50))
{
return 5;
}
return 2;
}
}
I did this because I want to define dinamically the step for the chart, because in My Snake App the user can get a lot of flowers or not and when I have values like 100 I don´t have step with value 1 or in values like 8 I don´t have steps with value 5.
Defining the RadCartesianChart.HorizontalAxis
<chart:RadCartesianChart.HorizontalAxis>
<chart:CategoricalAxis Title="Flowers" FontSize="18">
<chart:CategoricalAxis.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
FontSize="18" Foreground="Black" />
</DataTemplate>
</chart:CategoricalAxis.TitleTemplate>
<chart:CategoricalAxis.LineStyle>
<Style TargetType="Line">
<Setter Property="Stroke"
Value="{StaticResource ChartColorKey}" />
</Style>
</chart:CategoricalAxis.LineStyle>
<chart:CategoricalAxis.LabelStyle>
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="{StaticResource ChartColorKey}" />
<Setter Property="FontSize"
Value="14"></Setter>
</Style>
</chart:CategoricalAxis.LabelStyle>
<chart:CategoricalAxis.MajorTickStyle>
<Style TargetType="Rectangle">
<Setter Property="Stroke"
Value="{StaticResource ChartColorKey}" />
</Style>
</chart:CategoricalAxis.MajorTickStyle>
</chart:CategoricalAxis>
</chart:RadCartesianChart.HorizontalAxis>
Defining BarSeries:
<chart:BarSeries ItemsSource="{Binding DashBoardItems}">
<chart:BarSeries.PointTemplates>
<DataTemplate>
<Rectangle Fill="LightBlue"/>
</DataTemplate>
<DataTemplate>
<Rectangle Fill="Pink"/>
</DataTemplate>
<DataTemplate>
<Rectangle Fill="Yellow"/>
</DataTemplate>
</chart:BarSeries.PointTemplates>
<chart:BarSeries.CategoryBinding>
<chart:PropertyNameDataPointBinding
PropertyName="Name" />
</chart:BarSeries.CategoryBinding>
<chart:BarSeries.ValueBinding>
<chart:PropertyNameDataPointBinding
PropertyName="Count" />
</chart:BarSeries.ValueBinding>
</chart:BarSeries>
Here, in BarSeries, I defined the ItemsSource that is the DashBoardItems that I defined in View Model:
ItemsSource="{Binding DashBoardItems}"
Is this that make the chart to be filled ( but don´t forget the others configuration!!).
For define which properties will used (from BoardItem) I defined the:
<chart:PropertyNameDataPointBinding PropertyName="Name" />
and
<chart:PropertyNameDataPointBinding PropertyName="Count" />
Oh, another little thing, for each i choosed: CategoricalAxis and Linear Axis.
Because I want each board item with different colors I defined
<chart:BarSeries.PointTemplates>
<DataTemplate>
<Rectangle Fill="LightBlue"/>
</DataTemplate>
<DataTemplate>
<Rectangle Fill="Pink"/>
</DataTemplate>
<DataTemplate>
<Rectangle Fill="Yellow"/>
</DataTemplate>
</chart:BarSeries.PointTemplates>
And the result of the this is:
Conclusion:
There are many ways to show a chart, this is only one way, a simple sample that was my experience with RadCartesianChart from Telerik RadControls From Windows 8.
You can get the Telerik.RadCartesianChartSample from here:
http://github.com/saramgsilva/MyTelerikSample
Some important references that I recommend:
