Heat Map Widget

Heat Map Widget

With the Heat Map widget, you can build a colorful layer with bubbles representing the intensity of the variables on top of your image. The higher the value of the variable, the more red the bubble will be, and you can also add a heat scale to this layer.

This widget also accepts features like metadata, that can be set in your variable data.

Creating your own

To add it to your dashboard, choose the Heat map widget from the list and customize it to your preference. You can edit it by using the options located on the right side of the widget.

This widget works for both dashboards, Normal and Blueprint.

1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

Click on the cog icon to edit specific options for this variable, such as positions. Click on the close icon to remove this variable from the widget's data.

This field is dependent on the type of dashboard you are using; the difference is explained below.
1.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the data.

1.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the information.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.

2. Setting a background image

The image behavior is where you get the image URL from, and it can be three types: static, conditional, and dynamic.

You can use the TagoIO's file system to store the image, and cache the public URL.

2.1 Static

It displays the image from a static URL.

2.2 Conditional

Create conditions, where each condition will have an image URL associated with it, and if the variable linked in this field satisfies this condition, this image will be displayed.

2.3 Dynamic

This image URL comes from variable data.

3. Bubble position

To position the bubble, you need to set an x and y coordinate for your variable data. These numbers represent the x and position of the variable, with the coordinates (0,0) in the top left corner of the given image and coordinates (1,1) in the bottom right corner.

These coordinates can be set by two types:

3.1 Bubble position using metadata

The selected variable must have the x and y parameters inside the metadata parameter. x and y represent the coordinates where the heat bubble will be displayed. This value goes from 0 to 1, so if you want to show the bubble in the middle, send 0.5 for both x and y.

  "variable": "heat",
  "value": 71, //value must be a number
  "metadata": {"x":0.2, "y":0.3}

With the code above, the widget will show a heat bubble like this one:


3.2 Bubble position through the widget edit screen

Look at the below example of how to set the coordinates using the widget edit screen.

You can still use metadata, but if the metadata is not identified, the position through the widget edit screen will be used.

The last variable's data will produce a bubble in this position.

4. Range of scale

It is possible to create a custom range interval for the heat bar on the bottom of the image. By default, the scale is automatically generated based on the values of the variables.

This scale defines which color the variable data will produce. Additionally, even if you hide the heat bar, the color of the bubble will still respect this behavior.

It can be customized by fixed or dynamic values by using another variable's data. This field works like Gauge's range.

    • Related Articles

    • Map Widget

      Add the location of your variable to visualize your devices on the Map. You can also edit the icon and color of the pins, add images, create links, add geofences & filters, and more! The variable data should look like the following payload. Note that ...
    • Map filters

      You can filter the results being displayed in a map in order to minimize the amount of information shown, allowing you to find exactly what you are looking for.  1. Filter using pins' data In the widget's configuration, in Filter options, you can ...
    • Map Layer GIS

      Display geometries, boundaries, areas, roads, pipelines, and more with the Map widget layer GIS. Each layer is defined by GeoJSON files (.geojson, .json, .zip), which you can upload and manage, either statically or dynamically. Shapefiles are also ...
    • Geofences in map widgets

      Geofences allow developers to color parts of the map and determine events in specific areas. To create a geofence, go to Geofence options in your widget's configuration. Then, set the option Allow users to edit geofence to yes. You can choose to ...
    • 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 the ...