Visualizations and Plugins¶

Dashboard Designer's visualization options allow you to get the most out of the data you want to visually analyze. This section includes both overviews and details that describe what each visualization or plugin does and its options and features.

About Functions¶

Functions associate or transform raw data into useful outputs that help you create meaningful dashboards. When queries request data, the data is automatically aggregated in a format similar to other Insights Hub Monitor apps.

Default Query Settings Overrides¶

When you want to query data in a way that differs from the default query settings, you can use functions to override the default query settings. See the Functions topic for more information.

Graph¶

Allows for the representation of multiple values over a period of time or as a histogram. This graph also displays data point details when you hover over a specific point:

Draw Modes¶

Bars displays the data as a bar chart.

Lines displays the data as a line graph.

Points displays the data as points on a graph.

Mode Options¶

Fill fills the area between the graph and the X- axis. (0 = no fill, 10 = full fill).

Line Width allows you to specify the width of the lines that display in a graph.

Staircase displays the data as a stepped line graph.

Hover Tooltip Modes¶

All Series displays graph series as a tool tip when you hover over graph data.

Single displays a single series as a tool tip when you hover over graph data.

Sort Order requires you to select "All Series" first, then you can change the tool tip order to 'none' which, in turn, allows the query's setting to prevail and the order, ascending or descending, is determined by what you select.

Stacking & Null Values¶

Stack enables data queries to stack on top of one another.

Null Value allows you to choose how null values display.

Connected skips null values and connects the graph's line to the next non-null value.

Null creates a gap in the line graph.

Null as zero renders null values as zeroes.

Series Override¶

Allows the selected series to display in a style different from the other elements.

Axes¶

Show displays the chosen axis. To assign data to the right Y-axis, use the Series Override function.

Unit allows you to select a unit for the axis data.

Scale changes the scale of the axis from Linear to log (base 2), log (base 10), log (base 32) and log (base 1024).

Y-Min & Y-Max sets the minimum of maximum value for the axis.

Decimals sets the number of decimals to display for the axis data.

Label displays labels on the axes.

X-Axis Mode¶

Time displays the data with reference to time.

Series displays the data grouped by series, and allows changing the type of data represented by selecting from the drop-down list options, avg, min, max, total, count, and current.

Histogram groups values as ranges, and allows customizing the number of ranges (buckets) to display, and filters to leave out specified min and max values.

Legend Options¶

Show displays the graph legend with the series name and color.

As table displays the legend as a table.

To the right displays the legend to the right of the graph.

Width sets the minimum width for the table (in pixels).

Values displays toggled values in the legend.

Hide series hides series that return only nulls or zeros.

Threshold & Time Regions¶

Threshold overlays visual thresholds on the graph to indicate greater than (gt) or less than (lt) the described value.

You can customize the threshold color, fill, line and which y-axis the threshold applies to.

Time Region overlays a visual indication of a time range (different days of the week); to time series data.

Singlestat¶

Displays the value of the queried data and only displays a single query.

Value displays the data according to the option selected within the selected time range. Includes Min, Max, Average, Current (latest), Total, Name (of series), First, Delta (total incremental increase (of a counter) in the series), Difference, Range and Time (stamp) of last point.

Prefix adds a prefix to the value.

Postfix adds a postfix to the value. Useful for custom units.

Unit adds a unit to the value, before the postfix.

Decimals sets the number of decimals that display.

Coloring¶

Background adds the selected color to the background of the panel.

Value adds the selected color to the value text.

Prefix adds the selected color to the prefix text.

Postfix adds the selected color to the postfix text.

Thresholds sets the thresholds for colored visualization.

Colors sets the colors that the threshold values represent.

Spark lines adds a basic line graph to the panel with custom visualization options available.

Gauge adds a gauge visualization behind the single stat with custom visualization options available.

Value Mappings allow values, or a range of values, to display as text.

!!! Note If you want the visualization of a Boolean value to render in color, set the threshold value to “0.1, 0.9”, which changes the first and last color to the color you specify.

Gauge¶

Displays a gauge with slightly different options compared to Singlestat.

All Values displays a separate gauge for each row of data, and the “Limit” input restricts it to a maximum number of rows.

Calculation displays a calculated value within the chosen data range.

Calculations you can select include:

• Last (current value)
• Minimum
• Maximum
• Mean
• Total count
• Delta (total incremental increase (of a counter) in the series
• Step (minimum interval between values)
• Difference
• Min (above zero)
• Change count (number of times the value changes)
• Distinct count (number of unique values)

Labels displays the gauge labels that are set in the "Thresholds" section

Markers displays the gauge color markers that are set in the "Thresholds" section)

