edit-icon download-icon

Other widgets

Last Updated: Jul 10, 2018

DataV supports various supplementary widgets to enhance the visual elements of your projects.

Custom background box

You can change the background color to highlight a widget by using the Customized Background widget. This enables users to quickly spot the important data in the project.

Choose the Customized Background widget. The Style and Data tabs appear on the right side of the page.

undefined

Custom Style

Select the Custom Style check box to change the background style, including the border image, border width, background color, and others.

background color

  • Border Image Source: Click the text tip in the dotted box or drag and drop the file into the dotted box to change the border image.

  • Slice: Deselect the check box to hide the border slicing (cropping) function.

  • Border Image Style: Enter a number to adjust the border.

  • Border Style: Click the drop-down arrow to show more border style options and select the appropriate border style.

  • Border Width: Enter a number to adjust the border width.

  • Inner Background: Click the color block to change the background color of the content generator.

  • Background Color: Click the color block to change the background color of the entire widget.

Deselect the Custom Style check box, and then you can change the background color, border style, and component position, and size of the widget.

Setwidget

  • Background Color: Click the color block to change the background color of the entire widget.

  • Border Radius: To adjust the radian of the four border corners, first select the respective corner and move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the radian of the four border corners.

Widget size and position

Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

widget size and position

Border

You can add borders to one or more widgets by using the Border function to enable users to quickly spot important widgets and data while reading the project.

Choose Border. The Style and Data tabs appear on the right side of the page.

SelectBorde

boarder

  • Border: Click the drop-down arrow to show more options and select a border style.

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the widget size and position.

Decoration

You can enhance the widgets of the project by using the Decoration function.

Click Decoration, and the Style and Data tabs appear on the right side of the page.

DecorationSetting

decoration

  • Decorations: Click the drop-down arrow to show more options and select a decoration element.

  • Opacity: To adjust the transparency of the widget, move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the opacity of a widget.

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

iFrame

You can insert a web page into the project by using the iframe function to help users query data or search for relevant information in real time through the web page.

Click iframe. The Style and Data tabs appear on the right side of the page.

IframeSetting

IframeSetting

  • URL Link: Enter the address of the web page to be inserted into the project.

  • Close Button: Select the Close Button check box to close the web page search and query function.

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the widget size and position.

Image

You can add an image, for example, the company logo, to the project by using the Image function.

Click Image. The Style and Data tabs appear on the right side of the page.

image

size and position

  • Background Image: Upload or drop a local image into the dotted box to add a background image.

  • URL: You can enter the link of the network image.

  • Blank: Select the option to create a new window in the project to show the image.

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

Timeline

You can add a timeline for one or more widgets by using the Timeline function to help readers quickly find the data of different periods.

Click Timeline. The Style and Data tabs appear on the right side of the page.

Global settings

Global settings

You can adjust the overall style of the widget by using the Global Settings function.

global style

  • Font Family: Click the drop-down arrow to show more options and select a widget font.

  • Loop: Deselect the check box to hide the Loop (slideshow) function.

  • Duration: Click the plus (+) or minus (-) sign, or enter a number to adjust the time interval of the widget.

  • Stop time: Click the plus (+) or minus (-) sign, or enter a number to adjust the stop time of the widget.

  • Padding: Click the plus (+) or minus (-) sign, or enter a number to adjust the padding of the widget.

Node

You can adjust the widget node by using the Node function.

EventNodeSetting

  • Category: Click the drop-down arrow to show more options and select a node type.

  • Data Format: Enter the data format of the widget.

  • Shape: Click the drop-down arrow to show more options and select a node shape.

  • Node Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the node size.

  • Node Fill Color: Click the color block to change the fill color of the node.

  • Stroke Color: Click the color block to change the stroke (border) color of the node.

  • Stroke Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the stroke (border) width of the node.

Label

You can adjust the node style by using the Label function.

NodeTagSetting

  • Offset: Click the plus (+) or minus (-) sign, or enter a number to adjust the position of the node tab.

  • Default Style

    • Font Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the font size of the node tab.

    • Color: Click the color block to change the color of the node tab.

  • Selected Style

    • Font Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the font size of the currently displayed node on the timeline.

    • Color: Click the color block to change the color of the currently displayed node.

Background

You can adjust the background settings of the widget by using the Background function.

background

  • Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the thickness (width) of the timeline.

  • Color (default style): Click the color block to change the timeline color.

  • Color (selected style): Click the color block to change the color of the currently displayed timeline.

Interaction

You can enter a callback ID by using the Interaction function to realize data interaction between the current widget and other widgets. For more information about settings on data interaction, see DataV Callback ID.

NodeInteraction

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

callback ID

Word cloud

You can add word clouds to the project by using the Word Cloud function to display word frequencies.

Click Word Cloud, and the Style and Data tabs appear on the right side of the page.

WordCloud

Global settings

Global style

global style

  • Font Family: Click the drop-down arrow to show more options and select a font.

  • Font Size: To adjust the font size, move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the font size.

  • Shape: Select the check box to enable the Shape function.

    Once the Shape function is enabled, the word entries in the word cloud are arranged in the graphic style uploaded in the Shape Image.

  • Image: Upload or drop a local image into the dotted box to change the shape image.

    SetPictureStyle

    WordCloudShow

Series

XiLieSetting

  • Click the plus (+) icon to add a new word cloud series.

  • Click the Recycle Bin icon to delete the current word cloud series.

  • Click the color block to change the color of word entries in the word cloud.

Widget Size and Position

You can Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

size and position

