In the current trend of big data, data visualization has become an interactive display mode that everyone admires. And dashboards are widely used to display business performance in enterprises. If we can understand and master this technology earlier, I believe it will be very helpful for our career.

So how can we create a good dashboard, especially for beginners?

The picture below shows the characteristics of the excellent dashboard that Stephen Few listed in the Dashboard Graphic Design Competition in 2012.

According to the above scoring criteria, how many points can you achieve in your dashboard design?

If you want a perfect presentation of dashboard, you need the technicians, UI designers, and business people to coordinate the work. But for newbies to data visualization, we can also make cool dashboards ourselves with the right data visualization tool. If some of you have read my posts, you may find that I have written many guides to data visualization and dashboards. Last time I shared a tutorial to teach you how to make a sales dashboard. Some readers told me that the dashboard production tutorial is a little difficult for beginners, because that sales dashboard is relatively advanced.

Therefore, today I will give a more detailed tutorial on creating a great dashboard for beginners. I will write down every step, and I bet that no one’s tutorial is more comprehensive than mine.

Now, let’s get started!

1. Effect display

This time I plan to create a simple salesperson performance dashboard. The picture above is a demonstration of the final effect. We can view the total sales, the sales rankings of each salesperson, and the salesperson’s order ranking. In this dashboard, I will also implement the interactive function of charts, as shown below. That is viewers can click on the chart for more information.

2. Prepare a data visualization tool

The visualization tool I used to design the dashboard here is FineReport. Its interface is similar to Excel. Users can design great dashboards with simple drag and drop operations. It is easy for beginners to get started. And its personal version is completely free. You can download it directly from the official website.

The choice of tools affects the final result of data visualization. Users can choose the data visualization tool that suits them best according to different needs and preferences. If you are looking for more useful tools, you can refer to this article 9 Data Visualization Tools That You Cannot Miss in 2019.

3. Set dashboard body

After downloading FineReport, open the Designer interface. 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:

4. 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. Prepare data

Datasets in FineReport are uniquely used to store the data retrieved from databases via Data Connection. Datasets are a 2D data sheets and you can directly view the fields and values in designer.

In the bottom left panel, there is a Template Dataset window listing all the available datasets. Click the button + to add a new dataset.

Then we can write the SQL statement.

Here we use SQL statements to create 3 datasets that indicate the sales performance from different perspectives. (In this dashboard, we use FineReport’s built-in dataset. FineReport also supports importing data from a variety of databases.）

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

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

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

6. Edit components

6.1 Line chart — trend

Line charts well represents 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 implies the performance indicator, you can disable legend:

6.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 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.

6.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 the 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.

6.4 Button — title

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

7. Preview and interact with charts

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

Well, the salesperson performance dashboard has been completed. I hope this tutorial will be helpful to you. If you want to make a more advanced dashboard, you can read this article: A Step-by-Step Guide to Making Sales Dashboards.

Follow FineReport Reporting Software on Facebook to know more about data visualization!

You might also be interested in…

Top 16 Types of Chart in Data Visualization

A Beginner’s Guide to Business Dashboards

6 Key Skills That Data Analysts Need to Master