Field Title adds a title or description beneath the value

Unit selects the unit of measure for the value

Min and Max select the minimum and maximum values for the gauge

Decimals sets the number of decimals to display

Thresholds sets the threshold value and associated color

Value Mappings allows for values (or a range of values) to display as text

Bar Gauge¶

Displays single data points in bars.

Show All Values displays a separate gauge for each row of data, the “Limit” input keeps it to a maximum number of rows

Calculation displays a calculated value within the chosen data range. Calculations you can select include:

• Last (current value)
• First
• Minimum
• Maximum
• Mean
• Total count
• Delta (total incremental increase (of a counter) in the series
• Step (minimum interval between values)
• Difference
• Min (above zero)
• Change count (number of times the value changes)
• Distinct count (number of unique values)

Bar Gauge Display¶

Orientation sets the bars to display horizontally or vertically

Mode selects the way to visually represent the bar gauge: Basic, Retro LED, or Gradient.

Fields¶

Title ads a title and description above the bar gauge

Unit select the unit for the value

Min and Max select the minimum and maximum values for the gauge

Decimals sets the number of decimals to display

Threshold sets the threshold value and the associated color

Value Mappings allows for values (or a range of values) to display as text

Breadcrumb¶

Breadcrumb is a panel plugin that tracks dashboards you visit during a session and displays them as a breadcrumb.

Dashboards are listed once even if you visit them more, and the names are hyperlinked for easy returns. Navigating back to a dashboard resets any navigation movements made after the dashboard you return to.

!!! Note Breadcrumbs only track dashboards that include a Breadcrumb panel.

Is Root¶

Is Root sets the current dashboard as the root and clears breadcrumbs in the root dashboard.

Is root dashboard clears the breadcrumb in the root dashboard.

Hide text in root dashboard displays nothing if the breadcrumb has only one item.

Limit the amount of breadcrumb items to limits the number of breadcrumb items and removes the oldest item when the number of items is surpassed.

Limit sets a limit on breadcrumb items. When the item limit is reached, the oldest item drops from the breadcrumb when a new one is added.

Table¶

Displays data in a table format.

Table Data¶

Table Transform sets the type of transformation(s) required:

Time Series to rows automatically sets columns as Time, Series Name, and Value.

Time Series to Column automatically sets columns as Time and Value.

Time Series Aggregations automatically sets columns as Series Name and Average, although you can substitute Min, Max, Avg, Total, Current (last value), or Count for Average.

JSON Data displays raw value data and timestamp data in JSON format.

Paging offers options for large amounts of data, like limiting the number of rows per page, adding page scrolling, and changing font size.

Column Styles¶

All column styles are editable. Use the:

Options identify the specific column to change by using the “Apply to columns named” input. You can change the column title (header) now, and, if you want, render the value as a link to click through.

Type depending on the column content data type, i.e., number, string, date, hidden, you can customize thresholds, apply colors to values, cells, and rows, and add value mapping, which transforms values or value ranges to text.

Text¶

Text is a simple panel that displays text that you can add using MarkDown or HTML formats.

Heatmap¶

Y-Axis¶

Unit: sets the unit for axis values.

Scale changes the axis scale from Linear to log (base 2), log (base 10), log (base 32) and log (base 1024).

Y-min & Y-max sets the minimum of maximum values for the axis

Decimals: sets the number of decimal placess to display for axis values.

Buckets¶

You can change both the number and size of data buckets according to visualization requirements for both the Y- and X-axes.

Data Format¶

You can change between time series and time series buckets.

Display¶

Numerous visualizations are available, for example, color mode (spectrum or opacity), color scale, show/hide legend, bucket visualizations, bucket spacing and shape, and tool tip display.

Dashboard List¶

Dashboard List Options¶

Starred displays favorite dashboards

Recently Viewed displays recently viewed dashboards

Search allows users to search dashboards from a panel

Show Headings displays dashboard headings

Max Items displays the input amount of dashboards

Search when “search” is enabled, dashboard display can be limited to set queries, folders or tags

Clock¶

Clock Options¶

Clock Mode sets the clock to show time or a countdown.

Background color sets the background color of the clock panel.

Countdown sets an action to trigger when the 'countdown' completes, like generating a text message.

Time format when you select “time”, additional options appear, including changing between 12 and 24 hours and changing the font size and weight.

Time Zone in both countdown and time clock modes, you can change the time zone display. Your selections here override settings specified for the dashboard. To change your dashboard's time zone, navigate to the dashboard and click the configure icon (upper right) and select the time zone (default, local or UTC in the General settings.

Refresh interval enables the Sync option so the clock synchronizes each time the page refreshes.

Pie Chart¶

Displays bucket data in a pie or donut chart.

Unit specifies a unit for pie chart values.

Value sets the value or calculation to apply to data from current (last value), minimum, maximum, average and total.

Divider width sets the width in pixels between pie chart segments.

Pie Chart Legend¶

Show Legend dipslays the legend on the panel.

Position sets the position of the legend relative to the pie chart.

Legend Breakpoint/ Width sets the relative size of the legend relative to its position on the panel.

Legend Values displays the values of the Pie Chart.

Values header overrides the name of the value column.

Values decimals sets the number of decimals to display.

Show Percentage displays the percentages of values that contribute to the segments in a pie chart.

CombineThreshold combines all values that are below a certain threshold. For example, if the range is 0 to 1, and you combine segments of less than 5%, the value combined is entered as 0.05 in the input.

Label provides a label to the combined segments.

!!! Note In case of trouble in displaying Pie Chart data, try changing the query's function to PercentageofTimeAs.

Scalable Vector Graphics (SVG)¶

The SVG panel can display displayng metric-sensitive SVG images. SVG is useful for defining vector-based graphics for websites in XML format. All elements of the attributes in SVG files can be animated, and animation events can be triggered by incoming data.

Demo SVGs¶

Check out the SVG demonstration examples provided with the SVG panel by navigating to the bottom of the options page and clicking the corresponding button.

Use SVG Builder allows the use of the SVG Builder.

SVG Data opens a field into which you can input SVG data.

Events: allows you to write events in JavaScript so your code executes upon every refresh.

Add SVG repository facilitates users' custom SVG graphics by forking the original project and adding them to the assets folder. If your repository is of general concern, and your license allows sharing, you can add it to the panel plugin via a pull request.

SVG Data pastes your svg code here. You must include a viewbox and IDs for all relevant objects.

!!! Note You cannot use the SVG Data editor together with the SVG Builder option checked!

onHandleMetric events execute upon every refresh; onHandleMetric(ctrl: MetricsPanelCtrl, svgnode: HTMLElement) ctrl passes a Dashboard_Designer MetricsPanelCtrl object that contains all data relevant to the current panel. You may want to use the ctrl.data array property to access the current measurement data.

svgnode passes the HTMLElement of the svg object on the panel. You can access the elements of the svg itself by using the integrated Snap Library. (http://snapsvg.io/)

Separator¶

Creates a blank panel you can use as a separator between dashboard panels.

ImageIt¶

Displays an image and overlays Insights Hub data on top of it.

Settings¶

Image URL is where you enter the URL of the image you want to display.

To display an image from an IoT file service, input the following address: .

Size Coefficient scales the size of the image.

Query you can add query values on top of the image using the sensor feature. For example, on the image of a factory floorplan, you can display the values of assets in different locations directly over the asset image on the floorplan.

Metric selects a previously selected query and displays it on top of the image.

Postfix overrides the name of the query.

Unit adds a unit to the value.

Decimals sets the number of decimals to display.

Display Name adds the name you configure to the variable, before the prefix.

Size Coefficient scales the size of the value.

Position selects the position of the sensor according to its X- and Y-coordinates.

Link adds a link that you can click to navigate to; for example, the link could open a dashboard related to the asset.

Hover text specifies text to display when users hover over the value.

Appearance changes how the value is displayed on top of the image. You can also create color mappings that trigger when value thresholds are crossed.

Traffic Lights¶

Show status data in traffic lights.

Traffic Light Options¶

Width limits the traffic light to a specified pixel width.

Font Size changes the font size displayed on the traffic light.

Font Color changes the font color displayed on the traffic light.

Show Value displays the value on the traffic light.

Unit adds a unit to the value.

Digits sets how many Digits are displayed.

Show Trend shows the trend of the data within the set time range.

Sort Lights changes the position of lights according to the values.

Render as link renders the traffic light as a link. Set up the URL in the Link section.

Design spreads traffic lights equidistant across the panel when more than one query is running.

Thresholds: Invert Scale Inverts the traffic light colors to display green at the top and red at the bottom.

Thresholds changes the threshold that activates the lights.