Bosch IoT Insights

Bar Chart widget

Using the Bar Chart widget, data can be displayed as a bar. The bars are based on coordinates for the x-axis and y-axis. A bar chart mostly represents a combination of time (x-axis) and another signal (e.g. pressure for y-axis).

Example

images/confluence/download/attachments/1083888413/widget_bar_chart_example_2020_09_14-version-1-modificationdate-1604330176000-api-v2.png

Proceed as follows

  1. Select the Bar Chart widget in the widget list.
    → The widget configuration page is displayed.

    images/confluence/download/attachments/1083888413/widget_bar_chart_configuration_2020_09_14-version-2-modificationdate-1618841386000-api-v2.png
  2. Configure the settings as described below.

  3. Click the Add button.
    → The widget is added to the dashboard.

To create this widget, the following settings are mandatory to be configured:

  • Data Source

  • X-Axis Data Path

  • Y-Axis Data Path

All other settings are optional.

Dashboard Settings

Open the Dashboard Settings pane to set how the widget is displayed in the dashboard.

  1. In the Size drop-down list, decide how much space the widget should take in the form of columns.

  2. In the Visibility drop-down list, decide whether the widget should be shown or hidden in the dashboard.

  3. In the Layout behavior drop-down list, decide how the size of the widget should be adapted in the dashboard.

  4. In the Title field, enter a title for the widget.

    For a dynamic title, you can add placeholders with the ${...} notation. Possible placeholder sources are filterParams (if a filter widget exists on the dashboard, e.g. ${filterParams.paramName}) or data from the data source (if source is specified, e.g. ${[0].payload.value}), insights (user context), dashboardName or widgetId.

General Settings

Open the General Settings pane to configure some general aspects for the widget.

  1. In the Widget Refresh Interval in Seconds field, enter a value in seconds after which the widget should be refreshed.

  2. In the Lazy Loading drop-down list, select whether you want to enable or disable lazy loading.

    Lazy loading is enabled by default. That way, widgets are only loaded when they are visible on screen. This prevents slower loading of the dashboard and performance issues.

Data Sources

Open the Data Sources pane to configure the data source for the widget.

You can select a maximum of three data sources.

  1. Click the + Add Source button to add a data source.

  2. Select any of the following options further explained underneath:

Query Template

  1. In the Query Template drop-down list, select a query template that you configured under Explore > Data Explorer, refer to Creating a query template.

    A query template is a template that has been created, parameterized, and provided for others. It is similar to an SQL View and shows data in a table view.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference-version-1-modificationdate-1616506558000-api-v2.png and select the Filter Panel.

    If you have a time parameter, you can choose between absolute time, relative time, and a preset by clicking the time icon images/confluence/download/thumbnails/1083888325/icon_absolute_relative_time-version-1-modificationdate-1616506558000-api-v2.png .

  2. For Caching, add the Duration in seconds to load existing cache entries that match your parameters during that time frame.

    The default cache time of 30 minutes is set automatically.

  3. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh-version-1-modificationdate-1602594207000-api-v2.png to open a preview.

  4. Click the Save Data Source button.

Single Device

  1. In the Default Device ID drop-down list, select a Device ID.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference-version-1-modificationdate-1616506558000-api-v2.png and select the Filter Panel.

  2. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh-version-1-modificationdate-1602594207000-api-v2.png to open a preview.

  3. Click the Update Source button.

Multiple Devices

  1. In the Select Device Types drop-down list, select a device type.

  2. Click the Advanced Settings button to narrow down the output.

  3. In the Start field, enter a value to specify the device to start with.

    Example: If you select 3, the first two devices are skipped.

  4. In the Limit field, enter a value to specify the last device.

    The maximum is 200 devices.

  5. In the Fields field, enter the fields whose information shall be retrieved from Bosch IoT Things.

  6. In the Sort field, enter a field configured in Bosch IoT Things according to which the data shall be sorted.

  7. In the Namespaces field, add namespaces separated by a comma.

  8. In the Filter field, add a filter to narrow down the search results. Placeholders are also supported.

  9. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh-version-1-modificationdate-1602594207000-api-v2.png to open a preview.

  10. Click the Update Source button.

Device Count

