Skip to main content

Dashboard structure in JSON

Dashboards allow you to visualize, organize and share analytical data.

Each dashboard is characterized by the following features:

  • Can consist of one or more rows of panels.
  • Each panel contains a visualization, such as a chart or table.
  • In each panel, a search generates data for the visualization.
  • Includes inputs elements, such as textboxes or multiselect, for user interaction. Elements in the dashboard can be configured to respond to inputs, such as changing the search query that drives the visualization.

Dashboard components​

The general view of the dashboard hierarchy is as follows

{
  "label": [0..1],
  "inputs": [
    {
     "input": [0..N]
    }
  ],
  "rows": [
    {
      "panels": [0..N]
    }
  ],
  "vars": [
    {
      "var": [0..N]
    }
  ]
}
ItemDescriptionJSON
LabelDashboard Name.
{
"label": ""
}
FiltersAn array of inputs to interact with.
{
"inputs": []
}
RowsAn array of dashboard rows with a panel or panels.
{
"rows": []
}
--
{
"vars": []
}

Filters​

Filters define the interface of user interaction with the dashboard. Filters such as radio buttons and checkboxes allow users to select one or more options. Other filters such as text fields, time entry fields, etc. allow users to enter data or change the time range of the search.

Attributes​

The following attributes are used in each filter.

NameData typeDescription
nameStringThe system name of the filter.
labelStringA text label for the filter.
type

One of the types presented.

  • time
  • text
  • selection
  • checkbox
  • radio
  • multiselection
optionsObjectPresets for the filter.
tokenObjectThe value selected by the user using the filter.
timeInputStringThe value of the system field of the time type filter for use in search queries. Applies to filter types: selection, multiselection.

options attribute​

Different types of settings can be used in each filter.

NameData TypeDescription
defaultObjectDefault settings for the filter.
staticArrayList of values to be filled manually (for types checkbox, selection, radio, multiselection).
allow_customBooleanPossibility to enter your own option for further selection in the filter (only for multiselection type).
searchStringSearch query to generate dynamic selection options in the filter (only for selection and multiselection types).

default attribute​

Each type of filter has its own default settings.

Filter TypeJSONDescription
time
{
    "options": {
        "default": {
            "start": "string",
            "end": "string",
            "isPaused": "boolean",
            "refreshInterval": "number"
        }
    }
}
  • start - start of the time period
  • end - end of time period
  • isPaused - flag for enabling/disabling automatic time update
  • refreshInterval - time period of automatic time update.

checkbox

selection

multiselection

{
    "options": {
        "default": [
          {
            "label": "string",
            "value": "string"
          }
        ]
    }
}
  • label - displayed value in the filter
  • value - system value in the filter.

text

radio

{
    "options": {
        "default": "string"
    }
}
Default text value.

token attribute​

The token has a different representation for each filter type.

Filter TypeJSONDescription

checkbox

multiselection

{
    "token": {
        "prefix": "string",
        "suffix": "string"
    },
    "token_value": {
        "prefix": "string",
        "suffix": "string"
    },
    "delimiter": "string"
}

For token

  • prefix - text to be added before the token
  • suffix - text to be added after the token

For token_value

  • prefix - text to be added before the token value
  • suffix - text to be added after the token value

For delimiter

  • delimiter - separator between the selected values.

text

radio

selection

{
    "token": {
        "prefix": "string",
        "suffix": "string"
    }
}
  • prefix - text to be added before the token
  • suffix - text to be added after the token

Panels​

In the context of dashboard interfaces, the rows element is a container for one or more child panel elements. It is used to group and control the arrangement of panels on a page.

Inside the row container are panel elements, which are used to display visual data (charts, graphs, diagrams, etc.). Panels allow you to control the grouping and arrangement of visualizations on the page.

Within a panel, visualization elements are aligned horizontally. To arrange visualizations vertically, a new row container is created.

General view of the panel structure

{
  "inputs": [],
  "height": "number | string",
  "width": "number | string",
  "label": "string",
  "type": "string",
  "viz": {},
  "depends": [],
  "subpanels": []
}
ItemDescriptionJSON
FiltersAn array of inputs to interact with.
{
"inputs": []
}
HeightNumeric or string value (percentage) of the panel height.
{
"height": ""
}
WidthA numeric or string value (in percentage or pixels) of the panel width.
{
"width": ""
}
LabelPanel Title.
{
"label": ""
}
TypePanel Type.
{
"type": ""
}
VisualizationThe visualisation used in the panel.
{
"viz": {}
}
DependsAn array of tokens used to display the panel.
{
"depends": []
}
SubpanelsAn array of child panels.
{
"subpanels": []
}

viz attribute​

The panel can contain one or more visualization types.

ItemJSONDescription

options

{
  "viz": {
    "options": {}
  }
}

Settings for visualization.

