A default metric widget will look similar to the below. For more details on creating a Metric Widget, check out this help center article.

However, with some simple adjustments you can easily change: 

  • the default text
  • the color of the value displayed.
  • the text font
  • the text font size
  • Add timestamps

To begin, open your Ubidots or Ubidots for Education account, and click the sprocket icon in the upper right corner of your already made Metric Widget to display the below settings box.

You might notice the widget settings for metrics is a text/HTML editor. The values in curly braces display a dynamic data input. You can display them in any order you wish just by clicking "insert context" in the editor menu. 

Adding a Timestamp

To quickly add a timestamp to your metric widget and reflect the last value's reading and the time it was received, you need only enter the line {{timestamp|date:'yyyy-MM-dd HH-mm:ss'}}  into the Metric Widget's setting screen, as shown below:

Edit Text and Color Using Code

If you prefer working with code, we have made this available too. Click the pencil icon in the editor menu, and the HTML script will be displayed: 



The first value corresponds to the variable we are working with. Here it is: Power.


{{result_data|number 2}}

This value represents the result of the mathematical operation we're implementing. In this example, it would be the average value of the variable "Power" obtained yesterday.



This value refers to the unit of measurement we previously chose when creating the variable. For this example, the unit of measurement is KW/S.

Time frame:


This value is telling Ubidots to show the time frame used in the operation: today, yesterday, a week ago, etc. 

*Do not change or modify these values (like erasing a curly brackets), otherwise an error might occur when the widget is displayed. 

Text like "On average" and "Was" is static and can be modified by the user to their preference.

Color Change:

To adjust the color of your widget's data, you can simply change the hex color in the source code. For example, we want to display the hex value #ff6666

Original Version: 

Edited Version:

As you see, we changed the value's color from the previous green to red. Also, you will notice different text, font, and display from our original example.

NOTE: Reference to the keywords below to know all the "keyboards" available by the Metric Widget:

  • result_data   => The value calculated by the widget  
  • context  => Calculated value's context
  • item_shared => Realated variable to the widget (the one that you choose once you create the widget) 
  • timeframe  => Operation choosed by the user (max, min, average, last_value) 
  • unit  => Variable's unit   
Did this answer your question?