One of the pieces of information that we’re gathering in Conference Buddy is whether or not the contact (that’s you) is interested in entering our raffle for the current conference. We’d like to display that information in a pie chart.
There are a number of ways of attacking this problem. We could work directly with the Contact object but that is pretty big. Another approach is to create a Raffle class that will carry the information of how many yes’s and how many no’s we’ve received. This class will have two properties: name (for yes or no) and count (for how many),
With this class in hand, I can query my collection of contacts and create two instances of Raffle,public
class
Raffle : INotifyPropertyChanged
{
private
string
_name;
public
string
name
{
get
{
return
_name;
}
set
{
_name = value;
OnPropertyChanged();
}
}
private
int
_count;
public
int
count
{
get
{
return
_count;
}
set
{
_count = value;
OnPropertyChanged();
}
}
public
event
PropertyChangedEventHandler PropertyChanged;
private
void
OnPropertyChanged(
[CallerMemberName]
string
caller =
""
)
{
if
( PropertyChanged !=
null
)
{
PropertyChanged(
this
,
new
PropertyChangedEventArgs( caller ) );
}
}
}
public
List<Raffle> CountRaffle()
{
List<Raffle>listOfRaffles =
new
List<Raffle>();
var raffles = from c
in
contacts
where c.raffle ==
true
select c;
Raffle r1 =
new
Raffle()
{ name =
"Yes"
, count = raffles.Count() };
Raffle r2 =
new
Raffle()
{ name =
"No"
, count = contacts.Count() - raffles.Count() };
listOfRaffles.Add(r1);
listOfRaffles.Add(r2);
return
listOfRaffles;
}
The resulting list becomes the itemssource for my pie chart. The CountRaffle() method is in the ViewModel but the assignment as the ItemsSource occurs in the code behind,
protected
async
override
void
OnNavigatedTo(
NavigationEventArgs e )
{
/* ... */
raffleChart.Series[0].ItemsSource = _vm.CountRaffle();
}
The view has a pie chart that looks like this,
<
telerik:RadPieChart
x:Name
=
"raffleChart"
Width
=
"300"
Height
=
"300"
Grid.Row
=
"1"
VerticalAlignment
=
"Top"
ClipToBounds
=
"False"
PaletteName
=
"DefaultDark"
>
<
telerik:PieSeries
ShowLabels
=
"True"
>
<
telerik:PieSeries.ValueBinding
>
<
telerik:PropertyNameDataPointBinding
PropertyName
=
"count"
/>
</
telerik:PieSeries.ValueBinding
>
<
telerik:PieSeries.LabelDefinitions
>
<
telerik:ChartSeriesLabelDefinition
Margin
=
"-20"
>
<
telerik:ChartSeriesLabelDefinition.Binding
>
<
telerik:PropertyNameDataPointBinding
PropertyName
=
"name"
/>
</
telerik:ChartSeriesLabelDefinition.Binding
>
</
telerik:ChartSeriesLabelDefinition
>
</
telerik:PieSeries.LabelDefinitions
>
</
telerik:PieSeries
>
</
telerik:RadPieChart
>
Notice that the ValueVinding is to count and the Label binding is to name, both properties of the Raffle class. This renders a pie chart that looks like this,
In our sample 11 of the 21 contacts did request to be entered in the raffle, and you can easily see that slightly more than 50% wanted to participate.
There is much more than can be done with pie chart specifically and Telerik Charts for Windows 8 in general, and in coming posts I’ll look at how to convey some of the information we are gathering using our charts, gauges and etc.
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