The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create a Dashboard in the Web Dashboard

This lesson demonstrates how to create a dashboard in the Web Dashboard Designer application prepared in one of the tutorials.

Steps 1-7. Create a Dashboard

  1. At the startup, your web application does not display any dashboard:

    WebDesigner-NoDashboard

    Click Create in the designer's surface.

  2. Click the Create Data Source... button in the New page.

    WebDesignerGettingStarted_CreateDataSource

  3. Select the nwindConnection in the invoked Dashboard Data Source Wizard.

    WebDesignerGettingStarted_DataSourceWizard_SelectConnection

  4. Click Run Query Builder... on the next page.

    WebDesignerGettingStarted_DataSourceWizard_RunQueryBuilder

  5. In the invoked Query Builder, drag the SalesPerson view from Available Tables and Views on the right and drop it onto the empty surface. Enable the *(All Columns) check box.

    WebDesignerGettingStarted_QueryBuilder_SelectSalesPerson

    Click OK.

  6. The Data Source wizard now displays the generated query.

    WebDesignerGettingStarted_DataSourceWizard_Finish_dx

    Click Finish.

  7. Finally, click the Create button to create a dashboard with the newly created data source.

    WebDesignerGettingStarted_CreateDashboard_dx

Steps 8-10. Create Dashboard Items

To create a dashboard item in the Web Dashboard, click the corresponding button in the Toolbox.

  1. Click the Chart button to add a chart.

    WebDesigner-DashboardItem-Chart

    Select the created Chart and click the link on its surface to bind it to data.

    WebDesigner-Chart-ProvidingData

    In the opened Binding menu select the Add Values placeholder. Click the UnitPrice field to add it to the Values section. In the same way, add the CategoryName field to the Arguments section and the OrderDate field to the Series section.

    WebDesignerGettingStarted_BindChart_New

  2. Click the Gauges button in the Toolbox to add gauges.

    WebDesigner-DashboardItem-Gauge

    Select the created Gauge and click the link on its surface to bind it to data.

    WebDesigner-Gauge-ProvidingData

    In the opened Binding menu select the Add Gauge placeholder. Click the UnitPrice field to add it to the Gauges section. In the same way, add the Country field to the Series section.

    WebDesignerGettingStarted_BindGauge_New

  3. Click the Card button in the Toolbox to add cards.

    WebDesigner-DashboardItem-Card

    Select the created Card and click the link on its surface to bind it to data.

    WebDesigner-Card-ProvidingData

    In the opened Binding menu, select the Add Card placeholder. Click the UnitPrice field to add it to the Cards section. In the same way, add the CategoryName field to the Series section.

    WebDesignerGettingStarted_BindCard_New

    The dashboard should look like this:

    WebDesigner-DashboardResult

Step 11. Save the Dashboard

  1. Open the dashboard menu and click Save. The dashboard XML file is saved to the previously created storage (App_Data).

    WebDesigner-SaveDashboard

    The dashboard is now ready. Refer to tutorials in the following section: Build End-User Dashboard Viewer Applications to learn how to embed a dashboard in a Viewer application.

Next Steps