Telerik blogs

The area, bar and line chart look quite different. They display their data differently and do not seem necessarily interchangeable.  Thanks to the architecture of Windows 8 RadChart controls, however, to learn how to build one is to learn how to build them all. 

 

AreaSeries BarChart LineChart

 

It Begins With Data

Start by creating a data class,

public class Data
{
   public string Product { get; set; }
   public double Sales { get; set; }
}

 

Add to the Data class a static method that generates a collection of Data instances to serve as a proxy for retrieving data from a database or from a web service,

public static List<Data> GetData()
{
   var data = new List<Data>();
   data.Add( new Data()
   {
      Product = "Tissues",
      Sales = 54.76
   } );
   data.Add( new Data()
   {
      Product = "Paper cups",
      Sales = 67.23
   } );
   data.Add( new Data()
   {
      Product = "Pens",
      Sales = 22.99
   } );
   return data;
}

 

Creating the Charts

With that data, you are ready to create your chart. Turn to MainPage.xaml.  Inside the main grid, add a RadCartesianChart object,

<Chart:RadCartesianChart x:Name="sales"
                         ClipToBounds="False"
                         Height="200"
                         Width="200"
                         Margin="50">

You can add one or more behaviors as well. For example, I like the TrackBall behavior that allows you to “roll over” points in the chart and see additional information, such as the exact value,

<Chart:RadCartesianChart.Behaviors>    <Chart:ChartTrackBallBehavior ShowInfo="True"                                    InfoMode="Multiple" />
</Chart:RadCartesianChart.Behaviors>

Set the VerticalAxis to take a LinearAxis (that is, your values)

<Chart:RadCartesianChart.VerticalAxis>
   <Chart:LinearAxis />
</Chart:RadCartesianChart.VerticalAxis>

 

Set the Horizontal axis to take a Categorical Axis (your products)

<Chart:RadCartesianChart.HorizontalAxis>    <Chart:CategoricalAxis />
</Chart:RadCartesianChart.HorizontalAxis>

 

Now you add your series. If you are building an Area chart, you add an AreaSeries, for a BarGraph a BarSeries, and for a LineGraph a LineSeries,

<Chart:AreaSeries ItemsSource="{Binding}">
   <Chart:AreaSeries.CategoryBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Product" />
   </Chart:AreaSeries.CategoryBinding>
   <Chart:AreaSeries.ValueBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Sales" />
   </Chart:AreaSeries.ValueBinding>
</Chart:AreaSeries>

 

Notice that we add PropertyNamePointBinding properties for the Product and Sales properties, binding appropriately.

 

That’s it.  If you want to change this to a BarSeries, replace every AreaSeries with BarSeries, above, e.g.,

<Chart:BarSeries ItemsSource="{Binding}" PaletteMode="DataPoint">
   <Chart:BarSeries.CategoryBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Product" />
   </Chart:BarSeries.CategoryBinding>
   <Chart:BarSeries.ValueBinding>
      <Chart:PropertyNameDataPointBinding PropertyName="Sales" />
   </Chart:BarSeries.ValueBinding>
</Chart:BarSeries>

You can do this for any of the RadCartesianCharts.


jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Comments

Comments are disabled in preview mode.