Chart Switchover Attribute

Version

Application Scenario

To present different charts on the same page by online switchover, you can add multiple charts in Type, and select Button or Carousel as Switchover Method. The following figure shows the effect.

Button-styled chart switchover: You can click each button to switch the charts.

Carousel-styled chart switchover: The charts are automatically switched by the configured time interval in the carousel-styled way.

Function Description

1.3.1 Adding Multiple Charts

You can add multiple charts, copy the charts, adjust chart orders, and set the chart switchover method in Type, as shown in the following figure.

You can click the Add icon to add multiple charts whose names are set to Chart2, Chart3, and Chart x cumulatively by default.

You can double-click the chart name to rename it.

You can select the chart you want to copy and click the Copy icon to copy the chart.

You can select the chart you want to move and click the Left Shift or Right Shift icon to adjust the chart order.

You can click the  icon to enter the Chart Switchover Attribute setup box and set the attributes when Switchover Method is set to Button or Carousel.

Chart Switchover Attribute

The following figure shows the chart switchover attribute setup box.

Note:

Button Content/Carousel Tooltip can only be set in the designer in 11.0.3 and later versions.

Button-styled switchover: You can set the background color of the button and the character/front size of the content.

Carousel-styled switchover: You can set Carousel Arrow to Display or Hide, and set Time Interval and Background.

Button Content/Carousel Tooltip: You can enter a text or click the F(x) button to enter a formula. You cannot set the text for the button content and carousel tooltip (which can only share the same text) separately.

Template Opening

Open the template Button-styled Chart Switchover.cpt in the designer.

Charts of five different types have been added to cell A1 in the template and renamed their chart types respectively. The following sections will mainly introduce the switchover attribute setting of multiple charts and the corresponding effects. How to add and set charts will not be elaborated here.

Button-styled Switchover

1. Select the cell where the charts are located, click Cell Element on the right attribute panel, select Type, and click the setting icon to bring up the setup box of Chart Switchover Attribute.

2. Select Button as Switchover Method, and set Character and Background for the button.

3. Select each chart, and set Text in Button Content/Carousel Tooltip for each chart respectively. For example, set Text in Button Content/Carousel Tooltip to Distribution by Region for Map, as shown in the following figure.

4. Preview the template. The button name consists of the chart type icon and the button content text, as shown in the following figure. 

Note: 

When the button name exceeds the display range, the full text will be prompted when you hover your cursor over the button.

Carousel-styled Switchover

1. Set Switchover Method to Carousel, set Carousel Arrow to Display, set Time Interval to 3, and set Background to gray, as shown in the following figure.

Time Interval can be set to an integer greater than or equal to 0. If you set Time Interval to 0, the charts will not be automatically switched in the carousel-styled way, but you can click the carousel arrow or dot to switch the charts.

Background specifies the background color of the arrow and the dot.

2. Button Content/Carousel Tooltip specifies the content text (not subject to the switchover method) mentioned in section "Button-styled Switchover."

3. No button name is displayed during carousel-styled switchover. In this case, you need to select Show Title under Type > Title and enter the corresponding text.

4. During preview, the charts are automatically switched by the configured time interval in the carousel-styled way. You can also click the arrows on the two sides of or the carousel dots below the chart to switch the charts immediately. During the carousel-styled switchover, the switchover stops when you hover your cursor over the chart area, and continues  three seconds (configured time interval) after you move your cursor out of the chart area.

Effect Display

PC

Save the report and click Pagination Preview. The PC preview effect is the same as that in section "Application Scenario."

Mobile Terminal

The following figure shows the carousel-styled switchover effect of the general report.

You can download the following example templates:

Button-Styled Chart Switchover.cpt

Carousel-Styled Chart Switchover.cpt