Add and configure project widgets

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.
   
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.
   
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.
   
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.
   
8. Use the same method to configure Fill Color for the Choropleth Layer.
   
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.
    
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.
   
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.
   
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.
   

Add and configure Title widgets

1. In the Widgets pane, click the Text icon and click the Title icon.
   
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.
   
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.
   
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.
   
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.
   
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.
   
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.
   
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.
   
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.
   

Add and configure a Carousel List I widget

1. In the Widgets pane, click the Text icon and click the 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.
   
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.
   

Add and configure a Basic Line Chart widget

1. In the Widgets pane, click the Charts icon and click the Basic Line Chart icon.
   
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.
   
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.
   

Add and configure a Graphic widget

1. In the Widgets pane, click the Material icon and click the Graphic icon.
   
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.
   

Add and configure a Key Table widget

1. In the Widgets pane, click the Text icon and click the Key Table icon.
   
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.
   
3. Click the Data tab and configure the data for the Key Table widget as needed.
   

Add and configure a Percentage Pie Chart widget

1. In the Widgets pane, click the Charts icon and click the Percentage Pie Chart icon.
   
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.
   
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.
   

Add and configure a Basic Bar Chart widget

1. In the Widgets pane, click the Charts icon and click the Basic Bar Chart icon.
   
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.
   
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.