Kaleidoscope Chart

Application Scenario

FineReport allows you to realize various visual display effects through rich chart functions. For complex and advanced graphics that require design tools or programming languages, you can also use a combination of charts to achieve similar effects.

This document describes how to create a kaleidoscope chart in the following figure using a combination of charts.

Function Description

1. The outer part displays the series name. You can drag the outer part with your mouse to rotate the ring.

2. The inner part displays the series values. You can view the series name and series value by hovering the mouse over a specific inner part.

Implementation Method

1. Insert a pie chart as a cell element for the outer part and modify the inner diameter to realize the ring effect.

2. Insert a radar chart as a floating element and place the radar chart inside the ring as the inner part.

This example uses a kaleidoscope chart to calculate the votes for candidates.

Data Preparation

Create a general report and create a built-in dataset Candidate Vote Statistics. Design the table as shown in the following figure.

Report Design

1. Outer Part Design

(1). Merge cells from A1 to I1 and enter Candidate Vote Statistics as the title in the merged cell. Merge cells from A2 to I28 and insert a pie chart, as shown in the following figure.

(2). Bind data to the pie chart, as shown in the following figure.

(3). Choose Style > Title, and deselect Show Title.

(4). Choose Style > Legend, and deselect Show Legend.

(5). Choose Style > Series, modify Core to 80%, and enable Rotatable.

(6). Choose Style > Prompt, and deselect Use Tooltip.

(7). Choose Style > Label, tick Use Label, select rich text in Value Label, and select Series and Vote Count to be displayed, as shown in the following figure.

(8). Choose Special Effect > Interaction on the property panel of the pie chart and deselect all the options in Content to hide the toolbar.

2. Inner Part Design

(1). Choose Floating Element > Add Floating Element > Insert Chart on the right property panel and insert a stacked column radar chart.

(2). Right-click the radar chart, select Style, choose Background > Color, and set the background color of the radar chart to Transparent.

(3). Bind the data to the radar chart, as shown in the following figure.

(4). As with the pie chart style setting, deselect Show Title and Show Legend.

(5). Choose Axis > Polar Angle and select Hide in Axis Label.

(6). Choose Axis > Polar Axis, select Hide in Axis Label, select Unified Calculation in Value Definition, tick Custom Main Unit, and set Main Scale Unit to 5.

(7). Choose Style > Prompt, tick Use Tooltip, and tick Series and Value in Text.

(8). Choose Special Effect > Interaction on the property panel of the radar chart and deselect all the options in Content to hide the toolbar.

(9). Right-click the radar chart, select Bring to Top(T), and drag the radar chart into the ring of the outer ring. The following figure shows the final effect.

Effect Display

Save the report and click Pagination Preview. The following figure shows the preview effect.

Note:

1. The floating chart cannot be previewed on mobile terminals. 

2. Dashboards and FVS visualization dashboards do not support the floating chart but allow you to combine two charts to form a kaleidoscope chart.

3. If the annulus sectors of the pie chart are mismatched with the corresponding sectors of the radar chart, misalignment will occur during the report preview. In this case, you can manually rotate the outer ring to align the outer annulus sectors with the inner sectors.

The completed templates can be found in: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\RadarChart\Kaleidoscope Chart.cpt.

For details, you can download the template: Kaleidoscope Chart.cpt

Unable to Display Part of Outer Part Prompts

Since the radar chart is built on a square model with a large range, part of the operation prompts of the pie chart will be obscured when the radar chart is floating in the outer ring.