Using Chart Control for Windows Phone 7

izzuddin — Thu, 02 Jun 2011 22:06:00 GMT

In this post, I'll show you how to use chart component in windows phone 7 application. I use third party library amChart, it has a free version and we can use it for create chart in wpf, silverlight, or windows phone 7. You can download the library from http://wpf.amcharts.com/download and choose amCharts Quick Charts for Windows Phone 7 (Silverlight) if you want to build windows phone 7 apps.

Add AmCharts.Windows.QuickCharts.WP.dll library into your project.

After that, on MainPage.xaml add this code below into your page.

<amq:SerialChart x:Name="chart1" DataSource="{Binding Data}" CategoryValueMemberPath="axis"
 AxisForeground="White"
 PlotAreaBackground="Black"
 GridStroke="DarkGray">
 <amq:SerialChart.Graphs>
 <amq:ColumnGraph ValueMemberPath="value" Title="Column #2" Brush="#8000FF00" ColumnWidthAllocation="0.4" />
 </amq:SerialChart.Graphs>
 </amq:SerialChart>

Don't forget add this assembly reference declaration before :

xmlns:amq="clr-namespace:AmCharts.Windows.QuickCharts;assembly=AmCharts.Windows.QuickCharts.WP"

There are many types of serial or pie chart that you can use, in code example above amq:ColumnGraph represnt a column bar chart, you can use amq:LineGraph and amq:AreaGraph for line and area chart type. Now, let's fill your chart value from code behind..

Create a new class name it ItemData which have two properties, axis and value. Axis is the name of column field and value property is the value of it column field.

public class ItemData
 {
 public string axis { get; set; }
 public double value { get; set; }
 }

And then, define ItemData collection in MainPage class and give value of each properties.

private ObservableCollection<ItemData> _data = new ObservableCollection<ItemData>()
 {
 new ItemData() { axis = "Jan", value=5},
 new ItemData() { axis = "Feb", value=15.2},
 new ItemData() { axis = "Mar", value=7},
 new ItemData() { axis = "Apr", value=10}
 };

Finally, create OnLoad event handler from MainPage.xaml for set DataContext to refer MainPage class.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
 {
 this.DataContext = this;
 }

This is the screenshot this example tutorial :

And you can download this source code.

Izzuddin Gumilar's Blog : C#

Using Chart Control for Windows Phone 7