Successfully!

Error!

Multi-layer Pie Chart Linkage

  • Last update:  2022-01-20
  • I. Overview

    1. Application scenarios

    When you click different levels of a Multi-layer Pie Chart, you can link to other chart data corresponding to that level. The linkage effect is shown in the following figure:

    Kapture 2021-01-08 at 10.55.09.gif


    2. Implementation ideas

    Set the multi-layer pie chart as the main table, and put other charts corresponding to each level in the same sub table.

    The condition attribute of row height type is set in the sub table, which corresponds the main table level parameter with the sub table row height parameter. During linkage, the row height is controlled by the parameter, and then only the chart of the specified level is displayed.

    II. Examples

    1. Data preparation

    Create a new build-in dataset with Price, Region, Province and City. More detailed table information please download the template.

    截屏2021-01-08 上午9.46.37.png


    2. Insert chart

    1) Create a new general report Multilayer Pie Chart Main table, merge a range cell, right-click the cell, and select Cell Element > Insert Chart > Multilayer Pie Chart, as shown in the following figure:

    截屏2021-01-08 上午9.51.28.png

    2) Create a new normal report Multilayer Pie Chart Minor table, merge three area cells, right-click these cells, and select Cell Element > Insert Chart > Column Chart, as shown in the following figure:

    Kapture 2021-01-08 at 09.59.22.gif


    3. Data binding

    1) Bind the data of the multilayer pie chart of the main table, as shown in the figure below

    截屏2021-01-08 上午9.51.37.png

    2) Bind the data of the three column charts of the layer level linkage sub table, as shown in the figure below:


    4. Main table style setting

    1) Select Style >Label. In order to clearly display the series corresponding to the pie chart, check the Traction Line. The specific settings are as follows:

    2.41.png

    Note: the traction line setting / label of multi-layer pie chart is displayed on the outside only for the outermost layer, and the inner level label is displayed on the inside.

    2) Select Style > Series, the default inner diameter ratio is 0, and startDrilling, as shown in the figure below:

    截屏2021-01-08 上午10.03.00.png

    Note 1: when the inner diameter is set, all levels are divided into the whole radius except the inner diameter.

    Note 2: after drilling, no matter whether the inner diameter is set or not, the radius of the pie chart in the middle accounts for 50% of the overall radius, and the remaining radii are evenly divided among the other layers.

    Note 3: click the white circle in the center to return to the previous level.


    5. Sub table condition attribute setting

    1) Select the Price Analysis of Region , add Conditional Formatting, set row height to 0, and configure parameter a = 2 or a = 3, as shown in the figure below:

    Note: a row height of 0 indicates that the chart is hidden. Parameter a here corresponds to the level of the multi-layer pie chart. When the level is 1, the chart will be displayed. When the level is 2 or 3, the chart will be hidden.

    2) Select the Price Analysis of Province , add Conditional Formatting, set row height to 0, and configure parameter a = 1 or a = 3, as shown in the figure below:


    3) Select the Price Analysis of City, add Conditional Formatting, set row height to 0, and configure parameter a = 1 or a = 2, as shown in the figure below:



    6. Main table hyperlink settings

    Select Special Effects > Interaction > Add Hyperlink for multilayer pie chart of main table, select Web Report, select Multipie_minor.cpt, the parameter name should correspond to the row height parameter in sub table condition attribute, and the value isformula level serial number, as shown in the figure below:

    2.6.png


    7. Effect preview

    1) PC terminal:

    Save the report, click Pagination Preview, and click the corresponding level to display the average freight histogram of the level, as shown in I.1.

    2) Mobile terminal:

    2022-01-20_17-31-19.gif

    III. Template download

    For completed templates, please refer to:

    %fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\PieChart\MultiPie_Main.cpt

    %fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\PieChart\MultiPie_Minor.cpt

    Click to download the template:

    MultiPie_Main.cpt

    MultiPie_Minor.cpt

    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback