Visualization settings

When configuring Data Tiles you're given various visualization styles to choose from depending on the data available. The following information describes the configuration options for each visualization type.

Table settings

Configuration

Rename
Click on the column name in the Configuration panel and type to rename it.
Sort order
Click and drag a column name to change their order.
Hide/show
Click on the Toggle visibility eye button to hide or show a column.
Row Link
Hyperlinks each row in the table to the URL in the selected column.
Resizing columns
On the table preview hover between column names and use the handle to change the width. Changes will be saved while in the tile editor or in dashboard edit mode.
Swap rows and columns
Transpose the table to show the headings as the left-hand column. Particularly useful for single row tables.

Filtering, grouping and sorting of the data can be configured in the Shaping section.

Reset - reverts to the default settings.

Scalar settings

Mapping

Value
Choose the column to be used. The default is auto, where the column is chosen by the visualization.

Configuration

Label
Enter a label, for example Tickets or ms.
Show formatted value
This shows a simplified value. Toggle to Off to show the raw value. (On by default).

Show formatted value

Toggle whether the scalar shows the formatted string with units, or the raw value. By default this is set to on.

Manual size

Toggle whether to manually size the visualization. When enabled, use the slider to select a size. By default this is set to off.

Reset - reverts to the default settings.

Line graph settings

Mapping

X-axis
Choose which data to show on the x-axis. Auto <column> shows the column which was selected automatically for you, usually a time field for the x-axis.
Y-axis
Choose which data to show on the y-axis. Auto <column> shows the column which was selected automatically for you, usually a numerical field for the y-axis.
Series
Choose how the stack is split into segments, usually a label or a string.
Unit
Select the column that you want to use for the unit label.

Configuration

Y-axis range
Auto - graph is fitted to the data automatically

Percentage - shows 0-100

Fit to data from zero - shows from 0 to the data maximum

Custom - allows you to specify the min and max
Data points
This shows where the data points are on the line. Useful to identify missing points, or detail for changing data.
Shading
Adds shading below each line.
Grid lines
Adds a horizontal line to each y-axis increment, spanning the x-axis.
Show as cumulative
Displays the line graph as cumulative. For example, when showing a cumulative cost over time, based on daily data points.
Show trend line
Adds a line indicating the tendency of the data points, calculated using linear regression.
X-axis label
Allows you to override the default and enter a label, for example Date or Time.
Y-axis label
Allows you to override the default and enter a label, for example Tickets or ms.
Show legend
Toggle whether to display a colored legend for each series of data in the graph. Enabling the toggle displays the Legend position field below.
Legend position
Select where the legend is displayed in relation to the graph. This field is only visible when the Show legend toggle is enabled.

Bar chart settings

Mapping

X-axis
Choose which data to show on the x-axis. Auto <column> shows the column which was selected automatically for you, usually a time field for the x-axis.
Y-axis
Choose which data to show on the y-axis. Auto <column> shows the column which was selected automatically for you, usually a numerical field for the y-axis.
Series
Select the column used to split the x-axis values into series.

Configuration

Show as groups
Toggle whether to display the Series as grouped bars. This option is only enabled when a Series is selected.
Mode
Percentage mode displays a series as a percentage of the overall bar, only available when a Series is selected.
Layout
Vertical or horizontal.
Y-axis range
Auto - graph is fitted to the data automatically

Percentage - shows 0-100

Fit to data from zero - shows from 0 to the data maximum

Custom - allows you to specify the min and max
X-axis label
Allows you to override the default and enter a label, for example Date or Time.
Y-axis label
Allows you to override the default and enter a label, for example Tickets or ms.
Grid lines
Select whether to include grid lines.
Annotation
Display an annotation showing the value for each series.
Show legend
Toggle whether to display a colored legend for each series of data in the graph. Enabling the toggle displays the Legend position field below.
Legend position
Select where the legend is displayed in relation to the graph. This field is only visible when the Show legend toggle is enabled.

Custom palette

It is possible to use custom colors for this visualization by creating a custom palette. Custom palettes can be declared as either an array or an object as follows:

  • Array: Select the colors based on the order of the data (for example, the first series is the first color).
    "palette": ["red", "#abcdef", "green"]
  • Object: Select colors based on the series label.
    "palette": { "EC2": "red", "Lambda": "#abcdef", "CloudWatch": "blue" }

