Panning a Windows Phone Chart

One of the biggest pain points of the toolkit chart for Silverlight/WPF is that you can’t [easily] add scrolling functionality. This is one of the main benefits of using C1Chart for all your XAML charting needs. The full-blown WPF and Silverlight versions of C1Chart have support for adding scrollbars to axes fairly easily. On the Windows Phone we don’t want scrollbars, but we still want scrolling functionality, which in this case should be referred to as translating or panning. A common charting scenario is when you have too many data points to visualize all at once. The most natural solution is to show only a portion of the data (maybe half) and allow the user to pan left and right to see the rest. Luckily, this functionality is possible with C1Chart for Windows Phone. Adding panning (or translating) functionality to C1Chart can be done in 2 easy steps: 1. On the axis you wish to pan, set the Scale property to the percent (<1) of the data points to be seen in one snapshot. In this case, we want to see 20% of the X-axis in one snapshot. 2. Add a TranslateAction to the Actions collection. This turns on the translate action (you could add zooming or scaling actions as well). Here's the full XAML:

<c1chart:C1Chart Name="c1Chart1" ChartType="Line" Palette="Metro">  
    <c1chart:C1Chart.Actions>  
        <c1chart:TranslateAction />  
    </c1chart:C1Chart.Actions>  
    <c1chart:C1Chart.View>  
        <c1chart:ChartView>  
            <c1chart:ChartView.AxisX>  
                <c1chart:Axis Scale=".2" />  
            </c1chart:ChartView.AxisX>  
        </c1chart:ChartView>  
    </c1chart:C1Chart.View>  
</c1chart:C1Chart>

Here's the code to do the same:

c1Chart1.View.AxisX.Scale = 0.2;  
c1Chart1.Actions.Add(new C1.Phone.Chart.TranslateAction());

Of course this works best if you have a LOT of data to display (who doesn’t?). Run the app and you should be able to pan across the axis by touching and sliding your finger. The attached sample was built using version WP7.1 and C1Chart which you can download from here. Download sample.