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. 

Color Options

You are able to configure colors for the text, background, and chart based on certain conditions. 

The conditions use the value of the selected variable to dynamically display the colors.

Colors can be controlled by the parameters defined in the widget configuration or by the metadata stored within the variable.


Using colors from Metadata

You can define the colors of the Card widget by using information stored in the metadata of the variable. 

Switch the option present on the Visualization tab, 'Override colors with the conditions define here' to False  to apply the colors from the metadata.

By default, the colors are defined by the conditions defined on the widget configuration.

Inside the metadata, the following fields can be used to define the color of each component:

"color"color for text
"background_color"color for the widget background
"chart_color"color for the mini-chart


Here's an JSON example:

{
  "variable": "current",
  "value": 5.3,
  "unit": "A",
  "metadata": {
    "color": "white",
    "background_color": "blue",
    "chart_color": "green"
  }
}
TIPYou can always enter colors using #HEX or RGB values instead of a color name. 
{
  "variable": "current",
  "value": 5.3,
  "unit": "A",
  "metadata": {
    "color": "#FFFFFF",
    "background_color": "blue",
    "chart_color": "rgb(44, 144, 223)"
  }
}

Mini-chart

A mini-chart can be added at the bottom of the widget to display up to the last 30 points (values). The chart is optional and the number of points are configurable. 

The mini-chart doesn't present absolute values, its purpose is only to depict the trend of the variable.


Clickable link

If you want the user to be redirected to another website, dashboard, or tab, just add a valid https link in the field inside the User Control tab.


Also check out:

  • Embedding widgets