Tip:
Highlight text to annotate it
X
Welcome to the DevExpress Learn Now Series. A set of quick tutorials to help you get started
using our controls. In this video, I’ll show how quickly you can create a dashboard
and display it within your application using the XtraDashboard Suite. So let’s get started.
I’ll start by adding the DashboardDesigner from the toolbox and setting it to fill the
entire forms area. Then click on the Create Ribbon task and a
ribbon is generated with all of the necessary actions included. If I run this now, you can
see that the Designer has a familiar look and feel to Microsoft’s Word application.
The Ribbon provides us with all the buttons need to design a dashboard.
Click on the New Data Source Button and a wizard appears to walk you through the necessary
steps to bind your data. For this example, I’ll choose the sample Northwind Database
and click next. A query designer appears where we can add the data needed. I’ll drag the
SalesPerson view and include all of the columns. Click Next, and you’ll see our data appear
on the left. Now I can begin to build my dashboard. I’ll
add a Pie Chart and drag over all of the necessary Data items to reflect sales by each person.
You’ll see the chart update immediately. Next I’ll include a bar chart and add the
data items needed to reflect Sales by product category. I continue to add some gauges in
the same manner. They’ll reflect the overall sales by Country.
As you can see, each chart can be docked and repositioned accordingly. I’ll place the
pie chart and gauges above the bar chart. Now I’ll add a Range control on the bottom
to help adjust dates. I’ll add the Extended price as the value and the OrderDate as the
Argument, then switch it to Day-Month-Year. As you can see, the range control is a great
way to pinpoint sales information from a specific time period.
So now we have a fully functional dashboard. I’ll go ahead and save this as an .xml file
and show you how to display it in another sample application.
Again, we have a Windows Form project open. I’ll drop the DashboardViewer on the form
and dock it to fill the entire area. Then I select Load Dashboard from the tasks menu
and choose the file we just created. Now when we run this app, you’ll see our
dashboard is fully functional. Users can accurately pinpoint dates and get the sales information
needed. Thanks for watching. Let’s see what develops.