The Device Count data source is based on the counting functionality in Bosch IoT Things and is used to count things.

  1. In the Select Device Type drop-down list, select the device types/devices to be used as data source.

    • All Devices: Counts all devices regardless of the fact that they have a device type or not

    • All Device Types: Counts the devices that have the thing attribute type which means that the device belongs to a device type

    • Without Device Type: Counts the devices without the thing attribute type

    • Device Type xy: Counts the devices of the selected device types

  2. Click the Advanced Settings button to narrow down the output.

  3. In the Namespaces field, add namespaces separated by a comma.

  4. In the DefaultFilter field, add a filter to narrow down the search results.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference-version-1-modificationdate-1616506558000-api-v2.png and select the Filter Panel.

  5. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh-version-1-modificationdate-1602594207000-api-v2.png to open a preview.

  6. Click the Update Source button.

Devices from Filter Selection

Devices will be loaded that match the Device filter type configured in the Filter Panel widget.

  1. In the Pagination Limit field, enter a limit of devices that shall be displayed per page.

  2. In the Sort field, enter a property according to which the devices shall be sorted.

  3. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh-version-1-modificationdate-1602594207000-api-v2.png to open a preview.

  4. Click the Update Source button.

Playback: All Frames

The Playback widget must have been configured for your dashboard.

  1. Select Playback: All Frames to display all data that has been recorded.

Playback: Current Frame

The Playback widget must have been configured for your dashboard.

  1. Select Playback: Current Frame to display the data that is just being recorded.

External Data Source

Using the external data source, an external endpoint can be specified to reference data.

  1. Select an HTTP method.

  2. In the Request URL field, enter the URL of the request.

  3. In the Type drop-down list, select the type of authorization.

  4. Click the Set Configuration button to set up the selected authorization.

    1. For Basic Auth:

      1. In the Username field, enter the username.

      2. In the Password field, enter the password.

    2. For OAuth 2.0

      1. In the Grant Type drop-down list, select the type of credentials.

      2. Enter the Access Token URL.

      3. Enter the Client ID.

      4. Enter the Client Secret.

      5. If you selected Password Credentials as Grant Type, also enter the Username and the Password .

    3. For OAuth 2.0 (On-behalf grant type)

      1. In the Grant Type drop-down list, select Azure AD On-Behalf.

      2. Configure the scopes of your application API as described in External data source: on-behalf-of (OBO) flow.

  5. If you selected the GET HTTP method:

    1. In the Headers pane, enter a key and a value to specify the header information of the external system.

    2. Activate the Secret Header checkbox to flag the header as secret.

      When editing the data source, the header information has to be provided.

    3. In the Test Parameters pane, enter a filter parameter to test it.

      This pane can be used if a filter widget is configured for the dashboard. The filter values can be referenced as described in this pane within the URL and Headers.

      Modifiers can be used to manipulate referenced filter values. The following modifiers are available:

      • noencode: Only used in URLs. The value is not encoded as it is done by default.

      • join: Concatenates multiple values in one string separating them with the provided separator.

      • replace: Replace multiple occurrences of a search pattern with a specified replacement pattern.

      • queryParams: Creates an entry with the provided parameterName for each value.

      • relativeTimestamp: Calculates a relative time according to the current time. It offers a way to dynamically change the time range with the use of the Filter Panel widget, e.g. gt{$filterParams.dateTime.from | relativeTimestamp}

      • addTime:<insert number in milliseconds>: Calculates the relative time according to the given time from insights.timestamp and using the number from addTime, e.g. gt{insights.timestamp | addTime:-300000}. This modifier is designed for static usage so that a Filter Panel widget is not required. A positive number is also allowed if relevant.

      Usage examples:

      Example filter context:

      {

      "multi": ["v1", "v2"],

      "mixedValues": ["v1", undefined, "v2"]

      }

      join:

      ${filterParams.multi | join: ','} will result in v1,v2

      replace:

      ${filterParams.mixedValues | replace: 'undefined','N/A'} will result in ["v1","N/A","v2"]

      queryParams:

      ${filterParams.multi | queryParams: 'multiParam'} will result in multiParam=v1&multiParam=v2

      Independently from the test parameters, user-specific information and randomly generated sequences (UUID v4, alphanumeric or hex string) can be referenced.

  6. If you selected the PUT HTTP method:

    1. In the Body pane, select the type of data in the Type drop-down list.

    2. Activate the Secret Header checkbox to flag the header as secret.

      When editing the data source, the header information has to be provided.

    3. In the Test Parameters pane, enter a filter parameter to test it.

      This pane can be used if a filter widget is configured for the dashboard. The filter values can be referenced as described in this pane within the URL, Headers and the Body.

      Modifiers can be used to manipulate referenced filter values. The following modifiers are available:

      • noencode: Only used in URLs. The value is not encoded as it is done by default.

      • join: Concatenates multiple values in one string separating them with the provided separator.

      • replace: Replace multiple occurrences of a search pattern with a specified replacement pattern.

      • queryParams: Creates an entry with the provided parameterName for each value.

      • relativeTimestamp: Calculates a relative time according to the current time. It offers a way to dynamically change the time range with the use of the Filter Panel widget, e.g. gt{$filterParams.dateTime.from | relativeTimestamp}

      • addTime:<insert number in milliseconds>: Calculates the relative time according to the given time from insights.timestamp and using the number from addTime, e.g. gt{insights.timestamp | addTime:-300000}. This modifier is designed for static usage so that a Filter Panel widget is not required. A positive number is also allowed if relevant.

      Usage examples:

      Example filter context:

      {

      "multi": ["v1", "v2"],

      "mixedValues": ["v1", undefined, "v2"]

      }

      join:

      ${filterParams.multi | join: ','} will result in v1,v2

      replace:

      ${filterParams.mixedValues | replace: 'undefined','N/A'} will result in ["v1","N/A","v2"]

      queryParams:

      ${filterParams.multi | queryParams: 'multiParam'} will result in multiParam=v1&multiParam=v2

      Independently from the test parameters, user-specific information and randomly generated sequences (UUID v4, alphanumeric or hex string) can be referenced.

  7. If you selected the POST HTTP method:

    1. In the Body pane, select the type of data in the Type drop-down list.

    2. Activate the Secret Header checkbox to flag the header as secret.

      When editing the data source, the header information has to be provided.

    3. In the Test Parameters pane, enter a filter parameter to test it.

      This pane can be used if a filter widget is configured for the dashboard. The filter values can be referenced as described in this pane within the URL, Headers and the Body.

      Modifiers can be used to manipulate referenced filter values. The following modifiers are available:

      • noencode: Only used in URLs. The value is not encoded as it is done by default.

      • join: Concatenates multiple values in one string separating them with the provided separator.

      • replace: Replace multiple occurrences of a search pattern with a specified replacement pattern.

      • queryParams: Creates an entry with the provided parameterName for each value.

      • relativeTimestamp: Calculates a relative time according to the current time. It offers a way to dynamically change the time range with the use of the Filter Panel widget, e.g. gt{$filterParams.dateTime.from | relativeTimestamp}

      • addTime:<insert number in milliseconds>: Calculates the relative time according to the given time from insights.timestamp and using the number from addTime, e.g. gt{insights.timestamp | addTime:-300000}. This modifier is designed for static usage so that a Filter Panel widget is not required. A positive number is also allowed if relevant.

      Usage examples:

      Example filter context:

      {

      "multi": ["v1", "v2"],

      "mixedValues": ["v1", undefined, "v2"]

      }

      join:

      ${filterParams.multi | join: ','} will result in v1,v2

      replace:

      ${filterParams.mixedValues | replace: 'undefined','N/A'} will result in ["v1","N/A","v2"]

      queryParams:

      ${filterParams.multi | queryParams: 'multiParam'} will result in multiParam=v1&multiParam=v2

      Independently from the test parameters, user-specific information and randomly generated sequences (UUID v4, alphanumeric or hex string) can be referenced.

  8. In the Duration in seconds field under Caching, specify the caching duration in seconds.

  9. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh-version-1-modificationdate-1602594207000-api-v2.png to open a preview.

  10. Click the Save Data Source button.

