Multi-Pointer Gauge

  • Last update:  2024-08-13
  • Overview

    Version

    FineBI Version

    Functional Change

    6.0

    /

    Application Scenario

    A multi-pointer gauge displays values and progress of different indicators through multiple pointers. Similar to the speedometer of a car, this gauge features a circular dial with corresponding scales. Each pointer indicates the current value, providing a clear visual representation of the status of various indicators.

    A multi-pointer gauge comes in two styles: circular and semicircular.

    For example, you can use a multi-pointer gauge to display the total inventory and order quantities of a product.

     1.png

    Basic Requirement

    Chart Effect
    DimensionIndicator

    Multi-pointer Gauge

    0

    >=1

    Chart Feature

    1. Advantage

    Information integration: The gauge can display multiple indicators within a limited space, providing comprehensive performance monitoring.

    Visual display: The gauge can visually display the current status of each indicator through the position of the pointer, making it easy to understand.

    2. Disadvantage

    Complexity: If there are too many pointers, the gauge may appear cluttered and difficult to interpret.

    Circular Multi-Pointer Gauge

    Data Preparation

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

     2.png

    2. Click Local Excel and click Upload Data, as shown in the following figure.

    You can download the sample data Product Table.xlsx.

     3.png

    3. After the upload, click OK.

     4.png

    4. Click Save and Update to complete the data creation, as shown in the following figure.

    19cf151c28299dce1f131e44298aac7.png

    Component Creation

    1. Click Component in the lower left corner.

     2ff554137f7048bf8777b502e791008.png

    2. Select Gauge in Chart Type and click the first gauge icon in Graphic Property.

    3. Drag the fields Inventory and Order Quantity in the left to-be-analyzed area into Pointer Value, as shown in the following figure.

    iconNote:
    The pointer value is the scale position that the pointer points to. You can generate multiple pointers by dragging multiple indicators to Graphic Property > Pointer Value.

     10da6a8b6f8d50e50aebbd17b73a3d0.png

    Chart Beautification

    Color Setting

    Choose Graphic Property > Color to set colors for the ring, pointer, scale value, cap, and chassis in the pop-up setting box, as shown in the following figure.

     6854c17edb82349faf5f3c8944e8e98.png

    Style Setting

    Choose Graphic Property > Style and set Size to 100 in the pop-up setting box, as shown in the following figure.

     b4f2ed5c808c30c7a6509738af61bd1.png

    Label Setting

    Drag the fields Inventory and Order Quantity in the left to-be-analyzed area into Graphic Property > Label to display the labels for the inventory and order quantities, as shown in the following figure.

    47f1bad2098a4f40a7074fb945c5d4a.png

    Target Value Setting

    Choose Graphic Property > Target Value to customize the target value in the pop-up setting box, as shown in the following figure.

    iconNote:
    The target value is the maximum scale value of the gauge. 

    1fb903ca9f8d5eec07e9a6a583a12a3.png

    Dashboard Creation

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

    2. Drag the component into the dashboard on the dashboard editing page, as shown in the following figure.

    2379d95f54a936d893c0c4caed685c5.png

    3. Select Edit Title from the drop-down list, set Font Style to Custom, set the title to Circular Multi-Pointer Gauge, and click OK.

    图片1.png

    Effect Display

    1. PC

     11.png

    2. Mobile Terminals

     12.png

    Semicircular Multi-Pointer Gauge

    Component Copying

    Click the 4d68d492f786df455a0a0e077216cbf.png icon next to the component tab at the bottom of the component editing page and select Copy from the drop-down list to copy the component, as shown in the following figure.

    79ced800be4fcc547e4dd31abbf5453.png

    Chart Subtype Modification

    Click the second subtype in Graphic Property on the component editing page of the new component (after copied), as shown in the following figure.

    4577fdd8592b75f8cd4457a548b78cc.png

    Dashboard Creation

    The content in this section is the same as that in section "Dashboard Creation", but the difference is setting the title to Semicircular Multi-Pointer Gauge, which will not be repeated here.

    Effect Display

    1. PC

     13.png

    2. Mobile Terminals

    14.png

    Attachment List


    Theme: Creating a Visual Component
    前の記事
    次の記事
    • いいね
    • 良くない
    • 閲覧しただけ

    フィードバック

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

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

    不再提示

    7s后关闭

    反馈已提交

    网络繁忙