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 to assist you in understanding what each visualization or plugin does and the options and features that are part of it.

About Functions¶

Dashboard Designer uses "Functions" to associate or transform raw data into useful outputs for creating meaningful dashboards.

All data requested by queries in Dashboard Designer are automatically aggregated resulting in data that is aggregated in a similar fashion to other MindSphere applications.

Should you need to query data in a different way, you can use functions to override the default query settings.

Dashboard Designer Packages¶

Dashboard Designer offers three packages that vary in the visualizations that users can select from:

Basic package offers the following visualizations and plugins:

• Clock
• Pie Chart
• Table
• Gauge
• Text
• Dashboard List
• Graph widgets

Premium offers all the widgets in the Basic package, plus:

• Bar Gauge
• Heatmap
• Separator
• Alert List
• Singlestat widgets
• ImageIT
• Breadcrumb
• Cal - Heatmap
• Statusmap
• Traffic Light widgets

Add-On offers all widgets in the Basic and Premium packages, plus:

• SVG widget
• Direct access to the Dashboard Designer from the MindSphere Launchpad.

Graph¶

Allows for the representation of multiple values over a period of time or as a histogram. This graph image also shows the details that display when you hover over a specific point in the graph:

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 all graph series on the hover tool tip when the mouse pointer moves over the graphs data.

Single displays a single series on tool tips when the mouse pointer moves over the graph data.

Sort Order allows the hover tool tip order to be overridden to "none", which defaults to the order in the query, with the increasing or decreasing value being on top of the list depending on 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 the 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.

Unit selects 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 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.

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.

Other Options¶

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

Is root dashboard - Panel has an option for setting it as the root. If set, this will clear breadcrumb in root dashboard. Hide text in root dashboard - Don't show anything if breadcrumb has only one item Limit the amount of breadcrumb items to - The amount of breadcrumb items is limited by default. The oldest item is removed when exceeded.

Hide text in root makes no breadcrumb display if the breadcrumb has only one item in it.

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, Value)
• Time Series to Column automatically sets columns as Time and Value

• Time Series Aggregations automatically sets columns as Series Name and Average. You can change 'Avg' to Min, Max, Avg, Total, Current (last value), and Count.

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

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

Column Styles¶

Options all column styles are editable. To edit a specific column, first you have to identify it using the “Apply to columns named” input. Then the column title (header) can be overridden. You can also render the value as a link to click through.

Type depending on the data type of the column content (number, string, date, hidden), additional customization is possible for thresholds, applying colors to values, cells, and rows, and value mapping (changing values or ranges of values to text)

Text¶

A very simle panel that displays text. Write content using MarkDown or HTML. Use MarkDown to format the text.

Heatmap¶

Y Axis¶

Unit: selects the unit for the axis

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

Buckets¶

The number and size of the buckets can be changed according to visualization requirements for both Y and X axis.

Data Format¶

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 set 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. Selections you make here override selections made in dashboard settings.

If you want to change the time zone of the dashboard itself, navigate to the dashboard. Click the cog (configure icon) in the top right corner and click “General”. Select the time zone (default, local or UTC).

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

Pie Chart¶

Displays bucket data in a pie or donut chart.

Unit Adds a unit to the pie chart

Value Choose what value/ calculation will be applied data from Current (last value), Minimum, maximum, average and total

Divider width Change the width in pixels in between segments

The Legend¶

Show Legend shows the legend on the panel.

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

Legend Breakpoint/ Width Dependant on the location of the legend chose these inputs will change the relative size of the legend

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. The range is 0 to 1. Therefore, combining any segments less than 5% will be entered as 0.05 in the input.

Label gives a label to the combined segments.

SVG¶

Panel for displaying metric-sensitive SVG (scalable Vector Graphics) images. SVG is useful for defining vector-based graphics for websites in XML format. Not only can all elements of attributes in SVG files be animated, the animation events themselves can be triggered by data from MindSphere.

Use SVG Builder allows the use of the SVG Builder.

SVG Data opens a field into which you can input the 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 on github.

SVG Data pastes your svg code here. Don't forget to include a viewbox and IDs for all relevant objects.

Demos For a start check out the Demo-SVGs provided with the panel plugin. To load them go to the bottom of the options page and click the corresponding button.

Events onHandleMetric this code executes upon every Refresh; onHandleMetric(ctrl: MetricsPanelCtrl, svgnode: HTMLElement) ctrl passes a Dashboard_Designer MetricsPanelCtrl object. This object contains all relevant data pertaining 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¶

The Separator panel creates a blank panel that you can use to create separation between dashboard panels.

ImageIt¶

Displays an image and overlays MindSphere data on top of it.

Settings¶

Image URL Input the URL of the image you want to display.

To display an image from a MindSphere 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 where the assets exist.

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.

Any questions left?

Ask the community

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.