Data Transformation

With the data transformation activated, you can select entries from arrays in arrays or a specific range of arrays.

Also refer to the JMESPath documentation.

Open the Data Transformation pane to activate the data transformation to JMES.

  1. Activate the toggle switch.

  2. In the Filter field, add a string to filter the data, e.g. [0] to display only the first item or [?contains(thingId,'yourThingName')] to filter by contains in the thingId property.

  3. Click the Transformed data preview icon images/confluence/download/thumbnails/1081316247/icon_widget_refresh-version-1-modificationdate-1675069110000-api-v2.png to open a preview.
    → The data transformation is activated for the widget.

If you selected more than one data source, the Data Aggregator pane is displayed.

  1. Activate the toggle switch.

  2. In the Data Aggregator drop-down list, select an aggregation method with which each entry of the same index is merged into one result.

  3. Activate the Merge Properties checkbox to merge the properties of the index.

  4. In the Filter field, add a string to filter the data, e.g. [0] to display only the first item or [?contains(thingId,'yourThingName')] to filter by contains in the thingId property.

  5. Click the Transformed data preview icon images/confluence/download/thumbnails/1081316247/icon_widget_refresh-version-1-modificationdate-1675069110000-api-v2.png to open a preview.
    → The data transformation is activated for the widget.

Chart Settings

