The Frist Dashboard
By the end of this tutorial, you will create an interactive dashboard which tells you about a company's sales performance:
You can interact with the charts to perform some simple analysis:
Create a New Template and Drag Components
I. Overview
1) Dashboards: a report design model suitable for display on large screens and mobile terminals. Dashboards allow you to add components such as report blocks, charts and widgets, and combine them flexible by means of absolute layout, adaptive layout, label layout, etc.
2) Compared to common reports, dashboards can better support big data and enable local refresh of components, inter-component linkage analysis and so forth.
II. Create a new dashboard
1. Create a new template
In the top toolbar, click [File]> [New Dashboard].
2. Dashboard canvas and layout
1) You will see an empty canvas. In the right-hand pane, you can see a node named body, which represents the whole canvas, in the upper-right component tree. In the Properties tag below, the layout type is by default adaptive layout.
2) You can input width and length (in pixel) at the bottom and then press Enter to adjust the size of the canvas. Set the canvas to the default size, i.e., 960*540 pixel.
III. Drag components into the canvas
1. Introduction to components
1) You may choose components you need in the top toolbar. In this section, you will use chart and widget.
2) You can click the lower-right arrow in the chart or widget area to display all component options.
3) In the adaptive layout mode, when a component is dragged into the canvas, the system will automatically find a proper position for insertion according to where your mouse pointer is.
2. Drag a line chart into the canvas
1) Click on the line chart icon in the chart area.
2) Drag the icon into the canvas and the line chart will spread over the canvas.
3. Drag a pie chart into the canvas
1) Click on the pie chart icon.
2) When dragging the icon into the canvas, do not release the mouse. Hover the mouse over the right side of the line chart and when the blue area (the position for insertion judged by the system according to the current location of the mouse) appears on the right side of line chart, release the mouse.
4. Drag a column chart into the canvas
1) Click on the column chart icon.
2) When dragging the icon into the canvas, do not release the mouse. Hover the mouse over the bottom of the canvas and when the blue area appears below the line chart and the pie chart, release the mouse.
5. Drag a button widget into the canvas
1) Click on the button icon.
2) When dragging the icon into the canvas, do not release the mouse. Hover the mouse over the top of the canvas and when the blue area appears above the line chart and the pie chart, release the mouse.
6. Adjust component layout
You can click a component and then adjust the size of the component. Meanwhile, other components will be automatically adapted to fill the canvas.
7. Component directory tree
1) All components dragged into the canvas are displayed under the node named body in the component tree. Hover the mouse over a component name to preview the effect of the component.
2) Select a component in the canvas, and the corresponding component name in the component tree will also be selected at the same time.
3) Select the line chart, and you can modify the component name in the Properties tag at the bottom of the right-hand pane and press Enter to effect the modification.
IV. Save the dashboard
1. Save the template
Click the save button in the top toolbar. In the pop-up window, click Save to save the dashboard under the current default working path.
2. Template location
The saved dashboard will be displayed in the upper-left directory tree.
Design the Dashboard
I. Overview
In the previous section, we have introduced how to drag charts and widgets into canvas. In this section, we will introduce how to set chart data sources and edit widget properties.
II. Create new datasets
Use SQL statements to create three datasets as the data sources for three charts.
1. Create the first dataset
1) Name the dataset [total sales] and type the following SQL statement:
SELECT substr(SIGNDATE,1,4) AS year,
SUM(PRICE*QUANTITY) AS total_sales
FROM ORDERS, ORDERSDETAIL, EMPLOYEE
WHERE ORDERS.ORDERID = ORDERSDETAIL.ORDERID
AND ORDERS.EMPID = EMPLOYEE.EMPID
GROUP BY year
ORDER BY year
2. Create the second dataset
1) Name the dataset [orders by employee] and type the following SQL statement:
SELECT EMPNAME, SUBSTR(SIGNDATE,1,4) AS year,
COUNT(ORDERS.EMPID) AS total_orders
FROM ORDERS,EMPLOYEE
WHERE ORDERS.EMPID = EMPLOYEE.EMPID
GROUP BY EMPNAME, year
ORDER BY total_orders DESC
2) Click the Preview icon to view the annual total orders made by each salesperson, which are listed in descending order:
3. Create the third dataset
1) Name the dataset [sales by employee] and type the following SQL statement:
SELECT EMPNAME, SUBSTR(SIGNDATE,1,4) AS year,
SUM(price*quantity) AS total_sales
FROM ORDERS, ORDERSDETAIL, EMPLOYEE
WHERE ORDERS.ORDERID = ORDERSDETAIL.ORDERID AND ORDERS.EMPID = EMPLOYEE.EMPID
GROUP BY EMPNAME, year
ORDER BY total_sales DESC
2) Click the Preview icon to view the annual total sales of each salesperson, which are listed in descending order:
III. Set chart data sources
Different types of charts are used for different purposes and can help us dig out potential information behind the displayed data from different angles. Before configuring settings for chart data sources, you should define the purposes and corresponding datasets to be used:
Chart type | Purpose | dataset (used in this tutorial |
Line chart | Tendency: is it an increasing or decreasing trend? | total sales |
Pie chart | Proportion: does it take a large place? | orders by employee |
Column chart | Comparison: which one is better? | sales by employee |
1. Line chart data
1) Take the dashboard we introduced in the previous section for demonstration. Hover the mouse over the line chart and click the [Edit] button. In the right-hand pane, click the [Data] tab.
2) Select [totals sales] in the drop-down list of [Dataset] and select [year] in the drop-down list of [Category].
3) Click the drop-down list of [Series Name Enable] and select [Enable Field Name].
4) Click the drop-down list below the field name and set the field name to the data column [total_sales]. Click the input box below the [Series Name] and change the underscore in [total_sales] to a space.
2. Pie chart data
1) Hover the mouse over the pie chart and click [Edit].
2）In the right-hand pane, click the [Data] tab. Select [orders by employee] in the drop-down list of [Dataset] and select [year] in the drop-down list of [Category].
3) The [Series Name Enable] remains to be [Enable Field Value]. Select [EMPNAME] in the drop-down list of [Series Name] and select [total_orders] in the drop-down list of [Value].
4) In [Data Filter] section, click the [Series] tab, check [only use front records], and set the [Records Number] to 20. [Merge residual items as others] is checked by default.
3. Column chart data
1) Hover the mouse over the pie chart and click [Edit].
2) In the right-hand pane, click the [Data] tab. Select [sales by employee] in the drop-down list of [Dataset] and select [EMPNAME] in the drop-down list of [Category].
3) The [Series Name Enable] remains to be [Enable Field Value]. Select [year] in the drop-down list of [Series Name] and select [total_sales] in the drop-down list of [Value].
4) In [Data Filter] section, click the [Category] tab, check [only use front records], and set the [Records Number] to 20. [Merge residual items as others] is checked by default.
IV. Edit widget properties
Click the Button widget in the canvas. In the right-hand pane, click the [Properties] tab to edit widget properties. Input the title of the dashboard in [Widget Name] box.
The modifications will be updated in the canvas in a real time.
V. Preview the dashboard
Click the Preview icon in the top toolbar.
Each type of chart has a default style and is comprised of such components as chart titles, number axes, legends, series colors and data point tips. Data are display on these chart components. Each type of chart can be rendered within the browser.
Beautify the Dashboard
I. Overview
In the previous section, you have made an interactive dashboard by setting sources of chart data and editing widget style. However, the default style is slightly rough and further, you can beautify your dashboard by modifying chart, widget and canvas styles.
II. Modify line chart style
1. Enter the editing mode
1) Hover the mouse over the line chart and click [Edit] to enter the chart editing mode.
2) In the right-hand pane, click the [Style] tab.
2. Modify the title
1) Click [Title], maintain [Show Title] checked and type a title for the line chart in the text field after [Text].
2) The modification will be directly shown on the canvas.
3. Modify the legend
Click [Legend] and uncheck [Legend is Visible]. This is because the line chart has only one series and data in this series has been expressed by the title.
4. Modify series color
1) Click [Series]. Click the drop-down box after Color and choose [Custom].
2) You will see a color palette. Click on the upper-left grid cell to bring out the Select Color window, where you can modify the color. You can directly choose from sample colors.
3) Alternatively, click [Custom] in the window to customize a color by adjusting the hue and grey level.
4) Or you can define the color directly through a hexadecimal color code or the color dropper. Maintain the color code as #194f97 and click [OK].
5. Modify marker points
Scroll the mouse down to [Marker]. Click the drop-down box after [Type] and choose circle. Click the down arrow after [Radius] to reduce the radius.
6. Preview modifications
1) Modifications on the canvas
2) The effect in the browser window after clicking Preview
III. Modify pie chart style
1. Enter the editing mode
Hover the mouse over the pie chart and click [Edit] to enter the chart editing mode.
2. Modify the title
Click [Style] > [Title], maintain [Show Title] checked, click on the formula icon after [Text], type a chart title enclosed in quotes and click [OK].
3. Modify the legend
Click [Legend], maintain [Legend is Visible] checked and choose the second option after [Position], so that the legend is shown below the chart.
4. Modify labels
1) Click [Label] and check [use label].
2) Under [Text], uncheck [Value] and check [Percentage].
3) Under [Layout], choose [Out Pie]. Thus, data labels will appear outside the pie chart, in the form of percentages.
5. Modify series
1) Click [Series], click the drop-down box after [Color] and choose [Custom]. Click on the first six grid cells in the first line in sequence to modify the colors.
2) It is recommended to set colors by inputting the following color codes:
f58d71 | fed35b | 8692ee | 73c5e0 | 7a99ee | 625ba1 |
6. Modify the radius of the pie chart
Under [Style], modify the inner radius to 70, so that it accounts for 70% of the pie chart radius to form a doughnut chart.
7. Preview modifications
1) Modifications on the canvas
2) The effect in the browser window after clicking Preview
IV. Modify column chart style
1. Enter the editing mode
Hover the mouse over the column chart and click [Edit] to enter the chart editing mode.
2. Modify the title
Click [Style] > [Title], maintain [Show Title] checked, click on the formula icon after [Text], type a chart title enclosed in quotes and click [OK].
3. Modify the legend
Click [Legend], maintain [Legend is Visible] checked and choose the second option after [Position], so that the legend is shown below the chart.
4. Modify series
1) Click [Series], click the drop-down box after [Color] and choose [Custom]. Click on the first two grid cells in the first line in sequence to modify the colors.
2) It is recommended to set colors by inputting the following color codes (please do not copy the symbol #)
#7266e8 | #555555 |
5. Modify labels
Click [Axis] > [X Axis]. Scroll the mouse and input -25 after [Rotation] under [Label], so that labels on the longer X axis can all be displayed without disturbing each other.
6. Preview modifications
1) Modifications on the canvas
2) Click Preview to interact with the column chart in the browser window. Select some columns to zoom in on them. Click on the Refresh icon to view all columns.
V. Modify button widget style
1. Modify background
1) Click a button widget on the canvas to enter the widget editing mode. In the right-hand pane, click the [Properties] tab and then [Custom] after [BG].
2) Click the [...] button after [Initial Background] and in the pop-up BG setting window, click [Transparent] and then [OK].
2. Modify text style
Click the drop-down box after [Font] and set the font to .SF NS Text. Click the drop-down box below [Font] and set the font size to 20.
3. Preview modifications
VI. Modify canvas style
1. Enter the editing mode
1) Click body in the upper-right component directory. Under the [Properties] tab, click the button after [Style].
2) You will see the Style setting panel.
2. Modify background color
1) In the Style setting panel, click the drop-down box and choose [Color].
2) Click [More Color…]. In the pop-up Select Color window, click [Custom], input the color code #d4e3f7 (do not copy the symbol #) and click [OK].
3) The Style setting panel will display the preview effect. Click [OK].
VII. View the final effect
1. Click Preview
You may once again adjust the size of a component to further beautify the layout.
2. Interact with the dashboard
You can click on the toolbar icon at the upper right corner of each chart to sort, save and zoom in on the chart.
