In the previous blog post I showed off a new dashboard sample we have built with WPF Elements 5.1. By following this tutorial series I’ll show you step-by-step how you can build this dashboard application yourself. But before we start coding it up, I thought I’d take the time to walk you through each part of the dashboard to see what we will actually be building.
Time explorer
Overall, the dashboard is displaying the product sales of an imaginary company which sells 3 main products. The main source of the dashboard data is a list of orders which includes the time and value of each purchase. Each of the controls in the dashboard is displaying calculated statistics from this data. Starting from the top of the dashboard, you’ll find the time explorer. This control displays plotted data along a time scale and provides an easy way for users to select a time range around some interesting data – such as a rise in product sales. By zooming the chart in and out, the major and minor time units that the user can select will update accordingly. This makes it flexible enough to select small time ranges such as a single day, or large ranges such as several years. In this dashboard sample, the time explorer is plotting a total summary of all product sales. The time explorer isn’t limited to displaying a single series though. You could include another chart series that plots the estimated revenue. In the dashboard sample, when the user selects a time range, all the other controls are updated to display more fine details about the sales within the users selection.
Sales breakdown chart
The stacked area chart beneath the time explorer is displaying a break down of the total sales for each of the 3 products over the selected time range. By running the mouse over this chart, labels will be displayed for each product near the mouse so the user can clearly see what the values are. This functionality has been wrapped up into a custom control that can simply be added to the chart. This has been made possible by the events that the chart control raises as the mouse moves over the data.
Country chart
To the right of the sales breakdown chart is a stacked bar chart which displays how well each product is doing in the top 10 countries. A tooltip is displayed when the mouse hovers over the bars so that the exact data values can be viewed. A simple axis label template has been applied to display the country flags rather than the names which would otherwise take up more space.
Data grid
The data grid control has been setup to display the raw data of each sale that was made within the selected time range. Each attribute of a sale is displayed in a different column, some of which have custom cell templates to format the data display. The user can sort, rearrange, resize and group each column to display the data however they want.
Total sales
In the bottom right hand corner we have some total sales values. Here there are a couple of text blocks that display the current selected time range, and an animated value display showing the total product revenue. There are also a couple radial gauges, which in this demonstration, are showing random values for a budgeted and year on year growth. Once you reach the end of this tutorial series you could have a go at adding the logic to display meaningful values here.
Filter
The colored squares at the very top of the dashboard don’t only serve as a legend, they are also used to filter the data by product type. Clicking on one of the items will cause the charts, data grid and total sales value to only display data related to that product. This gives users even more control over what data they want to view. While in filter mode, clicking on the currently filtered legend item will switch back to displaying all data again.
Now that you know what we will be building, we’re ready to start constructing the application. To do this we will follow the MVVM design architecture and use the Caliburn Micro framework to help us. If you are new to Caliburn Micro, take a look at our tutorial series for beginners.
See you next time where we will start building the application with Caliburn Micro.
You should join our newsletter! Sent monthly:
[...] Dashboards With WPF Elements Part 3: Getting Started Tagged as WPF Elements Tweet In the previous blog post, I showed you exactly what we will be building throughout this tutorial series. In this post we [...]
Leave a Reply