Chart Block

Version

Application Scenario

During FRM report creation, charts are often used as a major part of data visualization on large screens.

You can drag independent chart blocks into the body directly or insert charts into cells of report blocks. However, you cannot insert charts as floating elements.

This document briefly introduces the use of chart blocks and related notes.

Chart Block Adding

1. Choose File > Add Other Template > New Dashboard in the upper left corner of the designer, select Blank Dashboard in the pop-up dialogue box, and click OK to enter the created template.

2. Drag the chart blocks into the body directly. The names of the dragged-in chart blocks are set to chart + number (such as chart0, chart1, and chart2) by default. The number starts from 0 and increases by one for each new chart block.

Component Style

The following figure shows the default attributes of chart block components. For details about specific style setting, see Component Style.

For details about chart content setting, such as chart data, style, and special effects, see Chart Introduction.

Inconsistent Chart Sizes Due to Padding

Problem

The two chart blocks are of the same size under Adaptive Layout of the body, as shown in the following figure.

During the PC preview, the pie charts chart1 and chart2 are of the same size. However, during preview on mobile terminals or the HTML5 terminal, the two pie charts are of different sizes, as shown in the following figure.

Cause

The reason lies in the left padding set for the body. The left padding will be included in the width of the adjacent component in the designer under Adaptive Layout.

Solution

Three solutions are available:

1. You can set the left padding of the template to 0 and resize chart1 and chart2 to the same height and width.

2. Since both chart1 and chart2 are pie charts, you can set their radii to the same fixed value under Style > Series > Radius Setting, as shown in the following figure.

3. You can ensure that the sum of the left padding and the width of the adjacent component equals the width of the component expected to have the same width by adjusting the component size. In other words, the sum of the left padding and the width of chart1 equals the width of chart2.

After modification, the two chart blocks are of the same size when previewed on the DataAnalyst app and the HTML5 terminal, as shown in the following figure.