The Custom Metric widget lets you design a fully custom data visualization directly inside your dashboard. If the standard Ubidots widgets don't cover your use case, Custom Metric fills that gap with a guided three-step editor and a live preview that updates as you configure it.
Changes are reflected in real time as new data arrives from your devices.
Requirements
An active Ubidots account on an Industrial or Enterprise plan.
1. Create a Custom Metric widget
Click on the top-right "+" icon.
Select the Custom Metric option. An editor opens up.
The editor moves through three tabs: Widget type → Data → Build. You can move back and forth between tabs at any time before saving.
1.1. Step 1 — Widget type
Choose a starting layout for your widget. Two templates are available, "Single value" and "Blank".
Click Continue to Data to proceed.
1.2. Step 2 — Data
Set the widget's data source. A live preview updates alongside as you make changes.
Set the widget name
Add variables. Click + Add variables and use the device browser to find the variable you want.
Configure each variable. For each variable, set an aggregation (last value, mean, sum, min, max, and others) and a time span (follow the dashboard's global range or lock it to a fixed window).
Click Continue to Build when your data is set up.
1.3. Step 3 — Build
The Build step opens a file and code editor. This is where the widget's appearance is defined in JSX and HTML.
🗎 File panel
Lists all files in your widget's project
Click any file to open it in the editor
Main entry point is
src/Widget.jsx
👁 Code / Preview toggle
Switch between the code editor and a live render
Preview uses dummy data when no real data is present
A "This is dummy data" badge appears in preview mode
Tip: You don't need to write code manually. The AI assistant (see Section 7) can apply changes for you based on a plain-language description. |
1.4. AI assistant and Appearance
Two panels sit alongside the editor at all times and can be toggled via the tabs in the top-right corner.
AI assistant (Chat tab)
Describe a change in plain language and the assistant will edit your widget code and apply it.
Examples of what you can ask:
"Make the number bigger"
"Turn this into a gauge"
"Add a status color based on threshold"
"Show the last update timestamp"
After each change, you can see exactly what the assistant modified. If the result isn't what you wanted, click Cancel to discard it and try again.
Appearance tab
Visual controls for the widget's container, independent of the widget code itself.
Set by dashboard. When toggled on, the widget inherits your dashboard's global style. Turn it off to customize individually.
Background. Preset, solid color, or gradient fill; option to set a background image.
Border. Color, weight, style, and corner radius.
Shadow. Preset or custom shadow.
Header. Define font settings, text alignment, and background color. Toggle off to remove the header entirely.
To finnish the creation process, click the "save" button.