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:

Line Chart - trend
Pie Chart - proportion
Column Chart - comparison
Button - title
User Interaction - sort, export to image, full screen

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

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.

Now, let’s get started!

Step 1: Set dashboard body

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

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:

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:

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:

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

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

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:

Category in line charts can be seen as each label along the x-axis. It determines the way to group data.
Series corresponds to one line. If you have other performance indicators such as total cost, you can add the field to create another series.

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:

Define chart title as Annual Total Sales:

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

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:

Category corresponds to one single pie, so one pie will be generated for each year.
Series corresponds to each slice in the pie, so the data are filtered based on series.

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.

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

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

The series names are displayed using legend instead of the label because there are multiple pies for different years yet all the pies share the same series names.

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:

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:

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:

Step 5: Preview and interact with charts

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

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/)