WinRT app guide: Step 13: Adding a horizontal chart and custom pallets for the charts

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

[sourcecode language=“XML”]
<Chart:ChartPalette x:Key=“OurPalette”>
Chart:ChartPalette.FillEntries
Chart:PaletteEntryCollection

</Chart:PaletteEntryCollection>
</Chart:ChartPalette.FillEntries>
</Chart:ChartPalette>
[/sourcecode]

To define a horizontal barchart add this as a third FlipViewItem
[sourcecode language=“XML”]

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

[/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!

WinRT app guide: Step 13: Adding a horizontal chart and custom pallets for the charts

Comments