Building Dashboards with DevExpress

04 December 2012

In my very first post as a DevExpress employee I quoted Rutherford B. Rogers:

We're drowning in information and starving for knowledge.

It is indeed the case that our software produces a fair amount of data exhaust. Oftentimes this exhaust languishes in a database or set of files and services without providing value and while producing excess overhead. At DevExpress we are committed to turning your data exhaust into valuable and actionable information that will enable your clients to be more productive and give meaningful insight into the key metrics that drive their business.

With that, we are excited to introduce a brand new dashboard tool to our already powerful family of data rich components. This tool is intended to help you build and distribute interactive data visualizations with ease.

Dashboard Designer

 

Data

One of goals with this product is enabling you to access your data in a quick and intuitive way. If your particular application needs to access a database, we have you covered with 14 different engines, xml file binding, as well as POCO support.

The process of selecting data, therefore, is tailored to your specific needs. As mentioned earlier you can (in order of customizability):

  1. Select tables or views,
  2. Craft a specific query, or
  3. Simply bind to an IEnumerable of your custom generated objects

This level of customization allows for an infinite range of data options suited to your personal needs.

Dashboard Elements

The difficulty of understanding large amounts of data is made much easier with powerful and principled visualizations. Our new dashboard tool has 7 different data visualization elements each with different strengths and options.

Dashboard Elements

Pivot The pivot dashboard element enables a cross-sectional view of data pivoted across multiple dimensions.
Grid The grid enables a standard tabular representation of data. This dashboard element also contains embedded visual cues and displays that assist in quickly understanding data.
Chart This quintessential visualization tool assists in the creation of bar, point, line, area, range, bubble, and financial charts. Our creation mechanism has also been significantly streamlined in order to visualize your data with simple drop actions.
Pie The pie chart is a powerful visualization tool that enables users to understand distributions over small ranges.
Gauges Gauges allow the comparative visualization of two values where one represents a target and the other an actual value. This dashboard element also allows for a multiplicity of gauges in a single dashboard element by creating a series view of the same.
Card Cards, similar to gauges, are a textual visualization of target to actual values. These additionally include easy to understand positive/negative visualizations as well as easy to consume data explanations. This is a brand new visualization in the DevExpress family of visualization tools!
Range Filter The range filter is also a brand new visualization tool that allows for automatic data filtering by presenting a chart based range. The range filter is automatically wired up to be a master filter and enables users to drill down into specific data in an effortless way.

In addition to these data visualization elements, we have also included a static image and text dashboard element allowing finer grained dashboard customization. This will enable the addition of custom images and text that can spruce up the presentation of a dashboard.

Working with a Dashboard Element

Once a data connection is established, all you need to do to add a dashboard element is click on the corresponding type you wish to create. Once that is done all you need to do from there is start dropping fields into the Data Items section.

Dashboard Element Data Items

Dashboard Element Data

For every dashboard element there are three things to consider:

  1. What data is represented?
  2. How the data is shaped?
  3. How should the user interact with the data?

Each dashboard element’s data bindings can be dragged from the available fields from the data source.

Dashboard Fields

The three areas where these can be dragged are the:

  1. Values – the Y axis in the case of a chart (or the values of the items being measured)
  2. Arguments – this can be considered as the X axis (or the items being measured)
  3. Series – different sets of (x, y) pairs

Additionally one can drag fields directly into the Hidden Data Items Section. This section can be used to do additional sorting, filtering, and data shaping on values and arguments that are not necessarily visible in the actual dashboard element. Users of your dashboards will be able to shape data as they see fit – even with data elements not present in the visualization.

Dashboard Element Layout

Each dashboard element also has item specific layout capabilities. A couple of examples:

Chart Chart Element Layout Options
Grid Grid Element Layout Options
Cards Card Element Layout Options
Etc.  

These layout options are element specific and allow for a tremendous amount of flexibility.

Interactivity

Next I want to tell you about how easy it is to create interactive dashboards. Every dashboard element visualization intrinsically is linked to a specific set of data. Because of this data connection, we are able to provide concise and pain-free methods of creating both dashboard wide filtering as well as simple element drill down. Each dashboard element has a data tab:

Dashboard Element Interactivity Options

The data tab allows you to define either a dashboard wide filter, drill down, as well as the ability to define whether or not a dashboard element even participates in a filter. There is no code, variables, or anything for that matter needed to define these complex yet informative actions.

Viewers

The main output when designing a dashboard is the dashboard definition file. This file is a simple xml file which defines where the data comes from, what dashboard elements are defined, how they are bound, and what interactions have been created. This simple dashboard definition file can then be used in the WinForms dashboard viewer control. The final product looks very similar to the designer:

WinForms Dashboard Viewer

This viewer is fully interactive and will assist your users to get a really good feel for your data. Another exciting viewer we have created is our web viewer:

Web Dashboard Viewer

The web viewer uses our new HTML5/JS visualization tools available in DXTREME making them accessible to virtually any iDevice (above is an example with the iPad), Android, or Windows device. This viewer (just like the WinForms viewer) is simply dragged on to the design surface and bound to the dashboard definition file:

Web Dashboard Viewer at Design Time

