Skip to main content
Version: 3.2

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