Documentation
Home Page DataV DataV Getting Started Building a visualization application on a blank canvas

Building a visualization application on a blank canvas

Updated at:
Copy as MD
Product

Build a WebSite Data Dashboard from a blank canvas to learn how to create and configure a DataV visualization application.

Background information

  • The example uses Static Data, so you can directly paste the prepared data in the data configuration area of the component. If your data source is a CSV File, Database, or other types, you need to add a data source first.

  • If you need to use an API data source, you can directly enter the API address in the data configuration bar. When configuring, if you need to enable operations such as Server Proxy Request, see Configure cross-domain data.

Effect display

After completing the configuration in this article, you will have a data dashboard with the following effect.

Note

Visualization applications involve many configurations, and different settings produce different styles. This example only introduces the basic features and workflow. Your actual results depend on your specific configuration.

Component information

The following figure shows the component checklist for this example, listing each component and its quantity.

Procedure

Build a visualization application on a blank canvas and explore the key features of DataV-Board through the following steps.

Step 1: Create a visualization application

  1. Log on to the DataV console.

  2. On the Projects page, click PC Creation.. On the page, select Blank Canvas and click Create Project.

  3. In the Create Project dialog box, enter the visualization application name and select a project group. If no group has been created, you can select Ungrouped.

    After the application is created successfully, you will be redirected to the application editor page. You can connect to data sources and configure canvas information as needed.

    Note

    The default canvas size is 1920×1080. You can adjust it as needed in the Page Setting area on the right side of the canvas editor.

Step 2: Add and configure components

Note

  • Multiple selection operation: In Windows, hold down the Ctrl key (Command key on Mac) and click components to select multiple components.

  • Move components: You can adjust the position of components in the canvas by dragging them or modifying their coordinates in the configuration panel.

  • Layer adjustment: In the layer panel on the left, you can drag components up or down to change their layer levels. When moving layers, when two components overlap, the component in the front position will cover the one in the back position.

Business indicator trend

  1. In the All Assets panel on the left side of the canvas, click Information > Business Metric Trend to add the component to the canvas.

  2. Click the component, and in the Configuration panel on the right side of the visualization application, configure the Title, Icon, and Value in the bottom panel according to the effect diagram.image

  3. Repeat the above steps to complete the configuration of all business indicator trend components.

General title

  1. In the All Assets panel on the left side of the canvas, click Info > General Titles to add the general title component to the canvas.

  2. Click the component, and in the Configuration panel on the right side of the visualization application, configure the style of the Common Title.通用标题-样式

  3. In the Configure panel of the Common Title tab, modify the name of the title. image

  4. Repeat the above operations to continue adding other General Title components.

Ticker board

  1. In the All Assets panel on the left side of the canvas, click the Info > Trader component.

  2. Click the component, and in the Configuration panel on the right side of the visualization application, configure the style of the Ticker Board.

    数字翻牌器-样式

  3. In the Ticker Board's Data Panel, change the value to the data you want to display.

    配置数字翻牌器组件数据

  4. Repeat the above operations to continue adding other Ticker Board components.

Timer

  1. In the All Assets panel on the left side of the canvas, click the Info > Timer component.

  2. Configure the style of the Timer, modify the Icon Style, Timer, and other configurations.image

Custom background block

  1. In the All Assets panel on the left side of the canvas, click the Media > Customized Background component.

  2. Configure the style of the Customized Background, modify the Custom Style and Custom Background Style.

    image

Dashboard

  1. In the All Assets panel on the left side of the canvas, click the Chart > Pie Chart > Dashboard component.

  2. Configure the style of the Dashboard, modify fields such as Dashboard Pointer under Series.

    image

  3. Modify the data item JSON file as needed.image

Annotated bubble bar chart

  1. In the All Assets panel on the left side of the canvas, click the Chart > Column Chart > Label Bubble Column Chart. component.

  2. Configure the style of the Label Bubble Column Chart,, modify the Element Style under Series and modify the data source and other configurations.

    imageimage

Area chart

  1. In the All Assets panel on the left side of the canvas, click the Charts > Area Chart component.

  2. Configure the style of the Area Chart, modify the Line Style and Set Data Source.

    imageimage

  3. Repeat the above operations to continue adding other Area Chart components.

Single image

  1. In the All Assets panel on the left side of the canvas, click the Media > Image component.

  2. Modify the Background Image of the single image as needed.image

  3. Repeat the above operations to continue adding other Single Image components.

Step 3: Preview and publish the visualization application

After configuring all component styles and data sources, preview and publish the visualization application for online viewing. This section describes how to preview and publish a visualization application.

  1. Click the {FA4AF138-6B6B-4DF3-AA90-521D2359AFB3} icon in the upper right corner of the canvas editor to jump to a new page to preview the visualization application.

    After the preview is successful, you can publish the visualization application by following these steps.

  2. Click the {F18FCB2F-9D3E-4A35-9995-D9A7EFEA0EF6} icon in the upper right corner of the canvas editor, and in the dialog box that appears, click Publish Project to open the publish page.

  3. On the publish page, click the icon to the right of Sharing URL image.png to copy the link.

    Note

    On the publish page, you can perform publish information and snapshot management as needed.

  4. Copy and paste the URL to the address bar of a browser to view the published project.

References

Previous：Build a visualization application from a templateNext：User Guide