Configuring Widgets


Other than displaying measured data in various charts with different styles, you can configure charts to:

  • Use calculated fields
  • Formatting Rules: change color depending on data values
  • Configure Widget Links
  • Export data as a CSV file
  • Maximize and minimize widgets
  • Group Widgets
  • Trend Analysis


Configuring Calculated Fields


Adding Calculated Fields


You can add a new calculated field by following these steps:

  1. In the Edit Chart window, navigate to Data Fields.
  2. Select Add Data Field.
  3. Select Add Calculated Field. The Calculated Data dialog appears.
  4. In the Name box, specify a name for your new calculated field.
  5. From the Data Type list, select the data type for the calculated field so that Javascript knows how to return its value.
  6. In the Javascript field, write your Javascript function body. Some examples and all the names of the fields and parameters are provided in the right panel.
  7. In the Remarks box, you can write some comments or a description for your new calculated field.
  8. Select OK.

For more information about how to write calculated fields, see Calculated Fields.

Editing a Calculated Field


You can make changes to an existing calculated field by following these steps:

  1. In the Edit Chart window, navigate to Data Fields.
  2. Select Add Data Field or the name of an existing data field.
  3. Locate the calculated field to be modified.
  4. In the Actions column of the calculated field, select Edit edit.
  5. Select Save.


Note

To reflect the changes on the chart, select Refresh Data on the toolbar.


Setting Formatting Rules


In some widgets, you can configure it to change color depending on its measurement data. This enables users to quickly notice anomalies or critical values.


Only these widgets support formatting rules:

  • Donut Gauge
  • Meter Gauge
  • Mix Gauge
  • Mix Chart
  • Cartesian Coordinate System Chart
  • Progress Bar
  • Indicator Card
  • Metric Card
  • Liquid Fill
  • Table
  • Rich Text
  • Asset List
  • List


You can set formatting rules by following these steps:

  1. Navigate to Chart Style > … > Formatting Rules.

    Note

    Different chart types have different paths.

  2. Select Add to add a formatting rule. A row of empty fields appears.

    • The first and second boxes define the minimum and maximum values that satisfy the formatting rule respectively.
    • (If available) The third box defines the content to be displayed.
    • In the last box, pick the color you want to display when the formatting rule is satisfied.


../../_images/formatting_rules.png


Note

  • Support dynamic passing of parameters. For more information, see Configuring Parameters.
  • When you have multiple conflicting formatting rules, the topmost rule will take precedence. You can change their order by dragging them up/down through the hamburger button.


Exporting Widget Data


You can enable your users to export data from widgets for further analysis on their local machines. The data is exported to a CSV file.


Enable your widget to export data by following these steps:

  1. Go to the Chart Settings > Basic.
  2. Select the Allow Data Export checkbox.
  3. Select Save.


Export widget data by following these steps:

  1. In the Page Editor, navigate to a published page by doing either of the following:
    • On the Toolbar, select preview button eye to see a preview of the published page.
    • On the Toolbar, hover over the ellipsis (…) and select Publish. Select the URL shown to enter the published page.
  2. Hover over a widget and select Export CSV export_data_icon at the top right corner of the widget to download the exported CSV file.


The CSV file is exported in the order of Dimensions, Comparison and Measurements, and then sorted by the order of the data fields within those three categories. If an Alias is written for the data field, the exported CSV file will display the Alias. If it is left empty, the original name will be used. Any units that the data field is configured to have been exported as well.


../../_images/alias.png


Note

  • If both Allow Data Export and Allow Maximize boxes are checked, they will be grouped and the ellipsis (…) will appear instead their buttons. Hover over it and the functions will appear in a dropdown menu.
  • Exporting data is not supported for Picture and Rich Text widgets.


Maximizing Widgets


To enable a clearer view of widgets, you can configure widgets to display in a full-page maximized view.


Enable widget maximization by following these steps:

  1. The checkbox for a widget and a container are located in different places:
    • For widgets, navigate to the Chart Settings and select the Basic tab.
    • For containers, navigate to Container Settings and then to Other Options.
  2. Select the Allow Maximize checkbox.
  3. Select Save.


Maximize a widget by following these steps:

  1. In the Page Editor, navigate to a published page by doing either of the following:
    • On the toolbar, select preview button eye to see a preview of the published page.
    • On the toolbar, hover over the ellipsis (…) and select Publish. Select the URL shown to enter the published page.
  2. Hover over a widget and select Maximize maximize_widget_icon at the top right corner of the widget to maximize it.


../../_images/maximized_view_widgets.gif


Note

  • If both Allow Data Export and Allow Maximize boxes are checked, they will be grouped and the ellipsis (…) will appear instead their buttons. Hover over it and the functions will appear in a dropdown menu.
  • The maximized view is not supported for filter widgets. It is only available for chart widgets and widgets in containers.


Widget Grouping


You can group widgets to enable interactive data display across different widget types. This means that you can link the dimension data of charts within a group, thereby enabling cursor display on the charts to be synchronized.


Group widgets by following these steps:

  1. On the dashboard editor page, select Page Settings > Widget Grouping to open the widget grouping window.
  2. All existing widgets from the dashboard are displayed in a tab on the pop-up window.
  3. Drag and drop the widget into groups.
  4. Drag and drop the widget back into the tab to remove it from a group.
  5. Select OK to save widget grouping.


Note

Only widgets with matching dimension, measurement or comparison data values can trigger the interactive display function.


Button Grouping


You can group buttons, and when a button in the group is linked with a widget that is highlighted, the other buttons are unhighlighted.


Group buttons by following these steps:

  1. On the dashboard editor page, select Page Settings > Button Grouping to open the button grouping window.
  2. All existing buttons from the dashboard are displayed in a tab on the pop-up window.
  3. Drag and drop buttons into groups.
  4. Drag and drop button back into the tab to remove it from a group.
  5. Select OK to save button grouping.

Trend Analysis


Some widgets support trend analysis of measurements to help see the trend of that measurement data over a period of time.


Only these widgets support trend analysis:

  • Topology
  • Metric Card
  • Table
  • Mix Chart
  • Progress Bar


You can add data fields for trend analysis by following these steps:

  1. Select the measurement data field that you want to add for trend analysis. .. note:: You need to select the Open Trend Analysis configuration item in the measurement style, and when the mouse hovers over the measurement data item, the trend analysis prompt will be displayed. The topology widget does not have this configuration item and is enabled by default.


  2. In Trend Analysis at the bottom right corner of the page, you can check the list of added data fields, remove some by clicking the x button beside their names, or remove all of them by clicking bin.

    Note

    In the topology widget Trend Analysis is located in the upper right corner of the widget.


  3. Select Analyze to open the Trend Analysis page to view the recent data trends for the selected data items.


../../_images/trend_analysis.png