Flipper

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 3 Flipper card

• Background
  • Background color: Background color of the widget card.
  • Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
  • Style: Image display style. The options are normal, center, stretch, and tiled.
  • Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, or GIF images are recommended. The size of each image cannot exceed 50 MB.
• Special effect: Widget highlighted status. Displayed by default or on page load.
• Padding: Distance between the chart and the four sides (top, bottom, left, and right as shown in Figure 2) of the widget. The default value is 0, indicating that the chart stretches to fill the entire widget.

Configuration

In the configuration, set the style and animation of the flipper widget.

Figure 4 Flipper configuration

• Style settings
  • Font: Font, size, and color of the flipper.
  • Number background: Whether to display the number background in the flipper. The background cannot be hidden when the animation type is set to the flipper type.
  • Number background color: Background color of the number in the flipper. Required only when the number background is set to display.
  • Digit interval: Distance between the digits of the flipper, in pixels.
  • Card padding: Distance between the flipper number and the widget card.
  • Thousand comma: Whether to display the thousand comma for the number. The thousand comma is displayed by default.
  • Title: Whether to display the title of the flipper. By default, the title is hidden.
  • Title content: Content of the title. Required only when the title is set to display.
  • Title alignment: Alignment of the title. The options are left, center, and right. Required only when the title is set to display.
  • Title font: Font, size, and color of the title. Required only when the title is set to display.
  • Unit: Whether to display the unit. By default, the unit is hidden.
  • Unit content: Set the unit content. Required only when the unit is set to display.
  • Unit font: Font, size, and color of the unit. Required only when the unit is set to display.
• Animation settings
  • Animation Type: Animation type of the flipper. The common type, scrolling type, and flipper type are supported.
  • Animation time: Animation time, in ms. The value ranges from 200 ms to 100,000 ms.
  • Single change interval: Interval for changing an animation, in ms. The value ranges from 50 ms to 1,000 ms.

Data

In the data settings, you can set the data source of the flipper. For more information, see Data Access.

Interaction

In the interaction settings, you can configure interactions between the flipper widget and other widgets or pages. For details, see Interaction Configuration.