FineReport Community

Title: The Simplest FineReport Dashboard Tutorial for Beginners! [Print this page]

Author: Lewis    Time: 2020-6-19 17:08
Title: The Simplest FineReport Dashboard Tutorial for Beginners!
Edited by Lewis at 2020-6-19 17:37

Are you attracted by various cool visualizations made with FineReport but don’t know how you can make similar effects yourself?  

If you’re new to FineReport and want to quickly get started with data visualization, follow my post to make a basic dashboard!

You will learn in this step-by-step guide:

First of all, let me show you the final visual effect.  

Chart Linkage.gif

This is a simple salesperson performance dashboard. You can view the total sales, the sales rankings of each salesperson, and the salesperson’s order ranking. In this dashboard, I also implement the interactive function of charts, as shown below.

Click the toolbar in the upper right corner of each chart, you can perform sorting, full-screen display, export to image and other operations.

0256.gif

Now, let’s get started!

Step 1: Set dashboard body

Click File > New Dashboard to create a new dashboard template:

3.png

In the widget list, click body and set the Layout type as Adaptive layout and Component Scale as Bidirectional adaptive. You can also customize the dashboard background using color:

4.png

Step 2: Drag and arrange components

Components can be added to the body and arranged via drag-and-drop operations. With adaptive layout, the size and position of each component will automatically change corresponding to other components.

Let's drag a line chart, a pie chart and a column chart to display data, plus a button as the dashboard title:

5.gif

Step 3: Prepare data

Using SQL statements to create 3 datasets that indicate the sales performance from different perspectives.

Dataset orders by employee summarizes the annual total orders of each employee in descending order:

1.png

Dataset sales by employee summarizes the annual total sales of each employee in descending order:

2.png

Dataset total sales summarizes the annual total sales of the company:

3.png


Step 4: Edit components

4.1 Line chart - trend

Line charts well represent the trends behind data, for instance, the changing trend of annual sales. Double-click the line chart to begin editing.

In Data tab, set the Data Source using dataset total sales. Define Category using year and Series using total_sales:

6.png


Switch to Style > Series, and customize the color of each series by clicking each colored square in order from left to right and top to bottom. Add markers to represent data points on lines:

7.png

Define chart title as Annual Total Sales:

8.png

Because there is only one series and the title has already implied the performance indicator, you can disable legend:

9.png

4.2 Pie chart - proportion

Pie charts can effectively show the composition and corresponding proportion. You can use it to display the contribution of each salesman to annual orders.

Define the Dataset using orders by employee. Use year as Category, EMPNAME as Series Name and total_orders as Value. If displaying the data of all employees, the pie will be divided into a large number of slices, yet the small ones are less meaningful than the large ones. Therefore, you can retain the top 5 order contributors and merge others as one slice in Data Filter:

10.png


In Style > Series, customize the color for the 6 series. Set the inner radius as 70% to make the pie chart look like a ring.

image.png

Use labels outside pies to indicate the proportion of each slice in percentage:

image.png

Enable legend to indicate the name of each series, i.e. name of each employee:

image.png


Set the title as Ranking by Orders.

4.3 Column chart - comparison

The height of columns is a kind of intuitive measure for comparison. You can use the column chart to visualize the annual sales of each salesperson, so as to compare among people and among years.

Define the Dataset using sales by employee.

Use EMPNAME as Category, year as Series Name and total_sales as Value. Considering a large number of employees, filter the data and only display the top 20 sellers:

image.png

The x-axis can be too short to show all category names, so you can set a rotation for the axis labels to fully display them:

image.png

Display the legend at the bottom to indicate the represented year of each series, customize the color for each series and define the title as Ranking by Sales.

4.4 Button - title

Input the dashboard title after Button Name, set the background as transparent and edit the font:

image.png

Step 5: Preview and interact with charts

Click Preview to see the effects and you can interact with the charts:

0256.gif

Well, the above is the complete production process of this salesperson performance dashboard.  I hope the experience will be helpful to you.

Best Regards,

Lewis






Welcome to FineReport Community (https://community.finereport.com/) Powered by Discuz! X3.2