On the project, you can play several images one by one as an animation by using the Carousel function.

Click Carousel Images. The Style and Data tabs appear on the right side of the page.

Carousel

size and position

Global settings

global settings

  • Font Family: Click the drop-down arrow to show more options and select a font style.

  • Font Size: To adjust the font size of the widget, move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the font size.

Animation

AnimationSetting

  • Interval: Enter a number to adjust the interval duration of images, which is measured in milliseconds.

  • Speed: Enter the number to adjust the switching speed of images, which is measured in milliseconds.

  • Special Effects: Click the drop-down arrow to show more options and select a special effect.

    SpecialEffectSetting

Image

PictureGroupSetting

  • Default Image: Upload or drop a local image into the dotted box to change the default image.

  • Fill Type: Click the drop-down arrow for more options and select a fill type.

Description

Deselect the Show check box to hide the descriptions of the slideshow.

DescriptionSetting

  • Background Color: You can adjust the color style, angle, and other attributes of the description by using the Background Color function.

    • Color Style: Click the drop-down arrow to show more options and select a color style. Then click the color block to change the current color.

    • Angle: Click the plus (+) or minus (-) sign, or enter a number to adjust the angle of the background color.

  • Color: Click the color block to change the text color of the current text.

  • Width (%): Click the plus (+) or minus (-) sign, or enter a number to adjust the width of the description.

  • Height (%): Click the plus (+) or minus (-) sign, or enter a number to adjust the height of the description.

  • Top (%): Click the plus (+) or minus (-) sign, or enter a number to adjust the top margin of the description.

  • Left (%): Click the plus (+) or minus (-) sign, or enter a number to adjust the left margin of the description.

  • Align: Click the drop-down arrow to show more options and select an alignment.

Pagination bullets

Deselect the Show check box to hide the dots.

When multiple images are played one by one, the currently displayed image and those that are not displayed will be indicated with dots of different colors.

DotShow

dot

  • Inactive Color: Click the color block to change the color of pagination bullets.

  • Active Color: Click the color block to change the color of the pagination bullet indicating the current image.

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the widget size and position.

Tab

You can arrange multiple widgets into a list and present them in a centralized manner by using the Tab function.

Click Tab. The Style and Data tabs appear on the right side of the page.

tab

tab page

  • Font Family: Click the drop-down arrow to select the title font of the Tab list from the drop-down menu.

  • Background Color: Click the color block to change the background color of the Tab list.

  • Number of Rows: Click the plus (+) or minus (-) sign, or enter a number to adjust the number of rows of the Tab list.

  • Number of Columns: Click the plus (+) or minus (-) sign, or enter a number to adjust the number of columns of the Tab list.

  • Select Type: You can choose to display the Tab list on a single page or on multiple pages simultaneously by using the Single Choice and Multiple Choice options.

    • Single Choice: A tab widget is displayed on a single page, and you can enter an Init Value to determine the first Tab page to be displayed.

    single choice

    • Multiple Choice: The tab is displayed on multiple pages, and you can select the All Buttons check box to display the All option in the front of the tab. You can also select the Init Value check box and enter an Init Value to determine whether to display the first Tab page.

    MultipleChoose

Label options

TagDefaultSetting

  • Font Size: To adjust the font size of tabs in the Tab list, move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the font size.

  • Font Color: Click the color block to change the color scheme of fonts.

  • Background Color: Click the color block to change the background color of the Tab List.

  • Border Radius: To adjust the border radius of tabs, move the slider to the left to minimize or to the right to maximize or enter a number to adjust the radius of a tab border.

  • Hover Color: Click the color block to change the hover color of the Tab list.

  • Selected Color: Click the color block to change the text color of tabs on the current page.

  • Callback ID: Enter the callback ID to interact the current Tab list with other charts.

Widget size and position

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

size and position

Timer

You can add a timer for the project through the Timer function.

Click Timer. The Style and Data tabs appear on the right-side of the page.

TimeTool

timer widget

Icon style

You can adjust the size, color, and margin of the timer icon through the Icon Style function.

SampleStyleSetting

  • Size: To adjust the icon size, move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the size of an icon.

  • Color: Click the color block to change the color of the icon.

  • Margin: You can drag the slider or enter a number to adjust the distance between the icon and the numbers.

Timer

You can adjust the text display, time format, and duration of the widget through the Timer function.

TimerStyleSetting

  • Text Style: You can adjust the front size, font, and color of the timer in Text Style.

    • Font Size: To adjust the font size of the widget, move the slider to the left to minimize or to the right to maximize, or enter a number to adjust the font size.

    • Font Color: Click the color block to change the font color of the widget.

    • Font Weight: Click the drop-down arrow to show more options and select font weight.

    • Font Family: Click the drop-down arrow to show more options and select a font.

  • Format: You can enter the display format of time according to the system prompt.

  • Duration: Click the plus (+) or minus (-) sign, or enter a number to adjust the time duration of the widget.

Video

You can add a video for the project by using the Video function.

Click Video. The Style and Data tabs appear on the right side of the page.

VideoTool

video

  • Video URL: You can enter or paste an existing video address into this field.

  • Autoplay: Select the Autoplay check box to automatically play the video.

  • Loop: Select the Loop check box to repeatedly play the video.

  • Control Bar: Select the Control Bar check box to display the control bar of the video.

  • Empty Video Text: You can upload your videos to the specified area. We recommend that you upload videos in MP4 format.

  • Widget Size and Position: Click the plus (+) or minus (-) sign, or enter a number to adjust the component size and position.

Thank you! We've received your feedback.