Phone Elements supports a number of chart types with extensive support for customization. This topic introduces the core steps required to show a chart in your application. See also the PhoneElementsSampleExplorer sample for examples.

Controls

The core control for most charts is the Chart control.

<ch:Chart Title="My Chart" Width="600" Height="400" />

For pie charts only, use the PieChart control instead.

Data Series

A Chart or PieChart does not by itself display data. To specify the data to display, and how to display it, you must add one or more DataSeries to the chart. For example, to display data using a bar chart:

<ch:Chart Title="My Chart" Width="600" Height="400">
  <ch:BarSeries />
</ch:Chart>

The ItemsSource of the DataSeries must be set to the collection of data points you want to display. Use the XBinding and YBinding properties to specify the X-axis and Y-axis values respectively:

<ch:Chart Title="My Chart" Width="600" Height="400">
  <!-- Assuming the DataContext is a collection of SalesFigure objects, where
       the SalesFigure class has Quarter and Amount properties -->
  <ch:BarSeries ItemsSource="{Binding}" 
                XBinding="{Binding Quarter}" 
                YBinding="{Binding Amount}" 
                />
</ch:Chart>

You can display multiple series of data on the same chart:

<ch:Chart Title="My Chart" Width="600" Height="400">
  <!-- Assuming the DataContext is a collection of SalesPerson objects, where
       the SalesPerson class has a Name property and a Sales collection property -->
  <ch:BarSeries DataContext="{Binding [0]}" 
                ItemsSource="{Binding Sales}" 
                Title="{Binding Name}" 
                XBinding="{Binding Quarter}" 
                YBinding="{Binding Amount}" />
  <ch:BarSeries DataContext="{Binding [1]}" 
                ItemsSource="{Binding Sales}" 
                Title="{Binding Name}" 
                XBinding="{Binding Quarter}" 
                YBinding="{Binding Amount}" />
</ch:Chart>

For a PieChart control, use PieSeries instead of a DataSeries-derived type.

Chart Axes

To customize the chart axes, use the XAxis and YAxis properties:

<ch:Chart Title="My Chart" Width="600" Height="400">
  <ch:Chart.XAxis>
    <ch:ChartAxis Title="Quarter" />
  </ch:Chart.XAxis>
  <ch:Chart.YAxis>
    <ch:ChartAxis Title="Amount" Minimum="0" Maximum="35000" />
  </ch:Chart.YAxis>
</ch:Chart>

Exploring Charting Capabilities

To see code samples for both basic charts and customisation, see the PhoneElementsSampleExplorer sample.

Send comments on this topic to contact@mindscape.co.nz

(c) 2010-11 Mindscape Limited