Формат данных

Chart Widgets

Every chart shares the same fields; which of x, y, d (or c) and r are used, and what type of column each accepts, depends on the chart type - each of the six chart types is covered in its own subsection below, with a live example rendered from one small shared sample dataset.

• datasetId - the dataset this chart reads from - must match a dataset’s name.
• chartType - area, bar, cell, dot, hexbin or line.
• title - an optional chart title.
• dataFunction - the aggregate applied to d (or c): count (default), sum, average, min, max, median or stddev. Leave d/c unset when using count.
• x - the column for the X dimension.
• y - the column for the Y dimension (cell, dot and hexbin only).
• d (or c, an alias for the same field) - the column aggregated into the chart’s value/color dimension.
• r - the column for the radius dimension (dot only).
• seasonX / seasonY - groups a time column into a recurring period: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Dimension columns are classified as categorical, time or continuous based on their declared type - see the dataset JSON section below. When dataFunction is count, the d/c dimension is left unset - a count needs no value column. Any other aggregate (sum, average, min, max, median or stddev) requires it.

Bar

Line

Area

Cell

Dot

Hexbin

Other Widgets

Table (dash_table)

Text (dash_text)

Image (dash_image)

Spacer (dash_spacer)

Stackers (dash_stacker_hor, dash_stacker_ver)

Dataset JSON

A dataset is a single JSON object with a name, typed columns and rows:

{
  "name": "Orders",
  "headers": ["region", "category", "amount", "quantity"],
  "types": ["VARCHAR", "VARCHAR", "FLOAT", "INTEGER"],
  "entries": [
    ["North", "Electronics", 120.50, 2],
    ["South", "Clothing",     89.95, 1],
    ["North", "Furniture",   432.00, 5],
    ["South", "Electronics",  74.50, 1]
  ]
}

• name - the dataset name; charts and tables reference it through their datasetId field.
• headers - the column names, in the same order as each row in entries.
• types - one column type per header - see the categories below.
• entries - the rows, each an array of values in header order.

Optionally, row_start, row_end, col_start and col_end select a zero-indexed, inclusive sub-range of entries to import - useful when appending only new rows from a larger table. All four default to the full range:

{
  "name": "Orders",
  "headers": ["region", "amount"],
  "types": ["VARCHAR", "FLOAT"],
  "entries": [ ["North", 120.50], ["South", 89.95], ["North", 432.00], ["South", 74.50] ],
  "row_start": 0,
  "row_end": 1,
  "col_start": 0,
  "col_end": 1
}

Every column type is classified as categorical, time or continuous, which determines which chart dimensions it can be used for - see the chart widget sections above:

• Categorical - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Time - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Continuous - every other type, for example INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Column references in a chart (x, y, d/c, r) must match a header name exactly, case-sensitive.

Styling and Theme Overrides

Dashboard-level colors are set once in config.style.widget and apply to every widget that doesn’t override them:

• color - the default text color.
• backgroundColor - the default dashboard background.
• primaryColor - the foreground/active series color, used for headers and the cross-filtered trace.
• primaryColorSubtle - the low end of the color gradient used by cell, dot and hexbin charts.
• secondaryColor - the background/unfiltered series color.

Any widget can override its own presentation directly on its JSON node - backgroundColor, color, padding, borderRadius, borderWidth, borderColor and shadow. The example below overrides one chart’s own colors and corners while the rest of the dashboard keeps the shared theme:

{
  "type": "dash_chart",
  "datasetId": "Orders",
  "chartType": "hexbin",
  "x": "amount",
  "y": "quantity",
  "backgroundColor": "#F5F0FF",
  "borderRadius": "12px",
  "borderWidth": "1px",
  "borderColor": "#6E2BDC",
  "shadow": true
}

Complete Example

A small dashboard combining a header, two charts side by side and a table, all reading from one dataset:

{
  "config": {
    "type": "dashboard",
    "style": {
      "widget": {
        "color": "#000000",
        "backgroundColor": "#FFFFFF",
        "primaryColor": "#6E2BDC",
        "primaryColorSubtle": "#E2D5F8",
        "secondaryColor": "#CCCCCC"
      }
    }
  },
  "data": {
    "type": "dash",
    "children": [
      { "type": "dash_text", "text": "Orders Overview", "fontSize": "2vw", "justifyContent": "0" },
      {
        "type": "dash_stacker_hor",
        "children": [
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "bar",  "x": "region", "dataFunction": "count" },
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "cell", "x": "region", "y": "category", "dataFunction": "count" }
        ]
      },
      { "type": "dash_table", "datasetId": "Orders" }
    ]
  }
}