Using Chart Control for Windows Phone 7

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 fromhttp://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 valueproperty 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