Create a Dashboard in Visual Studio

This tutorial shows how to create a dashboard at design time within Visual Studio and display this dashboard in the WinForms Dashboard Viewer.

Steps 1-5. Create a New Project and Add a Dashboard

  1. Run Visual Studio 2012, 2013, 2015 or 2017 and create a new Windows Forms Application.
  2. Drag the DashboardViewer control from the DX.18.2: Data & Analytics Toolbox tab and drop it onto the main form.

    GettingStarted_L2_Toolbox

    Important

    Note that the DashboardViewer control does not support .NET Framework 4.0 Client Profile. See How to: Target a Specific .NET Framework Version to learn how to target a specific .NET Framework version.

  3. Click the control's smart tag button and select Dock in Parent Container to allow the DashboardViewer to fill the entire window.

    GettingStarted_L2_Dock

  4. In the same menu, click Create Dashboard.

    VSDesigner_ViewerSmartTag_CreateDashboard

  5. Visual Studio displays the designer for the newly created dashboard.

    GettingStarted_VSDesigner_Empty

    Note

    Alternatively, you can create a dashboard in Visual Studio using the DevExpress Template Gallery. To do this, right-click the project in the Solution Explorer and select Add DevExpress Item | New Item... Select Dashboard and click Add Item in the invoked DevExpress Template Gallery.

Steps 6-15. Connect to a Database and Select Data

  1. To add a dashboard data source, click Edit Data Sources... on the dashboard surface.

    VSDesigner_Empty_EditDataSources

  2. Click Add | Dashboard Data Source to add a new data source in the invoked Data Sources dialog.

    GettingStarted_L4_DataSourcesDialog

  3. On the first Data Source page, select Database and click Next.

    DataSourceWizard_Database_DesignTime

  4. On the next page, select No, I'd like to specify the connection parameters myself and click Next.

    GettingStarted_L4_UseAnExistingConnection

  5. Now specify the data connection parameters. Select the Microsoft Access 97 data provider and specify the database path in the Database field:

    C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data\nwind.mdb

    DataSourceWizard_MSAccess97

    Click Next.

  6. On the next page, leave the default settings and click Next.

    GettingStarted_L4_DataSourceWizard_SaveString

  7. On the final page, click the Run Query Builder... button to run the Query Builder and select the required data.

    GettingStarted_L4_RunQueryBuilder

  8. In the invoked Query Builder, drag and drop the SalesPerson view from the Tables pane onto the Design pane...

    GettingStarted_L4_QueryBuilder_DragSalesPerson

    ...and check the (All Columns) checkbox.

    GettingStarted_L4_QueryBuilder_SelectAll

    Click OK.

  9. The Data Source Wizard displays the generated query.

    GettingStarted_L4_DataSourceWizard_GeneratedQuery

    Click Finish to create the data source.

  10. The Data Sources dialog displays the created data source and its properties. Click OK.

    GettingStarted_L4_DataSourcesDialog_filled

Steps 16-19. Add Dashboard Items and Bind them to Data

  1. To add dashboard items, open the Toolbox and drag them onto the dashboard.

    GettingStarted_L4_DashboardItemsToolbox

    First, add the Gauge dashboard item to the dashboard. Select Dashboard | Field List and drag the Extended Price field onto the "Actual" placeholder in the Gauges section.

    GettingStarted_L4_BindGauge_Value

    Then, drag the Country field to the Series section.

  2. Add the Chart to the dashboard and drag the Extended Price field onto the Values section, the CategoryName field onto the Arguments section and the OrderDate field onto the Series section.

    GettingStarted_L4_BindChart

  3. Finally, add the Cards dashboard item. Drag the Extended Price field onto the "Actual" placeholder in the Cards section and place the Sales Person field in the Series section.

    GettingStarted_L4_BindCards

  4. The dashboard should look as follows in Visual Studio:

    GettingStarted_L4_DashboardFinal

    Run the application and see how DashboardViewer displays the resulting dashboard.

    GettingStarted_L2_Result

See Also