Metadata

Metadata

Metadata is one of the most important concepts when creating dashboards and widgets. Metadata is a piece of information that you can store in the variable payload.  

With metadata, it is possible to dynamically change the behavior of the widget and how it displays the variable data. For example, it can change a map pin color or place a heat map bubble in another position, and more.

{
  "variable": "current",
  "value": 5.3,
  "unit": "A",
  "metadata": {
    "color": "red",
    "my_application_id": "378392922",
  }
}

In metadata, you can build your own fields, so you can use them in your Analysis or Application. Also, some of these fields produce a different behavior displaying this data in the widget.

Metadata always has priority against customizing set by the widget edit screen. However, some widgets have an option so you can change that.

For example, we will use the color and icon metadata as the following JSON payload:

{
  "variable": "temperature",
  "value": 71,
  "metadata": {
    "color": "red",
    "icon": "car"
  }
}

Now you can create an Icon Widget, associate the variable temperature in the Data from the field, and it will automatically produce a red text with a car icon.

You can use your own icon, placing the SVG file URL in the icon field metadata. For your SVG to be displayed correctly, make sure that it has the property "viewBox" before using it.


Widget Metadata Field List

This is the list of metadata fields that are used in TagoIO's widgets. You can use it in your applications, and customize it as you prefer.

FieldDescriptionWidget
background_colorChanges the widget background color. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Angular, Card, Cylinder, Dial, Grain Bin, Image, Solid, Vu Meter
button_colorSets a color for the button. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Push Button, Step Button
chart_colorChanges the chart color. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Card
colorSets a color for this variable data. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Angular, Area Chart, Card, Cylinder, Dial, Dynamic Table, Grain Bin, Horizontal Bar, Icon, Image Marker, Keypad, Line Chart, Map, Multiple Axis, Pie, Semi Donut, Semi Pie, Solid, Static Table, Step Button, Vertical Column, Vu Meter
embedSets an embedded URL for the variable display. Compose, Image Marker
end_dateSpecifies the end of a date range. It accepts the date and time in the ISO 8601 format.Area Chart, Horizontal Bar, Line Chart, Multiple Axis, Vertical Column
iconSpecifies an icon for the variable data. It accepts the TagoIO icon's name, and an SVG file URL.Compose, Icon, Image Marker, Map
img_pinSets an image for the infobox. It only accepts image file URLs.Image Marker, Map
labelDisplays a label instead of the variable value.Compose, Dynamic Table, Image Marker, Map, Static Table
layerSets the specific layer id that this data is related to.Image Marker
limit_superiorSpecifies the end of a scale range. It only accepts numerical values.Angular, Dial, Cylinder, Grain Bin, Heat Map, Solid, Vu Meter
limit_inferiorSpecifies the start of a scale range. It only accepts numerical values.Angular, Dial, Cylinder, Grain Bin, Heat Map, Solid, Vu Meter
point_colorSets a color for the chart point (can be replaced by the color field). It accepts CSS color keywords or HSL, RGB, and HEX color codes.Area Chart, Horizontal Bar, Line Chart, Multiple Axis, Vertical Column

radiusSets a point radius for charts. It only accepts numerical values, and the default value is 4.Area Chart, Heat Map, Horizontal Bar, Line Chart, Multiple Axis, Vertical Column
start_dateSpecifies the start of a date range. It accepts the date and time in the ISO 8601 format.Area Chart, Horizontal Bar, Line Chart, Multiple Axis, Vertical Column
text_colorSets a color for the widget text. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Angular, Cylinder, Dial, Grain Bin, Push Button, Solid, Vu Meter
urlShows an external URL.Compose, Dynamic Table, Image Marker, Map, Static Table
url_labelAdds a custom label instead of showing the external URL link.Compose, Image Marker
xSets the x coordinate. It only accepts numerical values from 0 to 1.Compose, Image Marker, Heat Map
ySets the y coordinate. It only accepts numerical values from 0 to 1.Compose, Image Marker, Heat Map



Form Fields Metadata List

Some widgets, such as Input Form, Dynamic Table, and more, let the user edit variable data value through Form Fields. Some of them also use metadata for custom, and they are listed below.

Metadata fieldDescriptionForm field type
labelDisplays a label instead of the variable value.
Dropdown, Dropdown Multiple, Filtered Variables
end_date
Specifies the end of a date range. It accepts the date and time in the ISO 8601 format.
Calendar
start_date
Specifies the start of a date range. It accepts the date and time in the ISO 8601 format.
Calendar
typeChanges the box validation color. It accepts the following values: "success", "danger", "error", "danger-light", "error-light", "info", "warning" and "dark"Validation

    • Related Articles

    • Gauge - Data Range & Format

      Data Range & Format is the place where you can define the format and also the range of the data inside the gauge. Range Limits In the Range limits section you can set the minimum and maximum value displayed in the gauge. There are two different types ...
    • Sending Data

      A device can send data to TagoIO by using the POST method. POST https://api.tago.io/data KEY TYPE REQUIRED variable string [max 100 characters] yes unit string [max 25 characters] no value string/number/boolean [max 6kB]  no time string no group ...
    • Data Storage

      Data storage is related to the variables stored in the data buckets that are fed by the devices. Each register is composed of a variable and all metadata associated with it. The data storage limit will define the maximum storage capacity for the ...
    • Card Widget

      Use Card to display the last value of a variable, its unit, and a mini-chart. Card accepts links so that when users click on it, it may redirect them to another website, dashboard, or tab.  This widget also accepts features like metadata, that can be ...
    • Images and Links in the map's pins

      Developers can add an image and an url link to each pin on the map. To add images and URL to your pins, head over to Advanced Options by clicking in the options menu of the widget, and then in the Edit option. To set the image of the pin, set ...

    Webinar Announcement - Image Only

        Take a look at our updated roadmap here!
          What would you like to see on TagoIO?

            Future and past Webinars