Successfully!

Error!

[General] Switching Between Multiple Charts on Mobile Terminal

  • Last update:  2021-12-17
  • I. Overview

    1. Version

    Report sever vision
    Support rangeApp versionSupport function
    10.0App、H5、Pad10.4.61Multi-chart switching supports customizing whether to display the switching button


    2. Application scenarios

    In order to improve the space utilization and the beauty of the report, the function of chart switching is often used in report design.

    The new version supports customizing whether to display the chart switch button. The user can freely switch the chart through this button. The sliding switch method is still supported, and the sliding range is enlarged to the entire chart area.


    3. Function introduction

    The Chart Switching Attributes page supports setting of two switching methods, and the switching effects are shown in the following figure:

    Button: The user needs to slide the chart or click the button to switch.

    1.gif

    Carousel: The chart switches automatically, and the carousel interval can be customized. You can choose whether to display the chart switch button, and the switch button is still valid when you click the switch button during automatic rotation.

    2.gif

    II. Button

    1. Method of operation

    1) On theType page of chart component, click to openChart Switching Attributessetting page.

    3.png

    2) SelectButtonfor the switching method of the chart switching attributes page, set the style of the button, and click OK.

    4.png


    2. Effect description

    ScenesChart typeEffect
    Mobile terminal
    CPT cell chartShow left and right switch buttons
    FRM re-layout chart componentsHide left and right toggle buttons
    FRM re-layout report block chartShow left and right switch buttons
    FRM retains layout chart component/report block chartShow left and right switch buttons
    Pad termialCPT cell chart, FRM retain layout chart component/report block chartShow left and right switch buttons

    Note 1: The mobile terminal in the scene contains both App and H5.

    Note 1: The switch button here is the same button as the carousel arrow of the carousel switch mode, but the statement is different.

    Note 2: When the chart type is FRM re-layout chart component, switch to the last chart. Switching from the last to the first chart is not supported. Other scenarios are supported.


    3. Effect preview

    Taking the FRM re-layout chart component as an example, the effect of hiding the toggle button is shown in the figure below:

    5.gif


    4. Template download

    The completed template can be found at: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Multi-chart_button_switching.frm

    Click to download the template:

    Multi-chart button switching.frm

    III. Carousel

    1. Method of operation

    1) On theType page of chart component, click to openChart Switching Attributessetting page.

    6.png

    2) SelectCarousel for the switching method of the chart switching attributes page , set whether to display the carousel arrow (switching button) and the carousel time interval, and clickOK.

    7.png


    2. Effect description

    Carousel arrow settingsSceneChart typeEffect
    DisplayMobile terminalCPT cell chartShow left and right carousel arrows
    FRM re-layout chart component/report block chartShow left and right carousel arrows
    FRM reserved layout chart component/report block chartShow left and right carousel arrows
    Pad terminalAll chartsShow left and right carousel arrows
    HideMobile terminalCPT cell chartShow left and right carousel arrows
    FRM re-layout chart componentsHide the left and right carousel arrows, support sliding switching, the internal sliding of the chart does not respond
    FRM re-layout report block chartShow left and right carousel arrows
    FRM reserved layout chart component/report block chartShow left and right carousel arrows
    Pad terminalCPT cell chart, FRM reserved layout chart component/report block chartShow left and right carousel arrows

    Note: Carousel to the last chart, the right arrow is grayed out and cannot be clicked. Switching from the last to the first chart is not supported.


    3. Effect preview

    Taking the FRM re-layout chart component to display the carousel arrow as an example, the carousel effect is shown in the following figure:

    8.gif


    4. Template download

    The completed template can be found at%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Multi-chart_carousel_switching.frm

    Click to download the template:

    Multi-chart carousel switch.frm

    Attachment List


    Theme: Fine Mobile
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback