Creating charts on Windows Phone 7 with Syncfusion's controls

Developer Justin James shows how easy it is to use Syncfusion's User Interface Edition for Windows Phone to create a chart in an application.

Syncfusion recently released a set of UI controls for Windows Phone 7 (WP7) that I decided to check out because I've been happy with the company's controls in the past. After looking at the documentation and doing a little bit of experimentation, I put together a sample application that uses its Chart component.

The first thing to do is to download the tools from Syncfusion. The company offers a 30-day free trial, and will email you an unlock key to use. (The Windows Phone 7 control is part of Synfusion's Essential Studio User Interface Edition, which retails for $1,695 USD.) Once the package is installed, you will need to start the Syncfusion Dashboard and use it to install the binaries. Syncfusion does this to allow you to manage different versions of its packages more easily.

Once the package is installed and set up, start Visual Studio, and begin a new Windows Phone application or open an existing one. Go to the Add References dialog, select Assemblies, select Extensions, and then add the Syncfusion libraries that you need in your application. For the purposes of this post, we will use Syncfusion.Chart.Phone. Next, you need to add the reference to your XAML to make it available to your page. For the charting controls, this is what I added to the "phone:PhoneApplicationPage" tag at the top of the XAML file:


The effect of this is to expose the Syncfusion chart control to our page so that we can use it. Now, we can start placing parts of the chart onto our page. We're going to start with a "Chart" object, and wrap a "ChartArea" within it. ChartArea can then contain things such as the legends and the chart data within it. Because we imported the controls with the namespace of "chart," all of the relevant tags start with "chart" in our XAML. As we fill in the tags, you will see the charting take shape in the visual designer too. We are going to add an empty legend and two axes. You can add up two axes of types PrimaryAxis (x-axis) and SecondaryAxis (y-axis). For each axes, you can set "IsAutoSetRange" to "true" and let the control figure out what range to use, or you can set it to "false" and add a "Range" attribute with a pair of numbers (such as "5,45") as its value to force a range, as well as an "Interval" attribute.

You need to get some data into the control. You can do this manually by setting the data context in the code behind. In my experience, this is not the best way of doing things, because it is hard to trace the data on the screen to the control; you need to hunt down the actual call to set the data context. So instead, we are going to do it in XAML. To do this, let's create a ChartSeries object in the ChartArea. This allows us to control what kind of chart is made, its label on the screen, its appearance, and where the data come from. For the purposes of this demonstration, we are going to use a simple data set with the data coming from a resource within the XAML, and a basic set of classes defined in the main code behind file. In a full project, you will want to have your bound data be more robust than this. Once the data is defined, you will use the "BindingPathsX" and "BindingPathsY" attributes of DataSeries to define what properties of the data binding will be attached to each axis in the chart.

Other than tying the chart to a data source connected to "real data," we now have a very nice, highly configurable chart in our application.

Code sample A: The Chart control itself
<chart:ChartArea Header="Sample Chart" GridBackground="AliceBlue">
<chart:ChartAxis Name="Xaxis" Header="Week" IsAutoSetRange="True"></chart:ChartAxis>
<chart:ChartAxis Name="Yaxis" Header="Sales" IsAutoSetRange="True"></chart:ChartAxis>
<chart:ChartSeries Name="WeeklySales" Label="Weekly Sales" Type="Line" Stroke="Blue" StrokeThickness="2" BindingPathX="WeekNumber" BindingPathsY="Sales" DataSource="{StaticResource dataSet}"></chart:ChartSeries>
Code sample B: The data binding classes
public class SalesData
public int WeekNumber { get; set; }
public double Sales { get; set; }
public class WeeklySalesData : ObservableCollection<SalesData>
Code sample C: The data resource in the XAML
<localItems:WeeklySalesData x:Key="dataSet">
<localItems:SalesData WeekNumber="1" Sales="890.45" />
<localItems:SalesData WeekNumber="2" Sales="912.12" />
<localItems:SalesData WeekNumber="3" Sales="1234.87" />
<localItems:SalesData WeekNumber="4" Sales="908.34" />
<localItems:SalesData WeekNumber="5" Sales="762.78" />
<localItems:SalesData WeekNumber="6" Sales="671.23" />
<localItems:SalesData WeekNumber="7" Sales="908.99" />
<localItems:SalesData WeekNumber="8" Sales="1342.11" />
<localItems:SalesData WeekNumber="9" Sales="1276.21" />
<localItems:SalesData WeekNumber="10" Sales="1098.07" />
Figure D: What the layout looks like in Visual Studio

Figure E: Screenshot of the running application