Chart Switch Attributes

1. Version

2. Application scenarios

In order to switch and display different charts online on the same page, we can add multiple charts to the chart type, and switch to view different charts through Button switch or Carousel switch. The expected effect is shown in the following figure:

Button switch: Click the title to switch.

Carousel Switch: Automatically rotate according to the set interval.

3. Function introduction

In the chart type, you can add multiple charts and set the switching method of the charts. In 10.0.18 and later, copying charts and moving chart order are also supported. As shown below:

• Click the Add buttonto add multiple charts. The default names areChart 2, Chart 3 and accumulate in sequence. Double-click the chart name to rename.

• Select the chart you want to copy and click the Copy button  to copy the chart.

• Select the chart you want to move, and click the Move Left or Move Right buttonto move the chart order.

• Click the setting buttonto pop up the chart switching property setting box, and you can set the switching method to Button or Carousel. As shown below:

Note: Chart switching only takes effect for the set chart index. If only the second chart is set to automatically refresh, only the second chart will perform the refresh operation.

1. Open the template

This article mainly introduces the switching method of charts. The addition and setting of charts will not be described here, but directly open the template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\ChartSwitch\ChartSwitch_Button.cpt

2. Button switch

1) Select the type on the right, click the setting button, select the switching method as Button, and set the font style and background of the button, as shown in the following figure:

2) The text content on the button is the title of each chart. We need to set a title for each chart. After setting the title, uncheckShow Title . As shown below:

3) You can see when previewing the template: the button content consists of "Chart type icon + Chart title". As shown below:

Note: When the content of the button exceeds the display range, the complete text content will be prompted when the mouse hovers over the button.

3. Carousel switch

1) Select the type on the right, click the Settings button, select the switching method as Carousel, set the carousel arrow to Hide, the time interval to 3 seconds, and the carousel background to be gray. As shown below:

• The rotation interval can be set to an integer greater than or equal to 0. When it is set to 0, it will not rotate automatically. You can click the arrow or dot to switch the chart.

• The background is the background color of the arrows and dots.

2) Set the title of each chart, and checkShow Title.

3) When previewing the template, you can see that the chart will be rotated regularly: Click the arrows on the left and right of the chart or the rotating dots below the chart to switch charts in real time. During the rotation, when the mouse enters the chart area, the rotation will be stopped. After removing the mouse, wait for 3 seconds (the set time interval) to continue the rotation of the chart.

4. Effect preview

1) PC terminal

Save the report, click Pagination Preview, the effect on the PC side is shown in Section I.1.

2) Mobile terminal

Whether it is button switching or carousel switching, the mobile terminal is displayed as an arrow + dot switching method. The only difference is that the carousel switching can be automatically rotated, and the button switching needs to be manually clicked to switch. The effect of carousel switching is shown in the following figure:

The completed template can be found at:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\ChartSwitch\ChartSwitch_Button.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\ChartSwitch\ChartSwitch_Carousel.cpt

Click to download the template:

ChartSwitch_Button.cpt

ChartSwitch_ Carousel.cpt