options.sme.query
{
  "viz": {
    "options": {
      "sme": {
        "query": "string"
      }
    }
  }
}
Search query forming values in the visualization.
options.drilldown
{
  "viz": {
    "options": {
      "drilldown": {
        "enableDrilldown": "boolean",
        "drilldownType": "string",
        "drilldownText": "string",
        "drilldownQuery": "string",
        "drilldownCustomTimeTokenEarliest": "string",
        "drilldownCustomTimeTokenLatest": "string",
        "drilldownSelectTimeToken": "string",
        "drilldownTokens": [{
            "name": "string",
            "value": "string"
          }
        ]
      }
    }
  }
}

Drilldown.

  • enableDrilldown - flag to enable drilldown
  • drilldownType - type of drilldown. The available options are: search (link to search), custom (external link), tokenControl (Change tokens in dashboard)
  • drilldownText - external link value (only for custom)
  • drilldownQuery - search query value (only for search)
  • drilldownCustomTimeTokenEarliest - earliest time period value (only for search)
  • drilldownCustomTimeTokenLatest - latest time period value (only for search)
  • drilldownSelectTimeToken - system name of the time range token. For custom value, customPicker is used (only for search)
  • drilldownTokens - array of tokens that participate in the drilldown. The array element includes token name and value (only for tokenControl)

timeToken

{
  "viz": {
    "timeToken": "string"
  }
}

The value of a system filter field of type time for use in search queries OR pre-defined time frames for the start and end of the query.

{
  "viz": {
    "timeToken": {
      "start": "string",
      "end": "string"
    }
  }
}

type

{
  "viz": {
    "type": "string"
  }
}

One of the types of visualizations presented

Visualization type Table​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.colorRuleList
{
  "options": {
    "colorRuleList": [{
        "field": "string",
        "colorScheme": "string",
        "pallete": "string | []",
        "show": "boolean",
        "isBackground": "boolean"
      }
    ]
  }
}

Customizing color scheme of the columns

  • field - field name.
  • colorScheme - coloring type. The available options are: scale (palette), field (by value), range.
  • palette - coloring palette. The value of the field depends on the colorScheme field.
  • show - flag to display the color scheme setting.
  • isBackground - Column cell coloring flag.
colorRuleList[].palette
{
  "pallete": "string"
}

For colorScheme with scale value, the coloring palette is specified by a string. For example, white_to_green.

{
  "pallete": [{
      "value": "string",
      "color": "string"
    }
  ]
}

For colorScheme with value field, the coloring palette is set by an object or objects with values:

  • value - cell value
  • color - color value in HEX format.
{
  "pallete": [{
      "minValue": "number",
      "maxValue": "number",
      "color": "string"
    }
  ]
}

For colorScheme with value range, the coloring palette is set by an object or objects with values:

  • minValue - the numeric value of the left range boundary
  • maxValue - the numeric value of the right range boundary
  • color - color value in HEX format.
options.tableAutoWidth
{
  "options": {
    "tableAutoWidth": "boolean"
  }
}
Flag to automatically calculate the table width.
options.pagination
{
  "options": {
    "pagination": {
      "enabled": "boolean",
      "rowsPerPageList": [{
          "label": "string"
        }
      ],
      "rowsPerPageDefault": {
        "label": "string"
      }
    }
  }
}

Customizing pagination.

  • enabled - flag to enable pagination in the table
  • rowsPerPageList - array of options for selecting the number of displayed rows in the table. The array element is specified by the value with the rowsPerPageDefault field structure
  • rowsPerPageDefault - default value of the displayed rows in the table.
options.summary
{
  "options": {
    "summary": {
      "enabled": "boolean"
    }
  }
}
Flag to enable column statistics.

Visualization type Single Value​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.general
{
  "options": {
    "general": {
      "fieldForTrend": "string",
      "fieldForValue": "string",
      "label": "string"
    }
  }
}

General settings

  • fieldForTrend - name of the field for drawing the trend line
  • fieldForValue - name of the field to display the metric
  • label - name of the metrics panel.
options.show
{
  "options": {
    "show": {
      "arrow": "boolean",
      "label": "boolean",
      "sparkline": "boolean",
      "delimiters": "boolean",
      "delimiter": "string"
    }
  }
}

Display settings

  • arrow - flag for displaying the trend indicator
  • label - flag for displaying the name of the metrics panel
  • sparkline - trend display flag
  • delimiters - flag for displaying the thousands separator
  • delimiter - separator value. Valid values are comma (,), dot (.), space ( ).
options.color
{
  "options": {
    "color": {
      "invert": "boolean",
      "isRange": false,
      "color": [{
          "color": "string",
          "value": "string | number"
        }
      ]
    }
  }
}

