This topic describes how to add and configure widgets in a blank canvas.

Add and configure map widgets

  1. Log on to the DataV console.
  2. On the Projects tab, select an existing project and click Edit.
  3. In the upper-left corner, click the Widgets icon. In the Widgets pane, click the Maps icon and click the Basic Flat Map icon.
    Basic Flat Map
  4. In the Layers pane, click the Basic Flat Map widget. In the right-side pane, click the Settings tab and click the Delete icon of each sub-component in the Child Management section.
    Delete existing sub-components
  5. Click the + icon on the left of the Components section, select Flying Routes Layer, Animation Bubbles Layer, and Choropleth Layer, and click Add a Child Widget.
    Add a Child Widget
  6. In the Components section, click Animation Bubbles Layer.
  7. In the Animation Bubbles Layer pane, click the Settings tab. Click the right arrow next to Bubble Type, click the Bubble Type1 tab, and then set Type Filter Value to ok.
    Bubble Type1
  8. Use the same method to configure Fill Color for the Choropleth Layer.
    Fill Color
  9. In the Child Management section, click Flying Routes Layer. On the Settings and Data tabs, configure the style and data for the Flying Routes Layer. The default configurations are used in this topic.
  10. In the Child Management section, click Animation Bubbles Layer and click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and paste the data in the Animation Bubbles Layer Data.json file to the editor.
    Configure data for the Animation Bubbles Layer
  11. In the Child Management section, click Flying Routes Layer and click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and paste the data in the Flying Routes Layer Data.json file to the editor.

Add and configure an Image widget

  1. In the Widgets pane, click the Media icon and click the Image icon.
    Add an Image widget
  2. In the Layers pane, click the Image widget. In the right-side pane, click the Settings tab and click Change in the square box of Background Image to upload the background image that you have prepared.
    Add a background image
  3. Adjust the size of the background image.
  4. In the left-side Layers pane, click the Send to Back icon to always show the Image widget at the bottom of the widget list. Right-click the image widget and select Lock. These operations are performed to ensure smooth operations on other widgets.
    List the Image widget at the bottom

Add and configure Title widgets

  1. In the Widgets pane, click the Text icon and click the Title icon.
    Add a Title widget
  2. In the Layers pane, click the Title widget. In the right-side pane, click the Settings tab, specify Size, Position, and parameters in Text Style.
    Configure the style of the Title widget
  3. Click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and set value to the title you want to show in the editor.
    Set value to the title you want to show
  4. Repeat the preceding operations to add other Title widgets.

Add and configure Ticker Board widgets

  1. In the Widgets pane, click the Text icon and click the Ticker Board icon.
    Add a Ticker Board widget
  2. In the Layers pane, click the Ticker Board widget. In the right-side pane, click the Settings tab, specify parameters in Global Settings, Title, Text Style, and Ticker Board.
    Configure the style of the Ticker Board widget
  3. Click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and set value to the data you want to show in the editor.
    Set value to the data you want to show
  4. Repeat the preceding operations to add other Ticker Board widgets.

Add and configure a Timeline widget

  1. In the Widgets pane, click the Interact icon and click the Timeline icon.
    Add a Timeline widget
  2. In the Layers pane, click the Timeline widget. In the right-side pane, click the Settings tab, specify the parameters, such as Data Format and Default Style, in Node.
    Configure the style of the Timeline widget
  3. Click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and set name and value to the data you want to show in the editor.
    Set name and value to the data you want to show

Add and configure a Carousel List I widget

  1. In the Widgets pane, click the Text icon and click the Carousel List I widget.
    Add a Carousel List I widget
  2. In the Layers pane, click the Carousel List I widget. In the right-side pane, click the Settings tab and specify parameters in Global Settings, Index, and Content.
    Configure the style of the Carousel List I widget
  3. Click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and paste the data in the Rankings of Sales Volumes in Provinces.json file to the editor.
    Configure the data for the Carousel List I widget

Add and configure a Basic Line Chart widget

  1. In the Widgets pane, click the Charts icon and click the Basic Line Chart icon.
    Add a Basic Line Chart widget
  2. In the Layers pane, click the Basic Line Chart widget. In the right-side pane, click the Settings tab and configure parameters in Global Settings, X Axis, and Y Axis.
    Configure the style of the Basic Line Chart widget
  3. Click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and paste the data in the Sales Growth.json file to the editor.
    Configure data for the Basic Line Chart widget

Add and configure a Graphic widget

  1. In the Widgets pane, click the Material icon and click the Graphic icon.
    Add a Decoration widget
  2. In the Layers pane, click the Graphic widget. In the right-side pane, click the Settings tab, set Decorations to gif2, and then adjust the location and size of the Decoration widget in the canvas.
    Configure the style of the Decoration widget

Add and configure a Key Table widget

  1. In the Widgets pane, click the Text icon and click the Key Table icon.
    Add a Table widget
  2. In the Layers pane, click the Key Table widget. In the right-side pane, click the Settings tab and configure the parameters in Column and Row.
    Configure the style of the Table widget
  3. Click the Data tab and configure the data for the Key Table widget as needed.
    Configure data for the Table widget

Add and configure a Percentage Pie Chart widget

  1. In the Widgets pane, click the Charts icon and click the Percentage Pie Chart icon.
    Add a Percentage Pie Chart widget
  2. In the Layers pane, click the Percentage Pie Chart widget. In the right-side pane, click the Settings tab and configure parameters in Chart Options and Percent Size.
    Configure the style of the Percentage Pie Chart widget
  3. In the right-side pane, click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and set value to the data you want to show in the editor.
    Set value for the Percentage Pie Chart widget

Add and configure a Basic Bar Chart widget

  1. In the Widgets pane, click the Charts icon and click the Basic Bar Chart icon.
    Add a Basic Bar Chart widget
  2. In the Layers pane, click the Basic Bar Chart widget. In the right-side pane, click the Settings tab and specify parameters in Chart and Coordinate Axes.
    Configure the style of the Basic Bar Chart widget
  3. In the right-side pane, click the Data tab. In the Data Source Type section, select Static Data from the drop-down list and paste the data in the Commodity Sales Ranking.json file you have downloaded to the editor.
    Configure data for the Basic Bar Chart widget