Oct 182012
 
 October 18, 2012  Posted by at 8:54 pm Telerik, WinRT Tagged with: ,  Add comments

To read the other steps in the step by step guide for creating a Metr0/ WInRT application go here

The charts are more or less the selling point of the app, so we should add more of them. It would be pretty cool to be able to compare estimated time with actual time, as a programmer I know how hard I is to estimate and I would find it quite valuable to see how accurate I am- as well as being able to plan ahead. We are still using the RadControls for Windows 8 by Telerik, have a look at earlier steps fo this giúid how to add them- it’s pretty easy.
So we won’t clutter up our view even more we will define up the chart palettes in the resource dictionary like so:

Adding a horizontal chart and custom pallets for the charts

Adding a horizontal chart and custom pallets for the charts

[sourcecode language=”XML”]
<Chart:ChartPalette x:Key="OurPalette">
<Chart:ChartPalette.FillEntries>
<Chart:PaletteEntryCollection>
<SolidColorBrush Color="#8D0E6B"></SolidColorBrush>
<SolidColorBrush Color="#CDAD0A"></SolidColorBrush>
<SolidColorBrush Color="#008080"></SolidColorBrush>
</Chart:PaletteEntryCollection>
</Chart:ChartPalette.FillEntries>
</Chart:ChartPalette>
[/sourcecode]

To define a horizontal barchart add this as a third FlipViewItem
[sourcecode language=”XML”]
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Border Padding="20">
<Chart:RadCartesianChart x:Name="horizontalChart" Palette="{StaticResource OurPalette}">
<Chart:RadCartesianChart.HorizontalAxis>
<Chart:LinearAxis/>
</Chart:RadCartesianChart.HorizontalAxis>
<Chart:RadCartesianChart.VerticalAxis>
<Chart:CategoricalAxis/>
</Chart:RadCartesianChart.VerticalAxis>
<Chart:BarSeries CombineMode="Cluster" ItemsSource="{Binding AllEntries}">
<Chart:BarSeries.ValueBinding>
<Chart:PropertyNameDataPointBinding PropertyName="TimeSpent"/>
</Chart:BarSeries.ValueBinding>
<Chart:BarSeries.CategoryBinding>
<Chart:PropertyNameDataPointBinding PropertyName="Title"/>
</Chart:BarSeries.CategoryBinding>
</Chart:BarSeries>
<Chart:BarSeries CombineMode="Cluster" ItemsSource="{Binding AllEntries}">
<Chart:BarSeries.ValueBinding>
<Chart:PropertyNameDataPointBinding PropertyName="TimeEstimate"/>
</Chart:BarSeries.ValueBinding>
<Chart:BarSeries.CategoryBinding>
<Chart:PropertyNameDataPointBinding PropertyName="Title"/>
</Chart:BarSeries.CategoryBinding>
</Chart:BarSeries>
</Chart:RadCartesianChart>
</Border>
<Border VerticalAlignment="Center" Grid.Row="1">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Border Width="10" Height="10" Background="#8D0E6B"/>
<TextBlock Text="Actual Time" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Border Width="10" Height="10" Background="#CDAD0A"/>
<TextBlock Text="Estimated Time" Margin="10,10,0,0"/>
</StackPanel>
<TextBlock Text="Actual and estimated time" Style="{StaticResource SubheaderTextStyle}" Padding="15,20"/>
</StackPanel>
</Border>
</Grid>
</FlipViewItem>
[/sourcecode]
Set the custompalette style to all the charts, and remove the inline styles set earlier.
To wire up the data for the horizontalbarchart add this to the code behind:
[sourcecode language=”XML”]
private async Task SetStatsDataEntries()
{
var list = await _studyActivityRepository.GetAllAsync();

var sumScores = new ObservableCollection<DataPoint>
{
new DataPoint()
{Label = "Importance",Value = list.Sum(x => x.ImportanceScore)},
new DataPoint()
{Label = "Urgency", Value = list.Sum(x => x.UrgencyScore)},
new DataPoint()
{Label = "Worth", Value = list.Sum(x => x.WorthScore)}
};
ScoresSummary = sumScores;
AllEntries = new ObservableCollection<StudyActivity>(list.Take(20));
}
[/sourcecode]

Notice that there is a new property Which is an observablecollection with a new class we have called DataPoint. Add that class, with two properties (label and value) to the model folder.
Next time we will implement snapped and filled view, and set some orientation restrictions!

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 6 + 11 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)