To apply a custom palette, do the following:

  1. Click the More Options ellipsis button then select Edit JSON.
  2. Enter the JSON for the palette you want to apply under visualisation/config/data-stream-bar-chart. For example: 
    "visualisation": {
    "type": "data-stream-bar-chart",
    "config": {
      "data-stream-bar-chart": {
        "horizontalLayout": "vertical",
        "grouping": false,
        "showValue": false,
        "displayMode": "actual",
        "xAxisLabel": "",
        "yAxisLabel": "",
        "range": {
          "type": "auto"
        },
        "showGrid": true,
        "showLegend": false,
        "legendPosition": "bottom",
        "palette": {
          "EC2": "red",
          "Lambda": "#abcdef",
          "CloudWatch": "blue"
        }
      }
    }
  },
  3. Click Save to apply the changes.

Blocks settings

Mapping

State
Select the column that you want to use for the state color of each block. Available options will vary depending on the data stream that you have selected. By default, the State column is automatically selected.
Label
Choose the label for the block.
Sublabel
Choose the sublabel to be shown beneath the main block label.
Link
Select the column that you want to use for the link of each block. Available options will vary depending on the data stream that you have selected.

Configuration

Columns
Set the number of columns the blocks are displayed in.
Manual height
Select this to be able to resize the blocks, larger or smaller.

Reset - reverts to the default settings.

Donut settings

Mapping

Value
Choose the column to use for the value for each segment.
Label
Choose the label for each segment.

Configuration

Legend
Select how the donut labels are displayed. Choose from:
  • Inline: The labels are attached to the corresponding donut segment. This is the default style.
  • Table: The labels are displayed adjacent to the donut.
Legend Position
Select where the donut labels are displayed. This option is only visible when Table is selected from the Legend field.

Custom palette

It is possible to use custom colors for this visualization by creating a custom palette. Custom palettes can be declared as either an array or an object as follows:

  • Array: Select the colors based on the order of the data (for example, the first series is the first color).
    "palette": ["red", "#abcdef", "green"]
  • Object: Select colors based on the series label.
    "palette": { "EC2": "red", "Lambda": "#abcdef", "CloudWatch": "blue" }

To apply a custom palette, do the following:

  1. Click the More Options ellipsis button then select Edit JSON.
  2. Enter the JSON for the palette you want to apply under visualisation/config/data-stream-donut-chart. For example: 
    "visualisation": {
    "type": "data-stream-donut-chart",
    "config": {
      "data-stream-bar-chart": {
        "horizontalLayout": "vertical",
        "grouping": false,
        "showValue": false,
        "displayMode": "actual",
        "xAxisLabel": "",
        "yAxisLabel": "",
        "range": {
          "type": "auto"
        },
        "showGrid": true,
        "showLegend": false,
        "legendPosition": "bottom",
        "palette": {
          "EC2": "red",
          "Lambda": "#abcdef",
          "CloudWatch": "blue"
        }
      }
    }
  },
  3. Click Save to apply the changes.

Embed settings

The Embed visualization will embed a web page using a returned URL, when only one URL is returned.

For troubleshooting embedded websites see Why isn't my site showing?

Mapping

This allows you to select the column which you wish to use for the embedded URL.

Gauge settings

The Gauge visualization shows a single value, often a percentage, in relation to minimum and maximum values. Monitoring can be added so the gauge color changes based on your configured parameters.

This short one minute video shows how to configure the gauge visualization:

Mapping

Value
Choose which column or count to use as the value for the gauge. Auto <column> shows the column which was selected automatically for you.

Configuration

Range
Specify the min and max of the gauge.
Label
Add a label to be shown beneath the gauge.
Monitoring
You can configure Monitoring (from the Monitoring tab) and then the colors configured for the conditions will show on the gauge. Check that the Data chosen in the Visualization (e.g. count) and the Value (and Column where applicable) that you are Monitoring (e.g. count) are as intended.

Was this article helpful?

Have more questions or facing an issue?
Submit a ticket