Chart attributes

1. Overview

1.1 version

1.2 Application scenarios

When visualizing data, we hope to express the data intuitively with the graphic properties(color, shape, size, etc.) of geometric objects, which can be realized in "graphic properties" in FineBI.

1.3 Feature introduction

When the chart has multiple indicators, "All" and the indicator name will appear under "Graphic Properties". As shown below:

• The graphic properties set in "All" are effective for all indicators, that is, they are effective for "AMOUNT" and "PAID" at the same time.

• The graphic attributes set in "AMOUNT" are only valid for the index field "AMOUNT", and not for "PAID".

2. Color

2.1 Set the color of the chart

For example, if you want to set the column of the column chart to orange, you can click on the color setting and select orange, as shown in the following figure:

2.2 Use color to distinguish dimensions

Drag the dimension field into the color bar to achieve.

1) Use colors to distinguish the columns of "SHIPPORT", you can drag the dimension field "SHIPPORT" into the color bar. As shown below:

Each shipport has different colors, and a legend is automatically generated on the right side of the chart.

2) Click on the color bar to customize the color scheme, effect, opacity, and border settings, as shown in the figure below:

2.3 Turn on the effect to set the gradient

Column chart, pie chart, area chart and funnel chart can directly set the gradient effect.

Note: When the effect button is grayed out, the gradient effect will not take effect.

• Take the column chart as an example, it will produce a linear gradient effect after opening, as shown in the following figure:

• Take the area chart as an example. After it is turned on, a gradient effect from the highest value to the x-axis is produced, as shown in the following figure:

Note: When the opacity button is grayed out after the gradient is turned on, it means that the opacity setting is not effective.

2.4 Drag the field to set the gradient

Drag the indicator field in the color bar to realize the gradient of the graph according to the indicator size.

Drag "AMOUNT" into the color bar to distinguish colors based on the value of the indicator "AMOUNT". "A" with the smallest value has the lightest color. As shown below:

Click on the color bar to customize the gradient type, gradient scheme, gradient interval, effect, opacity, and border according to the numerical value. According to the type of gradient, it is divided into continuous gradient and area gradient.

2.4.1 Continuous gradient

Set a continuous gradient, the effect is as shown in the figure below:

2.4.2 Area gradient

Area gradient, set the gradient effect from green to orange. Results as shown below:

2.5 Column chart stacking effect

Drag "PAYMETHOD" into the color bar, and turn on the indicator "AMOUNT" to stack, then the columns in the large area can be divided into two parts: credit and visa. As shown below:

The same click on the color bar can also customize the color scheme, effect, opacity, and border settings.

3. Size

The size attribute is to set the size of the element in the component. Area chart, pie chart, and filled map do not support this attribute, and all other chart types are supported.

3.1 Resize graphics

Take the column chart and line chart as examples:

• Column chart

Click on the size bar to adjust the column width and rounded angle of the column chart, as shown in the figure below:

• Line chart

Click the size bar to adjust the line width of the line graph, as shown in the figure below:

3.2 Drag the indicator field

Drag the indicator into the size bar, you can map the size of the graph according to the size of the indicator value.

Take the scatter chart as an example. Drag "AMOUNT" into the size column. The larger the AMOUNT value, the larger the dot size. It is intuitively observed that "C" has the largest credit value. As shown below:

4. Tag

1) Drag the field into the tag bar, you can display text notes on the chart, click on the settings, you can proceed to the tag display effect. As shown below:

Note: If the calculation indicator is an aggregate function, drag the dimension field to the label to participate in the calculation.

5. Prompt

The default prompt for the fields added in the analysis area and chart attributes. Drag the remaining fields into the prompt bar to add prompt content.

Click "Content Format" to set the text content and style. It also supports the setting of the "Background Color". After dragging in the "PAID", click the content format to select the corresponding field. As shown below:

The effect after setting is as shown in the figure below:

Note: If the graph properties area has other dimension fields that are different from those on the horizontal and vertical axis, at this time, check "Show all tips under dimensions" and it will be displayed as "*", as shown in the following figure:

6. Fine-grained

6.1 Definition

Fine-grained: Fine-grained indicates the degree of refinement of the data.

For example, the boss wants to know the sales for each month in 2019. If you give him total sales data for 2019, this data is too rough for him; if you give him detailed sales data for each order in 2019, this data is too detailed. Here, "too coarse" and "too fine" refer to the fine-grained data.

6.2 Example

The pie chart of "SHIPPORT" and "AMOUNT" is shown in the figure below. Drag "PAYMETHOD" into the fine-grained column, SHIPPORT displays two payment methods: credit and visa, as shown in the figure below:

7. Shape

7.1 Modify the shape

Take the aggregate bubble chart as an example, click on the shape bar to change the shape of the bubble, as shown in the figure below:

7.2 Drag the dimension field

Take a scatter chart as an example, drag the "SHIPPORT" into the shape bar, and you can use the shape to distinguish the sales of each shipport.

It can be seen that the "C" in the "US Mail" is the highest. As shown below:

7.3 Drag the indicator field

Drag "PAID" into the shape bar to display different shapes according to the value of "PAID".

Click the shape setting, you can customize the shape type and interval, set the condition and shape, as shown in the figure below:

The effect is as shown below:

8. Connection

8.1 Scope of application

8.2 Examples

8.2.1 Line chart

8.2.2 Radar chart

8.2.3 Area chart

9. Radius

A peculiar property of the pie chart, the radius refers to the radius of the pie chart.

9.1 Adjust radius and internal diameter

Click the radius bar to adjust the radius and internal diameter of the pie chart, as shown in the figure below:

"Radius" can directly adjust the size of the pie chart, and "Internal Diameter" can adjust the width of the circle of the pie chart (that is, the size of the middle internal diameter).

9.2 Drag the indicator field

Drag the indicator field into the radius to convert it into a rose chart. The rose chart uses the radius to show the difference in data.

I want to show the AMOUNT status of each SHIPTMETHOD, but when the data is similar, it is difficult to see the difference. Drag "AMOUNT" into the radius, choose not to share the radius, and map the value of AMOUNT to the radius of the pie chart, you can easily see that the UPS is the highest. As shown below:

9.3 Drag the dimension field

Drag the dimension field "SHIPMETHOD" into the radius. Each sector with a different radius represents a "SHIPMETHOD", and AMOUNT is still mapped on the angle of radians. As shown below:

10. Angle

Angle is a unique attribute of pie chart. For the radian size of each sector of the pie chart, drag the indicator field to the angle bar to map the size of the indicator value to the angle size.

"UPS" has the highest amount, so the higher the proportion of angles in the pie chart. As shown below:

11. Thermal color

The thermal color is a unique attribute of the thermal area map and the thermal map. Click settings to change the gradient scheme and opacity of the thermal color.

Drag the indicator "Sales_volume" into the thermal color bar, and then click the thermal color setting to set the gradient scheme, gradient interval and opacity, and compare the heat value of each region. As shown below:

12. Text

Text property is unique property of indicator card and word cloud. Click the text field to change the content format, as shown in the figure below: