Configuring Component Data

This section uses a line component as an example to describe how to configure component data parameters.

Figure 1 Configuring component data of a line chart

Data Source Type

After selecting the data source type of a chart, you can view or edit the corresponding content in the data area. You can click in the lower right corner of the data area to zoom in the data area window. This helps you view and edit data.

Figure 2 Data area

The system provides the following data sources for users to select:

• Static data

  The following displays a data format example. You can adjust the data values according to your specific requirements, or paste the prepared JSON data.

  [
    {
      "x": "01/01 09:17:56",
      "y": 375,
      "s": 1
    },
    {
      "x": "01/01 09:20:07",
      "y": 200,
      "s": 1
    },
    {
      "x": "01/01 09:28:07",
      "y": 25,
      "s": 1
    },
    {
      "x": "01/01 09:34:07",
      "y": 190,
      "s": 1
    },
    {
      "x": "01/01 09:40:07",
      "y": 90,
      "s": 2
    },
    {
      "x": "01/01 09:49:07",
      "y": 233,
      "s": 2
    },
    {
      "x": "01/01 09:55:07",
      "y": 150,
      "s": 2
    },
    {
      "x": "01/01 10:30:07",
      "y": 233,
      "s": 2
    }
  ]

• API

  DLV can connect to data sources through APIs. For details about the data format, see the example in the Static data pane. For details about how to add API data sources, see Creating API Data Connections.

• Database, CSV file, API Gateway, DAYU DLM, Elasticsearch, and OBS

  If you select this type of data source, you need to select the corresponding data connection. For details about data connections, see Creating Data Connections. For details about the data format, see the example in the Static data pane.

Data Mapping

The system allows you to customize field mappings.

Figure 3 Data mapping (line chart)

Data Field Settings

Click next to the field to be modified and set the field in the drop-down list.

Figure 4 Field settings – pie chart

• Series Name: name of the series the field belongs to
• Color: color of the field in a chart

Data Series

The s field is a data series field. Data is grouped based on the value of the s field. As shown in Figure 3, the data whose value of s is 1 belongs to one group and the data whose value of s is 2 belongs to another group.

• Adding a data series

  Click next to the s field to add a data series.

• Configuring a data series

  Click in front of a data series. On the displayed page, configure the following data series parameters.

  • Series Name: name of the data series.
  • Pattern: coordinate shape of the data series. The value can be Circle, Rectangle, Triangle, or others.
  • Color: curve color of the data series.
  • Width: curve width of the data series.
  • Opacity: fill color transparency of the data series.
  • Value Tag: If this option is selected, the value of the corresponding point is displayed in the chart. You can set the font size, color, font width, and position of the value tag.
  • Link: Set the hyperlink of the data series.
  • Link Mode: Possible values are New window, Current page, and Floating panel.

Automatic Update

If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.

Preview Result

You can click Update Query to manually update the component data when the data source changes. Click Preview Result to view the information about the selected data source.

A data request will time out in 60s. You need to allow for factors such as network latency and SQL execution efficiency to ensure that the data request is successful.

Converter

Convert the data into the data that meets the display requirements. For details, see Using a Converter.