It is that simple!

Finally

There is so much more to talk about! I am personally very excited about this new product. As mentioned, my very first official post as a DevExpress employee outlined the importance I’ve always attached to gleaning knowledge from your data. I plan to dive into each aspect a bit more carefully in posts and videos to come.

There is much yet to come! Stay Tuned!

As always, if there are any comments and/or questions, feel free to get a hold of me!

Seth Juarez
Email: sethj@devexpress.com
Twitter: @SethJuarez

17 comment(s)
renejdm

This looks good. Especially being able to connect to a NoSQL datasource (I'm assuming with json).

Too bad that I will never use it because it is only part of your Universal Subscription.

Rene

4 December, 2012
Glen Harvy

Is this only available with DXTreme? If so it really should be mentioned at the top of the blog post because like Rene, I'm not certain I can afford a Universal Subscription.

4 December, 2012
Peter Thorpe

This looks awesome but as others have said shame its universal subscription only, means I will probably never get to use it.

Maybe if the upgrade prices for long time customers were lower :-)

4 December, 2012
Seth Juarez (DevExpress)

Thank you for your comments! You are indeed correct that the dashboard software is included in the Universal Subscription (see www.devexpress.com/.../index.xml). Although it is our priciest subscription, the licensing is very open. In other words, if you look around at comparable dashboard solutions with similar licensing (if you can even find the prices) you will see that our solution is very affordable (comparatively speaking).

4 December, 2012
renejdm

Hi Seth,

But the name of the dashboard component is XtraDashboard, so it is a Winforms component with a Winforms viewer (there is also an ASP.NET viewer). But this Winforms component is not part of the Winforms suite.

I understand from a business perspective that you want your Winforms subscribers to upgrade to your Universal subscription. But that is not going to happen (for me anyway). I only use your Winforms products because they are the best. I do not use any of your other products.

So why would I spend an incredible amount of money just to use a Winforms component that you decided to bundle with your Universal subscription? I would not. However, I would consider it if you offered this component as a stand-alone component.

Rene

4 December, 2012
Mark Knipp

Don't get discouraged!!

This looks like an incredible product.  The price of Universal is less than the price of buying any other stand alone dashboard.  

The disconnect, I think, is that it is being offered in the tool market.  It is more price sensitive.  

From what I can tell, it requires the use of the controls from all of the control suites and components of the report server so it would make it difficult to put it anywhere.  Consider the frustration that you see from us as a sign that us developers want to use it.

5 December, 2012
QUALCO SA

Great product what about WPF / SL?

5 December, 2012
Howell11

Would like to see some examples using SQL Server as the datasource.  The Design process is GREAT but having trouble getting the web version to work using the XML file.  The username/password does not get saved in the XML and not sure how to connect the datasource for the DashboardViewer control....  Anyone know where I might find my answer.  I know it is going to be so simple... Thanks!!

7 December, 2012
Aaron Strickland

XtraDashboard for WinForms available for Universal ONLY and not WinForms to me makes no sense.  The only logic I see behind it is from a marketing perspective.  Yes, DevExpress is the most affordable package out there, but I believe it should have been considered to name this package something else if it was not going to be released with the WinForms package so there would have been no confusion.

31 December, 2012
Seth Juarez (DevExpress)

Aaron:

 I understand your frustration. The name of our dashboard product, however, is not XtraDashboard. In fact, I don't think you will find that name anywhere in my post (or in the help documentation for that matter). The only thing you might find is XtraDashboard in the name of the WinForms assembly. This is done merely by convention (just like we use ASPx in ASPxDashboardViewer). I hope this helps.

31 December, 2012
Rodrigo Coelho

Perfect! It's a great resource, but needs some improvements. For example, possibility to change the properties of the controls and print/preview support.

16 January, 2013
Soren Frederiksen

I love this product and we will start using it in production soon. I see that there is now an ASP Dashboard viewer. Any timeline for the ASP Designer?

5 February, 2013
sabeer k

its ow some, hoe to enable dynamic data from sql

11 February, 2013
Simon Bonanno

1] Can you show the 'raw' data of, say, a bar in a barchart, in a popup grid?

2] Can you pass parameters to the data source?  I want to pass the logged in user for security reasons - my data source would make sure that data passed to client is in accordance to user rights.

13 February, 2013
snehal.desai

So my plan is to integrate the dashboard viewer control in to our product. Is there a way for the users of my product to interact with the dashboard? I know i can set a master filter and do drill downs etc, but can my users dynamically change the filtering options or look of the dashboard?

13 June, 2013
Seth Juarez (DevExpress)

Great question! Absolutely: this can be done by embedding the WinForms Dashboard Designer control into your application and managing the xml definition of each dashboard. These can be serialized to a stream which can fit inside of a database table.

Let me know if this works!

-Seth

13 June, 2013
Seth Juarez (DevExpress)

Friends:

  A Web Designer would be fantastic! Regarding dynamic sql, this should be done by doing the data pre-processing *before* passing data to either the viewer or designer. My sense is that raw data can be handled that way as well. Parameters can definitely be used but (again) this would be done as a pre-processing data step. Hope this helps!

13 June, 2013

Please login or register to post comments.