Figure 1 shows the chart we wish to build. This is a linear chart built with a RadCartesianChart. It represents revenue for the last six months of 2012,
The best way to approach building a line chart (or any chart) is to start with the data you wish to display. In this case, we will use mock data representing Monthly Revenue earned from July through December 2012. The class that will hold our data is MonthRevenue.cs,
The chart itself will be bound using a ViewModel class (as part of the Model/View/ViewModel architecture). The VM in this case is fairly straight forward except that it must also do the work of generating our “dummy” data,
Notice that each entry in the myRevenues collection is of type MonthRevenue, and thus has an amount and a Date (the DateTime is created in the order year, month, date).
With the data ready, we can now create our chart.
Open the References and add a check box next to RadControlsForMetro,
Next, open MainPage.xaml and add a using statement for the Telerik controls
We’ll be using a style to set the labels both on the x and y axis (as seen in the figure above) so let’s create that as a resource,
We’re now ready to add our chart to the Grid,
Within the chart we’ll declare a Grid, and within that we’ll set that we want our Major Lines to be visible,
Next, we’ll set the Horizontal and vertical axes. The HorizontalAxis is slightly more complicated because not only do we want it to be categorical, but we want a special type of Categorical axis, we want a DateTime that is going to mark the months,
The vertical axis is more straightforward but note that it uses the same labelstyle.
We’re now ready to add the Line series, binding its value to the Revenues property of our VM. We need to specify the Value and the Category binding so that the chart knows which data to retrieve for each axis.
There are a number of ways to set the VM as the DataContext for the chart, we’ll do so in the OnNavigatedTo event handler in the code behind,
That’s it, you now have a fully functioning chart displaying revenues over months.
Source code for this example can be found here.
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
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required