Telerik blogs

The fastest chart for windows phone 7 is just around the corner and it is not only fast, it is also very easy to use. To prove how easy to use RadChart is, consider the following steps which take the developer from a blank phone page to a page with a working chart that visualizes real data. In short the steps are these: Create chart object -> Add axes -> add series -> bind series to data. That’s right RadChart will support data binding on day -1 (this is the beta so it is not day 1 yet). Now let’s dig right into it.

First things first, we need a chart object. After obtaining a degree in rocket surgery, an experienced Silverlight developer should be able to come up with something like this:

xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
 
<chart:RadCartesianChart>
</chart:RadCartesianChart>

Now we need two axes

<chart:RadCartesianChart x:Name="chart">
    <chart:RadCartesianChart.XAxis>
        <chart:CategoricalAxis/>
    </chart:RadCartesianChart.XAxis>
     
    <chart:RadCartesianChart.YAxis>
        <chart:LinearAxis Maximum="100"/>
    </chart:RadCartesianChart.YAxis>
</chart:RadCartesianChart>

And finally we add the series and in darkness bind them

<chart:RadCartesianChart x:Name="chart">
    <chart:RadCartesianChart.XAxis>
        <chart:CategoricalAxis/>
    </chart:RadCartesianChart.XAxis>
     
    <chart:RadCartesianChart.YAxis>
        <chart:LinearAxis Maximum="100"/>
    </chart:RadCartesianChart.YAxis>
     
    <chart:RadCartesianChart.Series>
        <chart:LineSeries Stroke="Orange"
                          StrokeThickness="2"/>
    </chart:RadCartesianChart.Series>
</chart:RadCartesianChart>

// Constructor
public MainPage()
{
    InitializeComponent();
    this.chart.Series[0].ItemsSource = new double[] { 20, 30, 50, 10, 60, 40, 20, 80 };
}

Voila, a few lines of XAML and one line of C# and we have a working chart that displays an exceptionally useful trend of meaningless values, but hey, it’s not that hard to imagine how similar data could come from an actual web service or another legitimate data source so all is well.

You may have noticed that we are binding to an array of a primitive value type, the double. Does this mean that RadChart cannot be bound a arbitrary objects? Does this mean that MVVM is banished from RadChart's world? The answer of course is no. The series have two properties that determine to which properties to bind to if the raw data items are composite objects. These are ValueBinding and CategoryBinding, the values for which can be specified entirely in XAML. That said, if we assume that the DataContext of our chart is a list of person objects form example, we can define the value and category bindings as well as the items source like this:

<chart:LineSeries Stroke="Orange"
                  StrokeThickness="2"
                  ItemsSource="{Binding}"
                  ValueBinding="Age"
                  CategoryBinding="Gender"/>

Note that specifying the bindings as strings will not be available for the first beta since we have not written the binding converters yet but it will definitely be available for beta2 so stay tuned.

Now if you consider yourself to be a gentle developer, you might still find yourself wishing that this could be even simpler, and it can actually. We are planning to introduce a gallery of predefined charts, just like the gauge gallery, so that you can keep your gentleness and won't have to write the boilerplate XAML. With this gallery, the steps to create a chart will be reduced to select chart from gallery -> bind in code behind or bind in XAML.

Remember that this is still a beta so any suggestions and feedback are very important and we will be very happy to hear about your experiences with the chart in our forums.


Comments

Comments are disabled in preview mode.