WPF Elements 5 Dashboard Sample

Not long ago we released version 5 of WPF Elements, a suite of fantastic WPF controls (if I do say so myself, as the lead developer…). This version includes a high performance data grid control, a time explorer for selecting time ranges in a convenient manner and hundreds of enhancements across the board. In the latest nightly build you will find a new sample app that demonstrates how to use various controls from WPF elements to build a sales dashboard. This app is built using the Caliburn Micro framework and is implemented using the popular MVVM design pattern.

Pipper Catering Dashboard

User interaction

First lets have a look at what this dashboard provides in the user interface. Along the top of the dashboard is the time explorer control. This allows the user to select a time range by dragging or clicking the mouse. By zooming in with the mouse wheel, the time explorer will display shorter time intervals such as weeks and days. Within the time explorer is a line chart displaying some summary data for the overall dashboard. This makes it easy for the user to select a time range around any interesting points in the data. Every time the user selects a new time range, the data displayed in the charts, gauges and data grid are updated to only include the data in the selected time range.

Time explorer interaction

Data drill down

The stacked bar chart below the time explorer is plotting a category breakdown of the data for each point displayed on the X axis. An individual bar shows the data for either a month, day, or 2 hour time slot based on the magnitude of the selected time range. Clicking on one of the bars will drill down to the next time interval.

Data drill down

Category filtering

Selecting one of the segments in the doughnut chart will filter the data grid by the selected category, and emphasise the appropriate points in the stacked bar chart and the equivalent gauge.

Category filtering

Along the bottom of the dashboard is a text block displaying the total sales value, animated linear gauges, and our WPF data grid. Users can reorder, resize and sort the columns in the data grid to display the current data however they would prefer.

MVVM architecture

The MVVM design pattern is commonly used to create robust WPF applications that are easy to maintain. The main idea behind this pattern is to cleanly separate the data model from the user interface. The only things linking these two parts together should be bindings, commands and event handlers. The data model of the dashboard application listens to changes made to the various controls based on the user interaction. These changes are analysed and the displayed data held within the model is updated to reflect the selected time ranges or filters. The controls within the user interface listen to the changes made to the data model and then updates the visuals for the user to see.

You can download the trial version of the latest nightly build from here, or go to your account page if you are already a customer. The smaller data model classes can be found in the Model folder. The main data model class is called DashboardViewModel, and the UI is built up in the DashboardView.xaml file. The SimpleLinearGauge extends our AnimatedValueDisplay, and the remaining class files are for hooking into the Caliburn Micro framework.

Have any questions about WPF Elements? We’d love to hear from you in the forum!

2 Responses to “WPF Elements 5 Dashboard Sample”

  • […] WPF Elements 5 Dashboard Sample (Jason) […]

  • Just downloaded the sample app. Very cool! Also like that you guys are using Caliburn Micro instead of reinventing the wheel with another framework. Good job.

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top