Open the Chart Settings pane to define layout of the chart.

  1. In the Chart Height field, enter a value for the height of the chart.

  2. In the Zoom Mode drop-down-list, select which axis can be zoomed.

  3. Activate the Support Playback Cursor checkbox to load the data from the Playback widget that you configured before.

  4. Click the Advanced Settings drop-down menu to further configure the chart widget.

    1. In the Chart Margin Left field, enter a value to define the margin for the left side.

    2. In the Chart Margin Right field, enter a value to define the margin for the right side.

    3. In the Chart Margin Top field, enter a value to define the margin for the top.

    4. In the Chart Margin Bottom field, enter a value to define the margin for the bottom.

Bar Chart Settings

    1. In the Bar Mode drop-down list, decide how multiple bars shall be displayed (e.g. stacked) in one chart.

      This only applies if the group/stack by path is given or if to two or more bar chart traces are configured in one coordinate system.

    2. In the Bar Normalization drop-down list, select a normalization type.

Axis Settings

Open the Axis Settings pane to define the axes of your chart.

  1. Open the X-Axis Settings pane to define the x-axis.

    1. In the X-Axis Title field, enter a title for the x-axis.

    2. Deactivate the X-Axis visible checkbox to hide the x-axis.

    3. In the X-Axis Type drop-down list, select the type of value to be displayed in the x-axis.

      • Auto: The x-axis type is set automatically. This is the default setting.

      • Linear: Sets normal values as x-axis.

      • Logarithmic: Sets values as x-axis in a logarithmic arrangement.

      • Date Time: Sets the timestamp as x-axis.

      • Category: Adds a superordinate group to the values.

      • Multicategory: Adds superordinate groups to the values.

    4. In the X-Axis Tick Prefix field, enter a prefix that precedes each x-axis value, e.g. Temp.

    5. In the X-Axis Tick Suffix field, enter a suffix that succeeds each x-axis value, e.g. °C.

    6. In the X-Axis Tick Format drop-down list, select the format of the value that are displayed in the x-axis.

    7. In the X-Axis Range Mode drop-down list, select the range in which the values shall be displayed.

      1. If you selected Custom Range:

        1. In the drop-down list next to the Minimum Value field, select one of the following options:

          • Value
            Enter any value.

          • Data Source
            Select a parameter path from the drop-down list.

          • User Context
            Select user information to be displayed, e.g., User ID, User Email, or the time zone.

          • Filter Widget
            Select the Filter widget you added to the dashboard.

        2. In the drop-down list next to the Maximum Value field, select one of the following options:

          • Value
            Enter any value.

          • Data Source
            Select a parameter path from the drop-down list.

          • User Context
            Select user information to be displayed, e.g., User ID, User Email, or the time zone.

          • Filter Widget
            Select the Filter widget you added to the dashboard.

  2. Open the Y-Axis Settings pane to define the y-axis.

    1. In the Y-Axis Title field, enter a title for the y-axis.

    2. Deactivate the Y-Axis visible checkbox to hide the y-axis.

    3. In the Y-Axis Type drop-down list, select the type of value to be displayed in the y-axis.

      • Auto: The y-axis type is set automatically. This is the default setting.

      • Linear: Sets normal values as y-axis.

      • Logarithmic: Sets values as y-axis in a logarithmic arrangement.

      • Date Time: Sets the timestamp as y-axis.

      • Category: Adds a superordinate group to the values.

      • Multicategory: Adds superordinate groups to the values.

    4. In the Y-Axis Tick Prefix field, enter a prefix that precedes each y-axis value.

    5. In the Y-Axis Tick Suffix field, enter a suffix that succeeds each y-axis value.

    6. In the Y-Axis Tick Format drop-down list, select the format of the value that are displayed in the y-axis.

    7. In the Y-Axis Range Mode drop-down list, select the range in which the values shall be displayed.

      1. If you selected Custom Range:

        1. In the drop-down list next to the Minimum Value field, select one of the following options:

          • Value
            Enter any value.

          • Data Source
            Select a parameter path from the drop-down list.

          • User Context
            Select user information to be displayed, e.g., User ID, User Email, or the time zone.

          • Filter Widget
            Select the Filter widget you added to the dashboard.

        2. In the drop-down list next to the Maximum Value field, select one of the following options:

          • Value
            Enter any value.

          • Data Source
            Select a parameter path from the drop-down list.

          • User Context
            Select user information to be displayed, e.g., User ID, User Email, or the time zone.

          • Filter Widget
            Select the Filter widget you added to the dashboard.

  3. Open the Y2-Axis Settings pane to define the y2-axis.

    1. In the Y2-Axis Title field, enter a title for the y2-axis.

    2. Deactivate the Y2-Axis visible checkbox to hide the y2-axis.

    3. In the Y2-Axis Type drop-down list, select the type of value to be displayed in the y2-axis.

      • Auto: The y2-axis type is set automatically. This is the default setting.

      • Linear: Sets normal values as y2-axis.

      • Logarithmic: Sets values as y2-axis in a logarithmic arrangement.

      • Date Time: Sets the timestamp as y2-axis.

      • Category: Adds a superordinate group to the values.

      • Multicategory: Adds superordinate groups to the values.

    4. In the Y2-Axis Tick Prefix field, enter a prefix that precedes each y2-axis value.

    5. In the Y2-Axis Tick Suffix field, enter a suffix that succeeds each y2-axis value.

    6. In the Y2-Axis Tick Format drop-down list, select the format of the value that are displayed in the y2-axis.

    7. In the Y2-Axis Range Mode drop-down list, select the range in which the values shall be displayed.

      1. If you selected Custom Range:

        1. In the drop-down list next to the Minimum Value field, select one of the following options:

          • Value
            Enter any value.

          • Data Source
            Select a parameter path from the drop-down list.

          • User Context
            Select user information to be displayed, e.g., User ID, User Email, or the time zone.

          • Filter Widget
            Select the Filter widget you added to the dashboard.

        2. In the drop-down list next to the Maximum Value field, select one of the following options:

          • Value
            Enter any value.

          • Data Source
            Select a parameter path from the drop-down list.

          • User Context
            Select user information to be displayed, e.g., User ID, User Email, or the time zone.

          • Filter Widget
            Select the Filter widget you added to the dashboard.

Chart Traces

Open the Add Chart Traces pane to select one or multiple additional chart traces that can be added to the chart.

The following chart traces can be added:

  1. Click the button of any chart trace.
    → The chart trace is added and can be configured as described in the corresponding chapters.

To remove a chart trace, click the Remove Trace button at the bottom of the corresponding chart trace configuration.

Trace: Bar Chart

  1. In the X-Axis Data Path drop-down list, select a parameter for the x-axis.

  2. In the Y-Axis Data Path drop-down list, select a parameter for the y-axis.

  3. In the Group/stack by drop-down list, select a parameter with which the values will be grouped or stacked in the legend.

  4. In the Text Data drop-down list, select a parameter that shall be displayed as text in the bars.

  5. In the Name field, enter a name for the line that will be displayed in the legend.

    The parameter you selected in the Y-Axis Data field will be automatically added.

  6. Click the Advanced Settings drop-down menu to further configure the line.

    1. Deactivate the Show in Legend checkbox to hide the grouped values.

    2. In the Text Position drop-down list, select the position of the text selected in the Text Data drop-down list.

    3. In the Orientation drop-down list, select the direction of the bars.

    4. In the Opacity drop-down list, select a value to define the opacity of the bars.

    5. Click the color square to select another color for the line or enter a color code.

    6. Deactivate the Visible checkbox to hide the line.

    7. In the Y-Axis Assignment drop-down list, select the y-axis that shall be displayed.

    8. In the Downsampling settings section, set an upper Limit so the amount of visible points will be reduced based on this configured limit and the zoom level.

      The limit has no effect if the checkbox Support Playback Cursor has been activated.

  7. Click the Tooltip Configuration drop-down menu to configure tooltips. Tooltips are displayed in the order they were added in the table.

    1. Click the Add Tooltip Row button.
      → A new tooltip row is added.

    2. In the Type drop-down list, select a type for the tooltip.

      • If you selected JSON Property:

        1. Add a Label.

        2. Add a Value.

      • If you selected Hyperlink:

        1. In the URL field, enter a URL or a file link.

          As opening a file link is considered a potential security risk, it is restricted by modern web clients.

          Therefore, in order to open this link from the widget later on, you can copy it from the dialog which appears when the link is clicked, and then paste it into your file explorer.

          Make sure that the link is trustable and correct before using it.

        2. In the Hyperlink Display Text field, enter the text that shall be displayed for the hyperlink.

        3. In the Action drop-down list, select whether the hyperlink shall be opened in the same tab, opened in a new tab, or copied to clipboard.

      • If you selected Text:

        1. Add Text.

          To add another tooltip, click the Add Tooltip Row button.

          To reorder the columns, drag and drop the column using the Move icon images/confluence/download/thumbnails/1083888413/icon_move-version-1-modificationdate-1604330176000-api-v2.png .

          To delete the column, click the Delete button.