The area, bar and line chart look quite different. They display their data differently and do not seem necessarily interchangeable. Thanks to the architecture of Windows 8 RadChart controls, however, to learn how to build one is to learn how to build them all.
It Begins With Data
Start by creating a data class,
public
class
Data
{
public
string
Product {
get
;
set
; }
public
double
Sales {
get
;
set
; }
}
Add to the Data class a static method that generates a collection of Data instances to serve as a proxy for retrieving data from a database or from a web service,
public
static
List<Data> GetData()
{
var data =
new
List<Data>();
data.Add(
new
Data()
{
Product =
"Tissues"
,
Sales = 54.76
} );
data.Add(
new
Data()
{
Product =
"Paper cups"
,
Sales = 67.23
} );
data.Add(
new
Data()
{
Product =
"Pens"
,
Sales = 22.99
} );
return
data;
}
Creating the Charts
With that data, you are ready to create your chart. Turn to MainPage.xaml. Inside the main grid, add a RadCartesianChart object,
<
Chart:RadCartesianChart
x:Name
=
"sales"
ClipToBounds
=
"False"
Height
=
"200"
Width
=
"200"
Margin
=
"50"
>
You can add one or more behaviors as well. For example, I like the TrackBall behavior that allows you to “roll over” points in the chart and see additional information, such as the exact value,
<
Chart:RadCartesianChart.Behaviors
> <
Chart:ChartTrackBallBehavior
ShowInfo
=
"True"
InfoMode
=
"Multiple"
/>
</
Chart:RadCartesianChart.Behaviors
>
Set the VerticalAxis to take a LinearAxis (that is, your values)
<
Chart:RadCartesianChart.VerticalAxis
>
<
Chart:LinearAxis
/>
</
Chart:RadCartesianChart.VerticalAxis
>
Set the Horizontal axis to take a Categorical Axis (your products)
<
Chart:RadCartesianChart.HorizontalAxis
> <
Chart:CategoricalAxis
/>
</
Chart:RadCartesianChart.HorizontalAxis
>
Now you add your series. If you are building an Area chart, you add an AreaSeries, for a BarGraph a BarSeries, and for a LineGraph a LineSeries,
<
Chart:AreaSeries
ItemsSource
=
"{Binding}"
>
<
Chart:AreaSeries.CategoryBinding
>
<
Chart:PropertyNameDataPointBinding
PropertyName
=
"Product"
/>
</
Chart:AreaSeries.CategoryBinding
>
<
Chart:AreaSeries.ValueBinding
>
<
Chart:PropertyNameDataPointBinding
PropertyName
=
"Sales"
/>
</
Chart:AreaSeries.ValueBinding
>
</
Chart:AreaSeries
>
Notice that we add PropertyNamePointBinding properties for the Product and Sales properties, binding appropriately.
That’s it. If you want to change this to a BarSeries, replace every AreaSeries with BarSeries, above, e.g.,
<
Chart:BarSeries
ItemsSource
=
"{Binding}"
PaletteMode
=
"DataPoint"
>
<
Chart:BarSeries.CategoryBinding
>
<
Chart:PropertyNameDataPointBinding
PropertyName
=
"Product"
/>
</
Chart:BarSeries.CategoryBinding
>
<
Chart:BarSeries.ValueBinding
>
<
Chart:PropertyNameDataPointBinding
PropertyName
=
"Sales"
/>
</
Chart:BarSeries.ValueBinding
>
</
Chart:BarSeries
>
You can do this for any of the RadCartesianCharts.
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