Overview
Version
| FineBI Version | Functional Change |
|---|---|
| 6.0 | - |
Application Scenario
After column charts and line charts, two common types of charts are combined, the system can display not only the data sizes comparison by column charts, but also the change trends of data by line charts.
For example, you can use a column chart and a line chart to display the gross profit and its MoM growth rate as well as their change trends, as shown in the following figure.
Implementation Method
When you drag multiple indicator fields into the vertical axis in Custom Chart, the chart type can be set separately for each indicator. You can set the shape to Column for one indicator field and Line for the other, as shown in the following figure.
Note:1. The graphic properties set in All apply to all indicators, while those set in an individual indicator only apply to that indicator.
2. For details about graphic property setting, see Graphic Property.
Basic Requirement
| Chart Effect | Dimension Field | Indicator Field |
|---|---|---|
| Column Chart - Line Chart | 1 | 2 |
Chart Feature
1. Advantage
Rich information: Data of different indicators can be displayed together to provide decision-makers with more insights.
Space-saving: More report space is freed up to display other data.
2. Disadvantage
Data congestion: Too much data specified by multiple indicators in a combination chart makes the chart too congested.
Information redundancy: The more the indicators are, the less able the decision-makers are to grasp the main information conveyed by the data.
Example
Sample data:Sales Details.xlsx
Data Preparation
Create an analysis subject and add the dataset Sales Details. For details, see Get Started with FineBI.
Calculate the gross profit. Click Formula Column and input the gross profit calculation formula: Gross Profit = Sales Amount - Cost Amount, as shown in the following figure.
Component Creation
Click Component in the lower left corner.
Select Custom Chart in Chart Type.
Drag Date (YYYY-MM-DD) from the left to-be-analyzed area into the horizontal axis in the analysis area, and drag Gross Profit into the vertical axis twice, as shown in the following figure.
Click the drop-down icon next to Date (YYYY-MM-DD) in the horizontal axis and select Year-Month, as shown in the following figure.
Calculate the MoM growth rate of Gross Profit.
Perform quick calculation. Click the drop-down icon next to Gross Profit and choose Quick Calculation > Comparison with Same Period/Comparison with Previous Period > Growth Rate of Comparison with Previous Period.
Set the value axis. After quick calculation, click the drop-down icon next to the field in the last step and select Set Value Axis (Left-value Axis). Set Shared Axis to Right-value Axis and click OK.
Rename the field. Click the drop-down icon and select Set Display Name.
The explanation for setting two value axes:
Two indicators sharing the same left value axis can result in a poor display effect when large data differences exist.
Ensure the indicator is displayed in Chart Indicator Juxtaposition and Aggregation to set two value axes.
Choose Graphic Property > Gross Profit and select Line from the drop-down list, as shown in the following figure.
Chart Beautification
Label Setting
1. Setting the Label for the Gross Profit Field
Drag Gross Profit from the left to-be-analyzed area onto the Label bar under Graphic Property > Gross Profit and set Value Format, as shown in the following figure.
2. Setting the Label for the MoM Gross Profit Field
Drag Gross Profit from the left to-be-analyzed area onto the Label bar under Graphic Property > MoM Gross Profit. Click the drop-down icon and choose Quick Calculation > Comparison with Same Period/Comparison with Previous Period > Growth Rate of Comparison with Previous Period to perform quick calculation.
Color Setting
1. Copy the MoM Gross Profit field on the Label bar.
2. Set the gradient interval.
Drag the copied MoM Gross Profit field onto the Color bar. Set Gradient Type to Area Gradient, set Gradient Interval to Custom, and set Number of Intervals to 2. Set the color to red when the value is less than 0, and to blue when the value equals to or is greater than 0, as shown in the following figure.
Legend Setting
Corresponding legends will be generated when fields exist in Color/Size/Shape/Thermal Color/Radius in Graphic Property. The Indicator Name field is added under All > Color by default in this example, generating its corresponding legend. If you do not want to display the legend, you can disable it under Component Style > Legend, as shown in the following figure.
Dashboard Creation
Click the Add Dashboard button at the bottom of the editing page in the analysis subject.
Drag the component into the dashboard on the dashboard editing page, as shown in the following figure.
Select Edit Title from the drop-down list, set Font Style to Custom, enter the title as Column Chart - Line Chart, and click OK.
Effect Display
PC
Mobile Terminal
