Developing Data Visualization Pages


The data visualization page is a data dashboard with certain business logic that is formed by arranging multiple charts in accordance with certain business logic.


The DTV provides a set of rich widgets to help you display and analyze data in the most appropriate way. For more information about various charts, See Widget Reference.

Adding Charts

After creating a page, you can add and edit charts in the page by following these steps:

  1. On the Dashboard page, select the created page. Click Add in the toolbar to open the page editor (or click Add from Template, select the editing page for the saved widget templates, the common widget templates, or the cross-organization public widget templates).

    ../_images/opening_editor.png

  2. From the Chart Type section, select the chart you want to use (taking the Table chart as an example), and then complete the configuration of chart basic information, data binding, and chart style.

  3. In the Basic Settings section, provide the following basic information of the chart:

    • Basic Information: Enter the title and description of the chart.
    • Other Options: Select data data refreshing frequency.
    ../_images/table_title.png

  4. In the Data section, add the data source that needs to be displayed in the chart:

    • Data Source: Select the added data source.
    • Category: Select the category of the data item according to the selected data source.
    • Aggregation: Select whether to aggregate the data.
    • Parameters: Configure various parameters according to the selected data source and category.
    • Dimension, Comparison, Measurement: Select a combination of dimensions, comparisons, and measurements in the data set. The chart will dynamically display the acquired data according to the selected combination.
    ../_images/table_data.png

  5. In the Chart Style column, configure the font, sorting and other properties of the chart.

  6. Click Save to save the chart configuration (you can also click Save as Template to save the edited chart as a widget template for reuse.

  7. Return to the Dashboard page to view the chart display effect. Drag and drop the widget to adjust the page layout. When completed, select Operations > Save Layout in the toolbar to save the page layout.

    ../_images/viewing_created_table.png

  8. Repeat the above steps to add more charts to the page.

Publishing the Page

After editing the monitoring page and previewing its display effect, you can publish the page online.

  1. Open the edited page and click Operations > Preview in the toolbar to preview the display effect of the page.

    ../_images/previewing_page.png

  2. If you need to edit the chart again, click the Edit icon in the upper right corner of the chart to edit the chart after returning to the page.

  3. If the page is ready for publish, click Operations > Publish in the toolbar to publish the page online.

    ../_images/publishing_page.png

  4. Copy the URL of the published page for use when integrating the page into applications.