Configuring metric coloring by value.

  • invert - Flag to color the text or background of the panel.
  • isRange - Flag of metric coloring by range. In this case it is equal to false.
  • color - Array of color pairs in HEX format color and metric values value.
{
  "options": {
    "color": {
      "invert": "boolean",
      "isRange": true,
      "color": [{
          "color": "string",
          "range": {
            "min": "number",
            "max": "number"
          }
        }
      ]
    }
  }
}

Configuring metric coloring by range

  • invert - Flag to color the text or background of the panel.
  • isRange - Flag of metric coloring by range. In this case it is equal to true.
  • color - An array of pairs of HEX-formatted color color and metric value range range, which is described by a minimum value of min and a maximum value of max.

Visualization type Pie Chart​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.general
{
  "options": {
    "general": {
      "checkedDonut": "boolean",
      "checkedLabel": "boolean",
      "checkedOther": "boolean",
      "checkedSliceCount": "boolean",
      "checkedSlicePercent": "boolean",
      "textField": "string",
      "threshold": "number",
      "truncateText": "boolean",
      "truncatePosition": "string"
    }
  }
}

General settings

  • checkedDonut - flag to enable the 'donut' diagram
  • checkedLabel - flag to enable the display of the name on the diagram
  • checkedOther - flag to enable the 'Other' sector
  • checkedSliceCount - flag to enable the display of the number of values for each sector
  • checkedSlicePercent - flag to enable the display of the percentage value for each sector
  • textField - chart title
  • threshold - percentage threshold value for the 'Other' sector
  • truncateText - flag to enable text trucation for each sector
  • truncatePosition - The start of the text truncation position. The values left, right and center are allowed.
options.color
{
  "options": {
    "color": {
      "rulesArray": [{
          "field": "string",
          "color": "string"
        }
      ]
    }
  }
}

Customising the sector coloring.

  • field - the name of the sector in the chart
  • color - color value in HEX format.
options.theme
{
  "options": {
    "theme": {
      "name": "string"
    }
  }
}

Pre-configured sector coloring theme.

  • name - color theme.

Visualization type Line Chart​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.general
{
  "options": {
    "general": {
      "showScrollBar": "boolean",
      "stackedMode": "boolean",
      "enableArea": "boolean",
      "multiseries": "boolean"
    }
  }
}

General settings

  • showScrollBar - flag to enable the preview scale in the diagram
  • stackedMode - flag to enable grouping of data series
  • enableArea - flag to enable shading of the area below the graph
  • multiseries - flag to enable splitting of data series on the chart.
options.line
{
  "options": {
    "line": {
      "smooth": "number",
      "opacity": "number",
      "strokeWidth": "number"
    }
  }
}

Customising the line display

  • smooth - smoothness of the line
  • opacity - opacity of the line
  • strokeWidth - line width value.
options.grouping
{
  "options": {
    "grouping": {
      "dataGrouping": "boolean",
      "dataGroupingAutoBaseInterval": "boolean",
      "dataGroupingBaseInterval": {
        "timeUnit": "string",
        "count": "number"
      },
      "dataGroupingCount": "number"
    }
  }
}

Customizing data grouping

  • dataGrouping - flag to enable data grouping
  • dataGroupingAutoBaseInterval - flag to enable automatic calculation of the data grouping interval
  • dataGroupingBaseInterval - Object of manual calculation of data grouping interval. The object is characterized by time unit timeUnit and number of units count
  • dataGroupingCount - Values for the amount of data to be grouped.
options.xaxis
{
  "options": {
    "xaxis": {
      "title": "string",
      "labelRotation": "number",
      "truncate": "boolean"
    }
  }
}

Customizing X-Axis

  • title - axis title
  • labelRotation - value of the degree of rotation of the values on the axis
  • truncate - flag to enable truncation of the value name on the axis.
options.yaxis
{
  "options": {
    "yaxis": {
      "title": "string",
      "logarithmic": "boolean",
      "minVal": "string",
      "maxVal": "string"
    }
  }
}

Customizing Y-Axis

  • title - axis title
  • logarithmic - flag to enable logarithmic display scale. Default is linear (false)
  • minVal - lower limit of values on the axis
  • maxVal - upper limit of values on the axis.
options.legend
{
  "options": {
    "legend": {
      "enabled": "boolean",
      "position": "string",
      "truncateText": "boolean"
    }
  }
}

Customising the legend

  • enabled - flag to enable legend display on the chart
  • position - value of the legend location on the chart. Valid values are: right, left, top, bottom
  • truncateText - flag to enable value reduction in the legend.
options.color
{
  "options": {
    "color": {
      "colorList": [{
          "field": "string",
          "color": "string"
        }
      ]
    }
  }
}

Customising the coloring of the lines

  • field - line name
  • color - color value in HEX format.

