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

To begin, open your Ubidots for Business 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. 

Edit Text and Color in Source Code

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

Variables: 

{{item_shared}}

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

Result:

{{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.

Unit:

{{unit}}

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:

{{timeframe|lowercase}}

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?