Range area chart

1. Overview

1.1 Application scenarios

Range area chart is used to display continuous data, which can well represent trends, accumulations, reductions, and changes .

For example: the number of visits and bounces of a given webpage, and the trend of changes in the number of non-bounces in the range outlined by two lines, as shown in the following figure:

1.2 Basic requirements

Basic requirements for range area chart:

1.3 Chart features

Advantages: It is suitable for showing the change trend of two continuous variables in the same interval of the same classification dimension.

Disadvantages: It is not suitable for displaying multiple classification data.

2. Example

2.1 Create component

1) Click "Dashboard" Tab, select "New Dashboard". Click "OK". As shown below:

2) Click "Add component", choose "Access stastical fact table" and click "OK". As shown below:

3) Drag the field "Statistics date" under the dimension of the area to be analyzed into the horizontal axis, and drag the field "Visits" and "Bounces" under the indicator into the vertical axis, as shown in the following figure:

4) Select "Range Area Chart" under chart type. As shown below:

Note: There are at least 1 dimension and 2 indicator fields in the horizontal and vertical in the range area, otherwise the range area chart under the chart type will be grayed out and cannot be clicked.  

5) Then the range area chart is created successfully. After selecting the chart type, the Graphic Properties are automatically switched to area and all dimension fields are placed on the "horizontal axis", all indicator fields are placed on the "vertical axis". And stacking is turned on, the vertical axis enables indicator aggregation. The color corresponding to the first indicator in the "color" bar is set to "opacity" to 40%, and the "effect" of all colors is turned off. As shown below:

2.2 Graphic Properties settings

Click the "color" column to set the displayed color, as shown in the figure below:

For details, please refer to: Graphic Properties-Color  .

At the same time, you can set tag, prompt, fine-grained, etc. For details, please refer to: Graphic Properties  .

2.3 Component style settings

Select "component style", click "axis" and select line type as "Dotted Line", as shown in the figure below:

You can also set the legend, grid lines, background, adaptive display, etc. For details, please refer to: Chart Component Style 

2.4 Analysis area field settings

2.4.1 Dimension field settings

1) Click the drop-down box of "Statistical date" field and select "Year Month". As shown below:

2) Click the drop-down box of "Statistical date" field again, select "Set the Category Axis" and cancel "Display axis", as shown in the figure below:

2.4.2 Indicator field settings

Click the drop-down box in the field of "Visits" and "Bounces", select "Set the value axis (left-value axis)", and cancel "Display axis label", as shown in the figure below:

3. Effect preview

3.1 PC terminal

Select the corresponding dashboard, click "Preview Dashboard". The chart is as shown in the figure below:

3.2 Mobile