Chart Carousel Switch

In order to display different charts online on the same page, you can use the carousel to switch to view different charts.

1. Add map

Create a new built-in dataset, as shown in the figure below, for detailed dataset, you can download the template at III.Template download:

Take the cell chart as an example, merge a cell, click Insert > cell element > insert chart, and select the map, as shown in the following figure:

Select the chart, select the type on the right, and modify the type settings, as shown in the following figure:

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

2. Add bar chart

Select the type on the right and click add a chart2.

Select the chart, select the Bar Chart, as shown in the following figure:

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

Select the chart, select special effects on the right, use male and female avatars for column chart and classification chart, set category 1 and 2, and set conditional formatting1 as follows:

The conditional formatting2 is set as follows:

Note: the value of category index should be equal to integer.

3. Add pie chart

After adding a chart, select the chart, select the type on the right, and modify the type settings, as shown in the following figure:

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

Select the chart, select the style series on the right, set the inner diameter, and realize the circular pie chart, as shown in the following figure:

4. Add column chart

After adding a chart, select the chart, select the type on the right, and modify the type settings, as shown in the following figure:

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

Select the chart and select style series on the right to realize the column chart with rounded corners, as shown in the following figure:

5. Add bubble chart

After adding a chart, select the chart, select the type on the right, and modify the type settings, as shown in the following figure:

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

Select the chart and select style series on the right to modify the bubble size, as shown in the following figure:

6. Chart switching properties

Select the type on the right, click the set button, select the carousel method, and set the Carousel Arrows display, the time interval as 5 and background of the button control, as shown in the figure below: 

Note: Chart switching is only effective for the set chart index. If only the second chart is set to refresh automatically, only the second chart will refresh.

7. Effect preview

Save the report and click pagination preview. The effect is as follows:

Note: if the chart name is abbreviated, the data point prompt of the chart name will be displayed in the center below the control when the mouse moves to the corresponding control position.

Completed template, please refer to %fr_ Home%/webapps/Webroot/WEB-INF/reportlets/Doc-EN/Chart/ChartSwitch/ChartSwitch_Carousel.cpt

Click download template: 

ChartSwitch_Carousel.cpt

1. The steps of inserting charts are the same as Chart Manual Switch, the difference is at II.6, the setting up of chart switching properties. 

2. All added charts only introduce the key steps, and common styles need to be set according to your own needs