I. Overview
In order to display different charts online on the same page, you can click the button to switch to view different charts.
II. Example
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 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 switch method as button, and set the style and background of the button control, as shown in the figure below:
Note 1: 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.
Note 2: the text on the switch button is the title of the chart. If you do not want to display it, you can delete the title of the chart, and then set it not to display the title.
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.
III. Template download
Completed template, please refer to %fr_ Home%/webapps/Webroot/WEB-INF/reportlets/Doc-EN/Chart/ChartSwitch/ChartSwitch_Button.cpt
Click download template: