Widgets

Widgets from the M2X Dashboards offer you a powerful way of visualizing your data and can be easily embedded in your own website.

Widget Types

There are seven different types of widgets:

  • Line Chart A line chart displays data points from one or more Device Streams over intervals of time. Ideal for identifying trends and comparing multiple Streams of data.
  • Bar Chart Compare stats for any number of Streams across any number of devices. Available stats include average, minimum, maximum, standard deviation and current values.
  • Radial Chart Displays the current value of a single Device Stream in real time on a radial dial. Ideal for real time monitoring applications.
  • Stream Activity Log A table which lists Stream activity for all Streams associated with a single Device. Ideal for monitoring Device Stream activity in real time.
  • Device Stats A table which lists all Streams for a single device and their respective stats. Stats include average, minimum, maxiumum, and current values. Ideal for monitoring and comparing Device Stream stats.
  • Trigger Indicator Displays the current state of a single Trigger from a single Device. If all of the Trigger's conditions are currently satisfied, the Trigger's state is considered "activated". Ideal for real time monitoring applications.
  • Geographic Map Displays the current location of one or more devices on a geographical map. Ideal for real time asset tracking.

Embed Code

The following is an example code snippet of widget embedding code which can be obtained from the individual dashboard or widget pages.

Please note that the script tag should be included only once in the page no matter how many widgets exist in that page.

<div class="att-m2x-widget" data-widget-url="http://api-m2x.att.com/v2/widgets/262241ff"></div>
<!-- Include the following script tag only once per page -->
<script src="https://m2x.att.com/widgets.js" async></script>

Customize

Widgets can be customized by adding extra params in the form of data attributes.

For example, if you want to specify the dimensions of your widget (which otherwise occupies all the space available by its container) you could add the data attributes width and height like this:

<div class="att-m2x-widget" data-width="300" data-height="200" data-widget-url="http://api-m2x.att.com/v2/widgets/262241ff"></div>
<!-- Include the following script tag only once per page -->
<script src="https://m2x.att.com/widgets.js" async></script>

Custom Params

The available custom params are the following.

  • width The desired width of the widget in pixels.
  • height The desired height of the widget in pixels.
  • localize-timestamps Boolean, defaults to false. Defines if timestamps will be displayed in UTC or local timezone.
  • start A timestamp in ISO 8601 format which will be used when quering the API for data.
  • end A timestamp in ISO 8601 format which will be used when quering the API for data.
  • limit An integer to be used to limit the returned values of the API for the Line chart. Defaults to 100 values.
  • type The sampling method to be used in Line chart if the specified interval (start/end params) contains more than 100 (or limit param) values.
  • poll-interval The poll interval for refreshing data in seconds. Defaults to 60 seconds.

The available params per widget are listed in the following table.


Line Chart Bar Chart Radial Chart Stream Activity Log Device Stats Trigger Indicator Geographic Map
width
height
localize-timestamps
start
end
limit
type
poll-interval