Widgets

Widgets are designed to visualize data from objects and links.

image

Widgets can be added to any object or link using data from any object or link in the system. For example, to create dashboards or reports.

Widgets displaying

Widgets are displayed:

Widgets creation

To create a new widget it is necessary to:

  1. Open the window Add widget with one of the following ways:

    • in the object or link End view click the button image in the panel Breadcrumbs;

    • in the Standard view click the icon image after hovering the mouse cursor over the object, or in the link pop-up window.

  2. Select widget type.

  3. Select an object to get data from (by default it is the current object).

  4. Select a metric to display.

  5. Set widget specific parameters.

To edit image or delete image a widget it is sufficient to put the mouse cursor over the widget and click the corresponding icon.

Widgets order and size can be changed by dragging-and-dropping.

Widgets publishing on external sites

Widgets can be embedded into an external site.

embedded graph

To embed a widget, do the following:

  1. Hover the mouse cursor over the widget.

  2. Click the image button (widget code).

  3. Copy and paste the HTML code to your page.

Embedded widgets contain the following data:

  • time period of data showing (for charts),

  • header (label).

Embedded widgets are not updated in real time. Refresh the page to get updated data.

The following widgets can be embedded:

Widget settings

Embedded widgets can be customized.

Generated source code of the embedded widget
<iframe
    src="http://192.168.1.48/embedded-widgets/html/chart.html?token=71656418-8912-42a3-b151-3b91c63df707&height=160&width=250&linkUrl=http://saymon.info/&linkName=SAYMON&duration=3600000&metricCaption=roundTripAverage"
    height="215" width="262" frameborder="0">
</iframe>

Widgets parameters:

  • src – link to metric;

  • height – height of the iframe component. Does not influence the chart height;

  • width – width of the iframe component. Does not influence the chart width;

  • frameborder – width of the border around the widget (in pixels).

Link parameters:

  • token – API token that is used to get the metric data without additional authentication. You can find more information about using and generating those tokens in the REST API documentation;

  • height – chart height. Does not influence the widget height;

  • width – chart width. Does not influence the widget width;

  • linkUrl – URL of the widget link;

  • linkName – text of the widget link;

  • duration – amount of time for which to show the data on the chart (in milliseconds);

  • metricCaption – caption of the metric displayed on the chart. Can be different from the metric name in SAYMON object.

You can configure default values of the linkUrl and linkName parameters in the Web application configuration.

Examples

There are some examples of setting widgets up using different fields.

Examples of using count

Present moment

Script execution has been set and it gets the metric date (today’s date) with the value 15.

With setting up the minimum weekly value:
image
Result = metric value (15) - Period (7 days). The widget will display the date of 8.

Calendar period

Script execution has been set and it gets the metric date (today’s date) with the value of 15 (Thursday).

With setting up the minimum weekly value:
image
Result = metric value (15) - Period (Monday). The widget will display the date of 12.

Example of using period offset

Website availability is checked with the sensor Ping, and the metric packetsReceived is obtained. Its average value for the previous week can be displayed on the widget by turning the switcher For previous period into the position YES and defining "1" as the offset.

image

Example of using dictionary

The door open sensor sends the values "1" and "0", which corresponds to the door opening and closing respectively. To display the state of the door in a human-readable form, it is possible to add to the widget the dictionary with the values:

  • 0 = the door is closed;

  • 1 = the door is opened.

The sensor fixed the door opening and sent the value "1". These data are compared with the dictionary:

image

The value The door is opened will be displayed on the widget.

Example of using multiline text

With executing an HTTP request, the metric body is returned. The value of the metric is multiline text.

With switching the slider Multiline to the position YES and specifying the font size, the response body will be displayed on the widget fully.

image