Tutorial - Dashboard Report

Note Before reading this tutorial, please read Dashboard Report Setup first.

A Dashboard report allows you select any charts you have created in your project and show them in one single Dashboard report page, with links back to the original reports. Using this feature, you can enable users of your system to quickly understand the key indicators of your system with the visually rich charts.

In this tutorial we will show you how to create a Dashboard Report in ASP.NET Report Maker. We will use the demo project for demonstration.

We will use the column 2D chart created in Tutorial - Chart and the Gantt chart created in Tutorial - Gantt Chart for the example. If you have not yet created the charts, please follow the respective tutorials and create the charts first.

Steps to Create the Dashboard Report

1. Loading ASP.NET Report Maker

Open ASP.NET Report Maker and then open the demo project.

2. Adding the Dashboard Report

Right click [Reports] on the database pane then click [Add Report (Dashboard)], or click [Edit] in the main menu and then select [Add Report (Dashboard)].

  1. The Report Setup window will show up, enter the report name, here we will use the default "Dashboard1".
  2. Then select the report type (Vertical/Horizontal/Custom). If you want to display the charts in simple vertical and horizontal layout, just choose Vertical or Horizontal.
    In this example, we will use our own custom template, so we choose Custom. Later, we'll write our custom template.
  3. Here we choose the charts for the Dashboard Report first. In this example, we select the Dow Jones Industrial Index Chart ("dj1|Chart1") and the Order By Categories Chart ("Quarterly Orders By Product|OrdersByCategory").
  4. Click [OK] to finish. You should find the new report appears under the Reports node of the Database pane.
  5. To specify the custom template for the new Dashboard report, Select the Dashboard report in the Database pane,
  6. Go to the [Code (Server Events, Client Scripts and Templates)] tab on the right, scroll down to find Custom Template > Table-Specific > Dashboard -> CustomTemplate,
  7. Enter your custom template in HTML. In this example, we use a simple template:

    <div class="chart1">{{{chart1}}}</div>
    <div class="chart2">{{{chart2}}}</div>

    {{{chart1}}} and {{{chart2}}} (and so on) denotes the charts you specified in the Charts setting above. (Note that in these tags there is no spaces between "chart" and the chart number.) They will be replaced by the actual chart content during script generation.

3. ASP.NET Script Generation

Go to the [Generate] tab, click the [Generate] button and ASP.NET Report Maker will generate the ASP.NET scripts automatically.

4. Running the ASP.NET Application

Browse the generated site, go to "Dashboard 1" report to see the result.

Click on the chart to go to the original report where the chart is from.





 ©2007-2016 e.World Technology Ltd. All rights reserved.