Successfully!

Error!

Realizing Data Point Tooltip Carousel in the FVS Regular Chart

  • Last update:  2024-03-06
  • Overview

    Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

    Note: Mobile devices are not supported.

    Version

    Report Server Version

    JAR Package

    Plugin Version

    V11.0

    2021/11/15

    V1.0.0

    Function Introduction

    In the FVS report, regular charts implement the function of enabling automatic data point tooltip carousel in the chart.

    Note: Extended charts are not supported.

    The JavaScript code is as follows:

    duchamp.on("storychange", (current) => {

    if (current === "page 1") {

    duchamp.getWidgetByName("component name").isEnabled();

    }

    });

    Take a column chart and a map as examples. The effect is as shown below:

    动1.gif

    3.gif

    Example

    Creating an FVS Report

    Click File > New FVS Report in the top left corner of the designer to customize the template name and size.

    Preparing Data

    Create two database queries:

    1. Input the SQL query statement in the ds1: SELECT * FROM sales. It is used to add data to the column chart.

    2. Input the SQL query statement in the ds2: SELECT * FROM map. It is used to add data to the map.

    Adding a Column Chart

    1. Click Chart > Column Chart in the component area, add it to page 1, and add data to it.

    2. Select the column chart, click Component on the right-hand configuration panel, and set its name to column chart.

    Adding a Map

    1. Click + New Page below the canvas to create page 2.

    2. Click Chart > Area Map in the component area, add it to page 2 and add data to it.

    3. Select the map, click Component on the right-hand configuration panel, and set its name to Map.

    Setting Page After-Load Event

    Click Template > Page After-load Event in the top left corner, and enter the following JavaScript code:

    duchamp.on("storychange", (current) => {

    if (current === "page 1") {

    duchamp.getWidgetByName("column chart").openAutoTooltip();

    }

    if (current === "page 2") {

    duchamp.getWidgetByName("map").openAutoTooltip();

    }

    });

    Previewing the Effect

    Click Save in the top right corner, then click Preview, and the effect is shown in the following figure:

    4.gif

    Template Download

    Click to download the template: Cue point carousel by FVS chart.zip

    Attachment List


    Theme: FineVis Data Visualization
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback