Successfully!

Error!

Kaleidoscope Chart

  • Last update:  2021-03-19
  • I. Overview

    1.1 Application Scenarios

    FineReport's rich chart functions can achieve a variety of visual display effects, but in the face of some complex advanced graphics that require design tools or programming languages, you can also use the combination of charts to achieve similar effects.

    This article will realize the kaleidoscope chart as shown in the figure below through chart combination.

    1.png


    1.2 Features

    • The outer circle displays the series name, and the outer circle can be rotated by dragging with the mouse.

    • The series value is displayed in the inner circle, and the series name and series value can be viewed by hovering the mouse.


    1.3 Realization Idea

    • The outer circle is realized by using a pie chart, inserted in the form of cell elements, and the ring effect is realized by modifying the inner diameter.

    • The inner circle is realized with a radar chart, inserted in the form of suspended elements, and placed in the circle to achieve the inner circle effect.

    II. Example

    The example uses the kaleidoscope chart to calculate the box office appeal of stars.


    2.1 Data Preparation

    Put Weekly Calendar.xls in the %FR_HOME%\webapps\webroot\WEB-INF\reportlets\ directory, create a new normal report, create a new Excel file dataset File1, select the path where the Excel file is located, and click OK.

    2.png


    2.2 Report Design

    2.2.1 Outer Circle Design

    1) Merge a slice of cells and insert a pie chart.

    3.png

    2) Bind the pie chart data as shown below.

    4.png

    3) Select the Title for the pie chart style, uncheck Show Title.

    5.png

    4) Select the Legend for the pie chart style, uncheck Legend is Visable.

    6.png

    5) Select Label for pie chart style, check Use label, and Text check Series.

    7.png

    6) Select the Series of pie chart styles, modify the Inner Radius to 80, and turn on the rotatable function.

    8.png

    7) Tooltip for pie chart style selection, checkUse Tooltip, and Text tick the Series.

    9.png

    2.2.2 Inner Circle Design

    1) Select Insert>Floating Element>Insert Chart from the menu bar to insert aRadar Chart.

    10.png

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

    11.png

    3) Binding the radar chart data information as shown below.

    12.png

    4) Select the Title for the radar chart style, uncheck Show Title.

    13.png

    5) Select the Legend for the radar chart style, uncheck Legend is Visable.

    14.png

    6) For the radar chart style, select Axis> Polar Axis to hide the axis label.

    15.png

    7) Radar chart style choose Axis> Polar Axis, hide the axis label, the value definition adopts unified calculation, check the option to define the main scale unit, and set the value to 1.

    16.png

    8) Radar chart style selection Tooltip, check Use Tooltip, Text check Series and Value.

    17.png

    9) Select interactive attributes for radar chart Special Effect, uncheck all the contents of the toolbar, and hide the toolbar.

    18.png

    10) Right-click the radar chart, click Bring it to Top(T), and drag the radar chart to the outer ring.

    19.png


    2.3 Effect Preview

    Save the report, click Pagination Preview, the effect is as shown in the figure below:

    Note: Due to the floating chart, mobile terminals and dashboard are not supported.

    20.gif

    III. Template Download

    Click to download the template:

    Star_Box_Office.cpt

    Click to download the Excel file used in the file dataset:

    Weekly Calendar.xls

    IV. Precautions

    4.1 Part of outer circle prompts not to float

    Since the radar chart is a square model and has a large range, when floating in the ring of the outer circle, part of the prompt operation of the pie chart will be obscured.

    21.gif


    4.2 The cylinders of the inner and outer rings are not aligned

    Because the columns of the radar chart and the pie chart do not match, the columns may not be aligned when previewing the report. You can manually rotate the lower outer ring to align the inner column.

    22.gif

    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback