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"

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" />

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

   <Chart:LinearAxis />


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

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


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:PropertyNameDataPointBinding PropertyName="Product" />
      <Chart:PropertyNameDataPointBinding PropertyName="Sales" />


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:PropertyNameDataPointBinding PropertyName="Product" />
      <Chart:PropertyNameDataPointBinding PropertyName="Sales" />

You can do this for any of the RadCartesianCharts.

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 are disabled in preview mode.