Set Flashing Animation at Maximum Value of the Line Chart

1.1 Application scenarios

Sometimes users hope that certain characteristic mark points can be displayed flashing. In the example, the mark points corresponding to the maximum and minimum values of the line graph are set to flash, as shown in the following figure:

1.2 Implementation ideas

The chart setting condition display is realized by the combination of the three condition attributes of marking point, color matching and flashing animation.

Note: This method supports both general reports and decision reports.

2.1 Prepare data

Create a new ordinary report, add the built-in dataset weather, and record the daily temperature value within a month, as shown in the following figure:

2.2 Insert chart

Merge cells A1~I22, and insert a line chart into the merged area, as shown in the figure below:

2.3 Bind chart data

Select the line chart, select the data in the chart properties panel on the right, and set as shown in the figure below:

2.4 Set chart style

1) Select Style> Title and set the title content, as shown in the figure below:

2) Choose Style>Axis>X Axis, and set the axis style as follows:

3) Select Style>Axis>Y Axis, the value definition and axis style settings are as follows:

2.5 Setting condition attributes

2.5.1 Set maximum value

1) In the chart property panel, click Special Effect> Condition Display, add a new Condition Attribute1, set 3 attribute Marker, Flashing Animation, and Match Color, so that the value is equal to the formula max(weather.select(value)), as shown in the following figure:

Note: The above formula is used to filter the maximum value.

2) The above Marker, Flashing Animation, and Match Color settings are as follows:

Note: When the motion cycle is set to 0 seconds, there is no animation effect. According to the design, the default cycle time of different types of chart dynamic effects is inconsistent.

2.5.2 Minimum setting

1) In the chart property panel, click Special Effect> Condition Display, add a new Condition Attribute2, set 3 attribute Marker, Flashing Animation, Match Color, and make the value equal to the formula min(weather.select(value)), as shown in the following figure:

Note: The above formula is used to filter the minimum value.

2) The above Marker, Flashing Animation, and Match Color settings are as follows:

2.6 Effect preview

1) PC terminal

Save the template, click the [Page Preview], the effect is as shown in the figure below:

2) Mobile

Can refer to the completed template：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\NewLineChart\FlashingLineChart.cpt

Click to download template：

FlashingLineChart.cpt