Visualization type Column Chart​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.general
{
  "options": {
    "general": {
      "showScrollBar": "boolean",
      "stackedMode": "boolean",
      "enableBar": "boolean",
      "multiseries": "boolean"
    }
  }
}

General settings

  • showScrollBar - flag to enable the preview scale in the diagram
  • stackedMode - flag to enable grouping of data series
  • enableBar - flag to enable horizontal display
  • multiseries - flag to enable splitting of data series on the chart.
options.column
{
  "options": {
    "column": {
      "borderRadius": "number",
      "opacity": "number"
    }
  }
}

Customization display of the column

  • borderRadius - value of the rounding radius of the column corners
  • opacity - column opacity value.
options.grouping
{
  "options": {
    "grouping": {
      "dataGrouping": "boolean",
      "dataGroupingAutoBaseInterval": "boolean",
      "dataGroupingBaseInterval": {
        "timeUnit": "string",
        "count": "number"
      },
      "dataGroupingCount": "number"
    }
  }
}

Customizing data grouping

  • dataGrouping - flag to enable data grouping
  • dataGroupingAutoBaseInterval - flag to enable automatic calculation of the data grouping interval
  • dataGroupingBaseInterval - Object of manual calculation of data grouping interval. The object is characterized by time unit timeUnit and number of units count
  • dataGroupingCount - Values for the amount of data to be grouped.
options.xaxis
{
  "options": {
    "xaxis": {
      "title": "string",
      "labelRotation": "number",
      "truncate": "boolean"
    }
  }
}

Customizing X-Axis

  • title - axis title
  • labelRotation - value of the degree of rotation of the values on the axis
  • truncate - flag to enable truncation of the value name on the axis.
options.yaxis
{
  "options": {
    "yaxis": {
      "title": "string",
      "logarithmic": "boolean",
      "minVal": "string",
      "maxVal": "string"
    }
  }
}

Customizing Y-Axis

  • title - axis title
  • logarithmic - flag to enable logarithmic display scale. Default is linear (false)
  • minVal - lower limit of values on the axis
  • maxVal - upper limit of values on the axis.
options.legend
{
  "options": {
    "legend": {
      "enabled": "boolean",
      "position": "string",
      "truncateText": "boolean"
    }
  }
}

Customising the legend

  • enabled - flag to enable legend display on the chart
  • position - value of the legend location on the chart. Valid values are: right, left, top, bottom
  • truncateText - flag to enable value reduction in the legend.
options.color
{
  "options": {
    "color": {
      "colorList": [{
          "field": "string",
          "color": "string"
        }
      ]
    }
  }
}

Customizing the coloring of columns

  • field - column name
  • color - color value in HEX format.

Visualization type HTML​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.general
{
  "options": {
    "general": {
      "html": "string"
    }
  }
}

General settings

  • html - HTML code.
options.styles
{
  "options": {
    "styles": {
      "сss": "string"
    }
  }
}

Styles settings

  • сss - CSS code.

Visualization type Heatmap​

The following types of settings are characteristic of visualization.

ItemJSONDescription
options.general
{
  "options": {
    "general": {
      "showScrollBar": "boolean",
      "showScrollBarY": "boolean",
      "enableSpace": "boolean",
    }
  }
}

General settings

  • showScrollBar - flag to enable the preview scale in the chart
  • showScrollBarY - flag to enable the preview vertical scale in the chart
  • enableSpace - flag to enable merging between elements.
options.xaxis
{
  "options": {
    "xaxis": {
      "title": "string",
      "labelRotation": "number",
      "truncate": "boolean",
      "field": "string"
    }
  }
}

Customizing X-Axis

  • title - axis title
  • labelRotation - value of the degree of rotation of the values on the axis
  • truncate - flag to enable truncation of the value name on the axis
  • field - data field.
options.yaxis
{
  "options": {
    "yaxis": {
      "title": "string",
      "field": "string"
    }
  }
}

Customizing Y-Axis

  • title - axis title
  • field - data field.
options.legend
{
  "options": {
    "legend": {
      "enabled": "boolean",
      "position": "string"
    }
  }
}

Customising the legend

  • enabled - flag to enable legend display on the chart
  • position - value of the legend location on the chart. Valid values are: right, left, bottom
options.color
{
  "options": {
    "color": {
      "type": "string",
      "intervals": [
        {
            "to": "number",
            "color": "string"
        }
      ],
      "field": "string",
      "minColor": "string",
      "maxColor": "string"
    }
  }
}

Customizing the coloring

  • type - coloring method. Options for selecting Minimum-Maximum and Intervals are available
  • field - data field
  • minColor - color for minimum value (only for type Minimum-Maximum)
  • maxColor - color for maximum value (only for type Minimum-Maximum)
  • intervals[].to - numeric value for upper bound interval (only for type Intervals)
  • intervals[].color - color value in HEX format. (only for type Intervals)