Ticker board

Widget overview

Scenarios

Ticker boards are used for clocks, timers, and counters. In finance, they display monetary amounts. Businesses use them to show key metrics. For example, you can display a business metric to quickly identify operational issues by observing its changes.

Demonstration

A ticker board usually consists of a title, a prefix or suffix, and the ticker content. The following example uses a ticker board to show the daily sales amount for a region.

Limits

The ticker board content only supports the Number type. If your data is not a Number type, the platform treats the content as an abnormal character and automatically replaces it with specified content. For more information, see Abnormal character processing.

Prerequisites

• Create a data dashboard. You can use a template, use a blank canvas, or use AI to generate one.

• Your business data is prepared. For more information, see Data Source.

Add a ticker board

1. Log on to the DataV console.

2. On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.

3. In the navigation pane on the left, under Component Library > Information, click the Ticker Board widget to add it to the canvas.

You can also add the widget using the global search feature.

Connect to business data

After you add the widget, connect your business data to it. Click the ticker board. On the Data Source tab on the right, select the data for the widget.

• The following table describes the data fields that the ticker board accepts.

  Field	Description
  name	(Optional) The title of the ticker board. If not empty, this value overwrites the configuration in the Style tab. If empty, the content in the Style > Basic Style > Title Content field is used.
  value	The specific numeric value for the ticker board.
  prefix	(Optional) The prefix for the ticker board. If not empty, this value overwrites the configuration in the Style tab. If empty, the content in the Style > Ticker Board > Prefix Content field is used.
  suffix	(Optional) The suffix for the ticker board. If not empty, this value overwrites the configuration in the Style tab. If empty, the content in the Style > Ticker Board > Suffix Content field is used.

  The following code shows an example data structure and the resulting ticker board.

  [
   {
   "name": "This is the title",
   "value": 232425
   }
  ]

  

• This section describes the core configuration items for the data source.

  Configuration	Description
  Select Data Source	Supports various data types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. Edit data fields in a visual table or in code.
  Configure Filter (Optional)	Customize filter code to transform, filter, display, and perform simple calculations on data. For more information, see Manage data filters.
  Configure Data Mapping	Map fields from the selected data source to the widget's fields. This enables real-time data matching. Click the icon to configure field styles.
  View Response Result	Displays the data connected to the widget in real time. When the widget's data source changes, this section shows the latest data. Click the data response result to view the data field code. Click View Example to see the array type and sample code that the data source accepts. You can write your fields based on the example. Other data request configurations: Disable Loading State: If you check this box, the widget's initial loading content does not appear when the widget updates or when you preview the data dashboard. Controlled Mode: If you check this box, the widget does not request data when it initializes. Data requests can only be started by the blueprint editor or by global variable events. Auto Update Request: If you check this box, the platform polls for data updates at the interval you set. If you do not check this box, you must refresh the page manually or use the blueprint editor or global variable events to trigger data updates.

Configure the ticker board

{
  "value": "23"
}

{
  "value": "23"
}

[
  {
    "name": "Q3 Revenue",
    "value": 283699,
    "prefix": "¥",
    "suffix": "CNY"
  }
]

{ 
  // Movement type. Absolute positioning: to, relative positioning: by. Default: to.
    "positionType": "to",
  // Specified position. x-coordinate, y-coordinate.
  "attr": {
   "x": 0,
   "y": 0
   },
  // Animation method.
  "animation": {
    "enable": false,
    // Animation duration.
   "animationDuration": 1000,
    // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
   "animationEasing": "linear"
  }
}

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

Demo

For an example of how to use the ticker board, see Implement dynamic data summation.