Windows Phone 7 Charts

One of the big features of my Windows Phone 7 Google Analytics Client – Phonealytics is the nice (I think) looking graphs. After briefly considering porting an existing Silverlight solution to wp7 I stumbled upon Quick Charts by amCharts. Quick Charts is a lightweight and more importantly free chart control for Windows phone 7. It’s a bit light on options but very easy to get working and looks good.

<amcharts_windows_quickcharts:serialchart isenabled="False" datasource="{Binding GraphData}" x:name="chtMain" 
categoryvaluememberpath="Label" verticalalignment="Top">
    
    <amcharts_windows_quickcharts:serialchart.foreground>
        <solidcolorbrush color="{StaticResource PhoneForegroundColor}" />
    </amcharts_windows_quickcharts:serialchart.foreground>
    
    <amcharts_windows_quickcharts:serialchart.borderbrush>
        <solidcolorbrush color="{StaticResource PhoneBorderColor}" />
    </amcharts_windows_quickcharts:serialchart.borderbrush>
    
    <amcharts_windows_quickcharts:serialchart.axisforeground>
        <solidcolorbrush color="{StaticResource PhoneForegroundColor}" />
    </amcharts_windows_quickcharts:serialchart.axisforeground>
    
    <amcharts_windows_quickcharts:serialchart.background>
        <solidcolorbrush color="{StaticResource PhoneBackgroundColor}" />
    </amcharts_windows_quickcharts:serialchart.background> 
    
    <amcharts_windows_quickcharts:serialchart.graphs>
        <amcharts_windows_quickcharts:linegraph title="Visits" valuememberpath="Value" strokethickness="5">
            <amcharts_windows_quickcharts:linegraph.brush>
                <solidcolorbrush color="{StaticResource PhoneAccentColor}" />                                        
            </amcharts_windows_quickcharts:linegraph.brush>
        </amcharts_windows_quickcharts:linegraph>
    </amcharts_windows_quickcharts:serialchart.graphs>    
    
</amcharts_windows_quickcharts:serialchart>

I use an ObservableCollection of the super simple ChartDataPoint class below, with just the top properties I set on the chart xaml above.

public class ChartDataPoint
{
    public string Label { get; set; }
    public double Value { get; set; }
}

Here is a screen of the resulting graph with a dark / blue theme.

Quick charts also allows for some pretty delicious pie charts. Here is one I prepared earlier:

<amcharts_windows_quickcharts:piechart margin="0" isenabled="False" titlememberpath="Label" 
valuememberpath="Value" datasource="{Binding PieData}">
    <amcharts_windows_quickcharts:piechart.brushes>
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.8" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.6" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.4" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.2" />
        <solidcolorbrush color="{StaticResource PhoneAccentColor}" opacity="0.1" />
    </amcharts_windows_quickcharts:piechart.brushes>
    <amcharts_windows_quickcharts:piechart.foreground>
        <solidcolorbrush color="{StaticResource PhoneForegroundColor}" />
    </amcharts_windows_quickcharts:piechart.foreground>
</amcharts_windows_quickcharts:piechart>

Again I am using the default phone colours, this time I set a few brushes with different opacities. These will be used depending on the number of slices in your pie. Speaking of pie, here is what it looks like.