Data source differences between legacy and updated chart components

In February 2020, IoT Studio updated its chart components. The main updated components include tables, line charts, column charts (including stacked column charts), bar charts (including stacked bar charts), and pie charts (including donut charts). These updated chart components also support drag-and-drop operations from BI components. For detailed configuration steps for the updated chart components, see Tables, Line charts, Column charts, Bar charts, and Pie charts.

The key difference between legacy and updated chart components lies in their data source formats, which results in different methods for configuring data display.

• Legacy table and certain chart components support a pure array data source format.

  [
    [1,11,111],
    [2,22,222],
    [3,33,333],
    [4,44,444],
    [5,55,555]
  ]

  Configure the data source first. Then, under style settings, configure series names. The component parses the number of columns in the data and displays the corresponding configuration panel.

• Updated chart components support a Key+Value data table format, such as {"Key1": "Value1", "Key2": "Value2", ...}.

  Each Key represents a field name, and each Value represents the field's value.

  {
    "data": [
      {
        "month": "Jan",
        "sales": 300,
        "cost": 150
      },
      {
        "month": "Feb",
        "sales": 100,
        "cost": 50
      },
      {
        "month": "Mar",
        "sales": 200,
        "cost": 100
      }
    ]
  }

  After configuring the data source, the component parses the Key fields into the Data display configuration panel under either Dimension or Measure. Complete the data display configuration by dragging and dropping fields. For example, in the updated table component:

  In the Data display configuration panel, the data source's Key fields (such as month, sales, and cost) appear in the Dimension and Measure areas. Drag and drop these fields to configure data display.