Chart Component Creation

Application Scenario

In most cases, you need to display the result of data analysis by charts.

Since various charts are available, how to select the right chart to convey information clearly and concisely? Charts are divided into several major categories. You can select the appropriate chart as needed.

Example Description

Examples in the document focus on introducing some of the most commonly used charts, namely KPI Card, Column Chart, Pie Chart, Line Chart, and Map, among various chart types. This document helps you learn how to create charts in FineBI.

You can download the sample data Table_Chart_Office Supply Sales-Full.xlsx.

Before creating a chart, you need to download the sample data, upload the data to FineBI, and add a component with the sample data.

For details about data uploading and component adding, see Getting Started with FineBI.

KPI Card

1. Viewing the total sales of office supplies

Select KPI Card in Chart Type and drag the Sales field into the Text bar in Graphic Property. The following figure shows the effect.

2. Table beautification

Click the Text setting icon and set the display format for the text. Click the drop-down icon of the Sales field in the analysis area, select Value Format from the drop-down list, and select Thousand as Quantity Unit. The following figure shows the effect.

Column Chart/Line Chart

Column Chart and Line Chart are mostly used for reflecting data details and trends.

1. Chart creation

Drag the required fields into the Dimension and Indicator bars, click the drop-down icon of the Signing Date field, and select Year from the drop-down list. After completing the above step, select Custom Chart in Chart Type and select the graphic type in Graphic Property. If you select Column Chart or Line Chart from the drop-down list, a column chart or line chart will be displayed in the component, as shown in the following figure.

2. Creating a column chart with multiple indicators.

Drag the Profit field into Vertical Axis. The custom chart allows you to set graphics separately for each indicator when the chart contains multiple indicators, as shown in the following figure.

If you select different graphic types for different indicators in Graphic Property, the chart becomes a combination chart. For details, see section "Combination Chart Creation."

Chart Beautification

1. Chart beautification: You can beautify the chart in Graphic Property.

Set the Color and Size separately for indicators under Graphic Property > All. Drag the corresponding fields into the Label bars under Graphic Property > Sales(Sum) and Graphic Property > Profit(Sum), respectively, and modify the value units, as shown in the following figure.

The following figure shows the effect.

2. Component beautification: You can beautify the component in Component Style, including elements such as Background, Legend, and Grid Line.

You can customize the component to suit your personal aesthetic taste. The following figure shows the effect.

For details about component style setting, see Chart Component Style.

In some cases, you may want to combine the column chart and line chart to display sales performance. You can analyze multiple indicators using the same dimension and present these indicators in the same chart. FineBI allows you to customize the display shapes of indicators.

For example, you may want to learn about the quarterly sales performance and the quarter-on-quarter sales growth rate.

Implementation method: 1. You can click the drop-down icon of the Signing Date field and select Year-Quarter from the drop-down list. 2. You can add a field and calculate the quarter-on-quarter sales growth rate.

Data Processing

You can calculate the growth rate of comparison with the previous period with one click in FineBI. Before creating a chart, you need to display the dimension and indicator fields to be analyzed in a group table.

After processing the data, you can convert the data into a chart with one click.

1. Analysis field adding: Drag the corresponding fields into the Dimension and Indicator bars. (Drag the Sales field into the Indicator bar twice.)

2. Data grouping: Click the drop-down icon of the Signing Date field and select Year-Quarter from the drop-down list.

3. Data obtaining by Quick Calculation: Click the drop-down icon of the Sales field, choose Quick Calculation > Comparison with Same Period/Comparison with Previous Period > Growth Rate of Comparison with Previous Period, and rename the indicator obtained, as shown in the following figure.

Combination Chart Creation

1. Chart switching: After you prepare the data required for the visual chart, select Custom Chart in Chart Type to create a combination chart.

2. Graphics for the combination chart setting: Click the corresponding indicators in Graphic Property of the combination chart. You can set different graphics for the chart. For example, you may want to display sales in a line chart and quarter-on-quarter sales growth rate in a column chart.

3. Value axis setting: After completing the above steps, the data is displayed disproportionately since the two indicators share the same left-value axis. In this case, click the drop-down icon of the Sales-Growth Rate of Comparison with Previous Period field and select Set Value Axis from the drop-down list. You can set Right-value Axis as Shared Axis.

Graphic Beautification

You can beautify an individual indicator or all indicators in Graphic Property.

1. To beautify the column chart, you need to choose Graphic Property > Sales-Growth Rate of Comparison with Previous Period.

a. Displaying the columns with values less than 0 in red in the column chart: Drag the Sales field into the Color bar and calculate the quarter-on-quarter sales growth rate. Click the Color setting icon to customize Interval Quantity.

b. Displaying the maximum and minimum values: Drag the Sales field into the Label bar and calculate the quarter-on-quarter sales growth rate. Click the Label setting icon and select Max/Min in Label Display to display the maximum and minimum values.

c. Setting rounded corners for columns in the column chart: Click the Size setting icon and set Rounded Corner.

2. You need to choose Graphic Property > Sales to beautify the line chart. For example, if you want to change only the graphic color, click the Color setting icon to change the color, as shown in the following figure.

3. If you do not want the line chart to be obscured by the column chart, you need to adjust the order of indicators and display the Sales indicator last for the line chart, as shown in the following figure.

Analysis Line Setting

In the chart, the sales are displayed by a fluctuating line. In addition to viewing the trend of sales through quarter-on-quarter sales growth rate, you can also add analysis lines to the chart.

Two analysis lines are available, namely Cordon and Trendline, as shown in the following figure.

Trendline: allows you to view the overall trend of the fluctuations in the line chart.

Cordon: runs parallel to the axis representing the dimension field. You can use a cordon to display the maximum, minimum, and average values of an indicator.

For details about analysis line setting, see Cordon/Trendline Setting in the Chart.

Special Display

You can add special display effects for graphics with indicators that meet specific conditions. For example, you can add special effects of Image Fill and Flashing Animation to the column with the highest sales, as shown in the following figure.

For details about special effect setting, see Special Display of Charts.

You can use a map to view the distribution of indicators across different regions.

The first step to create a map is to convert the field in the to-be-analyzed area into a geographic role.

Implementation method: 1. You can convert the Province field into a geographic role. 2. You can select Area Map in Chart Type and drag the needed fields into the horizontal and vertical axes to create a chart. The following figure shows the effect.

In this case, you can obtain a gradient area map based on sales.

For details about maps, see Introduction to Map.

Map Beautification

1. You can change the color of the created area map, as shown in the following figure.

2. You can also customize elements such as the map background and border in Component Style to beautify the map.

After reading the document, you have completed the learning of charts. In this case, you can try to recreate the dashboard, as shown in the following figure.