Cross Table Concatenation

  • Last update:  2024-05-09
  • Overview

    Version

    FineBI Version

    Functional Change

    6.0

    -

    Application Scenario

    When you need to customize the background color of the summary column title, you can achieve the effect by concatenating two tables, as shown in the following figure.

    60ff0ab60ed3faea21d2cc2b38e7f0c.png

    Implementation Method

    You can create two table components, customize background colors and names of the two table titles as needed, and concatenate the two table components by using Hover and Combine functions.

    Applied Scope

    The table concatenation only takes effect on cross tables.

    Procedure

    Data Preparation

    1. Log in to FineBI, click My Analysis, select a folder, and click New Subject.

    1d1a11dce860eab0523f32b10ea5de4.png

    2. Click Local Excel and Upload Data.

    You can download the sample data: Cross Table Concatenation.xlsx

    cc5c4af82630a1542b81a68f4ea76dc.png

    3. Click OK after the data is uploaded.

    f0db91ac03bdeac50dcb9d126c7410b.png

    4. Click Save and Update and Exit and Preview. The data is created successfully.

    8be7f47ea118b96ea44ef8568ca5f3e.png

    Component Creation

    A left table component is created to display the Sales and Cost data of products, and a right table component is created to display the summary column data of those data in the left table component.

    1. Creating the Left Table

    1. Click the Component tab in the lower left corner, as shown in the following figure.

    2. Select Cross Table in Chart Type.

    3. Drag the Product Level field in the to-be-analyzed area into Row Dimension, drag Indicator Name and Date into Column Dimension, and drag Sales and Cost into Indicator, as shown in the following figure.

    3e63f195e0185d52ecc0eec712e1a79.png

    4. Click the e7c48665f89f62578b00456359bb0a5.png button next to the Date field in Column Dimension and select Year-Month from the drop-down list, as shown in the following figure.

    21965725ae57512a3d18b125d3403b6.png

    5. Choose Component Style > Summary Row/Column. Click the Row tab and uncheck Total Summary Row to hide it in the table. Click the Column tab and uncheck Total Summary Column to hide it in the table, as shown in the following figure.

    图片12.png

    6. Choose Component Style > Component Padding and set the inner padding of the right-side component to 0px, as shown in the following figure.

    4b293d4414f0b2ea83b98537936d5d2.png

    2. Creating the Right Table

    1. Click the 6b70155ac3ee16a73c6c98fe3e05ab2.png button at the bottom of the analysis subject editing page.

    2. Select Cross Table in Chart Type.

    3. Drag the Product Level field in the to-be-analyzed area into Row Dimension, drag Indicator Name twice into Column Dimension, and drag Sales and Cost into Indicator, as shown in the following figure.

    00ac6ddc7300f01c9061bddf302c09e.png

    4. Click the e7c48665f89f62578b00456359bb0a5.png button next to the first Indicator Name in Column Dimension and click Customize Grouping from the drop-down list. In the Customize Grouping setting box, check Assign Ungrouped Value to at the bottom and enter Summarized Value for the Last Two Years into the text field, as shown in the following figure.

    72dc959654b1a43c5c718bef8507099.png

    5. Choose Component Style > Summary Row/Column, click the Row tab, and uncheck Total Summary Row, as shown in the following figure.

    2a602fe1dbcea3d18f59e00a06a2265.png

    6. Choose Component Style > Style and set Theme Color to orange to distinguish the right table from the left one, as shown in the following figure.

    d45db8a0d3e2b3a8b769cdff64713cb.png

    Concatenating Tables

    1. Click the Add Dashboard button at the bottom of the analysis subject editing page.

    2. Drag the two components into the dashboard on the Dashboard editing page.

    494c1194bbc023b226373d9b9bd86b2.png

    3. Click the left table component (blue one), click the 8ed7ad96c875f38f1d4cce8a924fed9.png button, and select Hover from the drop-down list, the right table likewise, as shown in the following figure.

    1e497dc7566c715fed5cfb109c42dc0.png

    4. Click the left table component, click the 8ed7ad96c875f38f1d4cce8a924fed9.png button, select Order, and select Move to Top. You can also click the right table component, click the 8ed7ad96c875f38f1d4cce8a924fed9.png icon, select Order, and select Move to Bottom, as shown in the following figure.

    6fa70eac24e85045de3b6186ac723d3.png

    5. Adjust the sizes of the two table components and align the left table component with the right one vertically and horizontally, as shown in the following figure.

    4f9f9c4e1f65ce5e309352ba2abe8a5.png

    6. Click the left table component, click the 8affdcb3eadb4f02dc29c481d620256.png button, click the right table component, and click OK in the upper-right corner of the page to combine the two table components. For details, see Component Combination.

    cadf276a754e93403f801e61c70275b.png

    Effect Display

    iconNote:
    The concatenated cross table can not be displayed on mobile terminals currently.

    4f9f9c4e1f65ce5e309352ba2abe8a5.png

    Attachment List


    Theme: 可視化コンポーネントの作成
    前の記事
    次の記事
    • いいね
    • 良くない
    • 閲覧しただけ

    フィードバック

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    9s后关闭

    反馈已提交

    网络繁忙