Dashboard Getting Started Example

For online video learning, please see: Examples of Getting Started with Decision Reports.

This article explains an introductory example of a dashboard. It is hoped that users can understand the design ideas of the dashboard and master the design steps of the dashboard after reading the sample steps. The example will eventually complete a regional sales analysis pane, the components used include parameter pane, widgets, report blocks, and chart blocks. Effect is as shown below:

1. New decision report

Click File> New Dashboard on the menu bar to create a blank dashboard. As shown below:

2. Create a new dataset

Create a new dataset ds1, the SQL statement is: SELECT * FROM sales WHERE area='${area}', a dataset parameter "area" is defined in the SQL statement.

3. Adjust report attributes

1) Set the size of the main body of the report design to 800 pixels x 500 pixels. The size of the main body of the report is not fixed, and the user can adjust it according to the actual scene. As shown below:

2) Select body in the component list and change the layout type to Absolute layout in the Attributes pane in the lower right corner, and the Zooming Mode to Area Fixed. There are four body layout methods, and users can adjust them according to actual application scenarios. Here, because there are fewer components and there is no overlap between them, select Absolute Layout>Area Fixed. As shown below:

4. Drag and drop components

1)Drag the component parameter pane, report block, pie chart, and column chart into the main body of the report design according to the layout style shown in the figure below

2)Select the parameter pane, the upper right corner of the widget setting pane will display the parameters without added widgets, click on the region or click Add All, the default widgets of the parameters will be added to the parameter pane. As shown below:

3)Set the custom widget to drop-down box widget, and bind the widget to the region field of the Sale_Volumn table at Attributes>Data Dictionary. As shown below:

Note: When making a dashboard, the adaptive effect of  trying to drag in the chart component directly is better than inserting the chart in the report block.

5. Design components

1)Report block

• Click the edit button of the report block to enter the report block and set the content and attributes of the report block.

• The design method in the report block is the same as the design method of regular reports. Design the report style as shown in the figure below. After completion, click on the form to return to the dashboard design interface.

2)Pie Chart

• Click the edit button of the pie chart to enter the pie chart block and set the content and attributes of the pie chart. As shown below:

• Click Data in the component attributes at the bottom right to bind data to the pie chart. As shown in the figure below:

• Click Style in the component attributes at the bottom right, and set the title of the pie chart to Product Type Sales Statistics. As shown below:

3)Column chart

• Click the edit button of the column chart to enter the column chart block and set the content and attributes of the column chart. As shown below:

• Click Data in the component attributes at the bottom right to bind data to the column chart. As shown below:

3) Click Style in the component attributes at the bottom right, and set the title of the column chart to Salesperson Product Sales Statistics. As shown below:

6. Effect preview

1)PC

Save the report and click PC preview, the effect is as shown in the figure below:

2)Mobile

The effect of the mobile terminal and HTML5 is shown in the figure below. For the method of viewing the report on the mobile terminal, please refer to Preview Mobile Reports

The completed template can be found at:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Dashboard_Getting_Started_Example

Click to download the template:

Dashboard_Getting_Started_Example.frm