You are a business analyst charged with understanding the retail market. You’ve decided to create an application that will display the relative revenues for the key stores in your district. Obtaining the data is easy, but you’d like a graphic representation of the revenue volume for each of the key stores.
Start by storyboarding your application. It will be a single page for now, just a prompt and a graph,
In examining this storyboard you notice that you have a linear scale on the y axis and a categorical scale on the x axis. This will be important when you are ready to put your chart together.
You start, as always with your data. You’ll create a class to represent the store. It will have numerous properties, but for the purpose of this exercise, we’ll boil it down to the essentials:
The StoreName will be the category (x axis) and the Amount will be the value (y axis). You’ll need data, and rather than distract ourselves with getting that data from a database, we’ll hard code it for now, as a static method on the StoreRevenue class,
You now have a storyboard of your view, and you have your model (data) but you need to create your ViewModel to mediate between the model and the view. Once again, we’ll keep the VM as simple as possible, complicated only by the fact that it implements INotifyPropertyChanged,
Key is the single property: StoreRevenues which is of type ObservableCollection of StoreRevenue. This will notify the UI any time an item is added to or removed from the collection.
NB: If you want notification to the UI every time one of the members of the collection changes its value, then you’ll need to implement INotifyPropertyChanged on the StoreRevenue class as well. We’ll skip that for now.
We are ready to build our view which we do in the XAML. First we set up the rows and columns,
We’re ready now to add the TextBlock that will serve as the prompt,
We’re about to add the RadCartesianChart itself, but we need to do a few things first.
Let’s add the RadControlsForMetro to the References so that the correct assemblies are included.
Next, at the top of the XAML we’ll create a namespace for the Telerik controls:
We’re ready now to add the RadCartesianControl but I know that it is going to need a LabelStyle and I’m inclined to put that into my resources before I begin. So let’s pop up above the Grid and add a Page.Resources section with the Style,
With that in place, we can return to just below the TextBlock and add the RadCartesianChart,
As you’ll remember, our horizontal axis is categorical and we want it to use the LabelStyle we just defined in the Page resource,
Our vertical axis, on the other hand, is linear, but it uses the same label style,
Now we get to have some fun, setting up the AreaSeries itself. We can set the fill and the stroke to whatever colors we think will look best, and we can bind the ItemsSource to the property we designated in the ViewModel,
We are now ready to bind the appropriate fields from the StoreRevenue class to the value and category of the area grid,
All that’s left is to close up the open tags (in the correct order!) and to set the DataContext to the ViewModel. We do the latter in the code behind. Click on MainPage.xaml.cs and we’ll make that connection in OnNavigatedTo so that the DataContext is set when the page is navigated to,
The application is ready to run.
Of course, all that we created in XAML in Visual Studio we can create visually in Blend.
Once the Chart is on the artboard, we can see it in the Objects and Timeline,
Switching to the properties window we can set the colors and layout in the properties window,
Blend gives you a very powerful view of the chart as you are assembling the data.
Stay tuned for upcoming blog posts on going beyond your first application.
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!