Animated Gauges

Demo to preview the plugin:

Introduction

This plugin makes use of the gauge.js library and allows you to add a wide variety of different gauges to your Bubble app.
You can heavily modify the look and feel of each gauge using this plugin and create a gauge according to your requirements.
Image without caption

How to setup

  1. Add a Gauge Element to Your Page
    1. In the Bubble editor, go to the Visual Elements tab and drag one of the following elements into your page:
      • Gauge
      • Gauge With 4 Zones
      • Gauge With 3 Zones
      • Gauge With 2 Zones
        • Elements.
          Elements.

Plugin Element Properties

Gauge

Element properties → Gauge.
Element properties → Gauge.
Fields:
Title
Description
Type
Value
The value of the gauge
Number
Animationspeed
The animation speed
Number
Maxvalue
The maximum value of the gauge
Number
Minvalue
The minimum value of the gauge
Number
Angle
The span of the gauge arc
Number
Linewidth
The line thickness
Number
Radiusscale
The relative radius
Number
Pointerlength
Relative to gauge radius
Number
Pointerstrokewidth
Thickness
Number
Pointercolor
Fill Color
Color
Limitmax
If false, max value increases automatically if value > maxValue
Checkbox (yes/no)
Limitmin
F true, the min value of the gauge will be fixed
Checkbox (yes/no)
Colorstart
The starting color
Color
Colorstop
The ending color
Color
Strokecolor
The stroke color
Color
Generategradient
Check if a gradient should be generated
Checkbox (yes/no)
High resolution support
High resolution support
Checkbox (yes/no)
Width
The width of the gauge
Number
Height
The heigh of the gauge
Number
TextFieldId
Specify the element Id of the text element that should be used to display the current value of the gauge. Go to Settings-> General of your App and check the option to expose html attributes to your elements. Drag a Bubble Text Element onto your page and position/style accordingly. In the bottom of the element inspector, enter a unique element id. Enter the same element id here.
Text (optional)

Gauge with 4 zones

Element properties → Gauge with 4 zones.
Element properties → Gauge with 4 zones.
Fields:
Title
Description
Type
Value
The value of the gauge
Number
Animationspeed
The animation speed
Number
Maxvalue
The maximum value of the gauge
Number
Minvalue
The minimum value of the gauge
Number
Angle
The span of the gauge arc
Number
Linewidth
The line thickness
Number
Radiusscale
The relative radius
Number
Pointerlength
Relative to gauge radius
Number
Pointerstrokewidth
The thickness
Number
Pointercolor
The fill color
Color
Limitmax
If false, max value increases automatically if value > maxValue
Checkbox (yes/no)
Limitmin
If true, the min value of the gauge will be fixed
Checkbox (yes/no)
Colorstart
The starting color
Color
Colorstop
The ending color
Color
Strokecolor
The stroke color
Color
Generategradient
Check if a gradient should be generated
Checkbox (yes/no)
High resolution support
High resolution support
Checkbox (yes/no)
Width
The width of the gauge
Number
Height
The heigh of the gauge
Number
TextFieldId
Specify the element Id of the text element that should be used to display the current value of the gauge. Go to Settings-> General of your App and check the option to expose html attributes to your elements. Drag a Bubble Text Element onto your page and position/style accordingly. In the bottom of the element inspector, enter a unique element id. Enter the same element id here.
Text (optional)
Zone1color
“zone1color” refers to a parameter or variable that defines the color associated with a specific zone or area within a software plugin or API.
Color
Zone1min
“zone1min” refers to the minimum allowable value for a specific zone within the software plugin or API.
Number
Zone1max
“zone1max” refers to the maximum value or limit set for a specific zone or area within a software plugin or API.
Number
Zone2color
“zone2color” is a function in the software plugin or API that converts zone data into corresponding color values.
Color
Zone2min
“zone2min” is a function or method that converts a time zone to its corresponding minute offset.
Number
Zone2max
“zone2max” is a function in the software plugin or API that calculates the maximum value within a specified zone or region.
Number
Zone3color
“zone3color” refers to the color property associated with the third zone in a software plugin or API.
Color
Zone3min
“zone3min” refers to a parameter or setting in a software plugin or API that defines the minimum threshold or limit for a specific zone or area.
Number
Zone3max
“zone3max” refers to the maximum allowable value or limit for a specific zone within a software plugin or API.
Number
Zone4color
“zone4color” is a parameter or function in the software plugin or API that allows users to specify or manipulate colors within a defined zone or area.
Color
Zone4min
“zone4min” refers to a function or parameter in a software plugin or API that calculates or defines the minimum value within a specified zone or range.
Number
Zone4max
“zone4max” is a function or parameter that defines the maximum allowable zone in a software plugin or API.
Number

Gauge with 3 zones

Element properties → Gauge with 3 zones.
Element properties → Gauge with 3 zones.
Fields:
Title
Description
Type
Value
The value of the gauge
Number
Animationspeed
The animation speed
Number
Maxvalue
The maximum value of the gauge
Number
Minvalue
The minimum value of the gauge
Number
Angle
The span of the gauge arc
Number
Linewidth
The line thickness
Number
Radiusscale
The relative radius
Number
Pointerlength
Relative to gauge radius
Number
Pointerstrokewidth
The thickness
Number
Pointercolor
The fill color
Color
Limitmax
If false, max value increases automatically if value > maxValue
Checkbox (yes/no)
Limitmin
F true, the min value of the gauge will be fixed
Checkbox (yes/no)
Colorstart
The starting color
Color
Colorstop
The ending color
Color
Strokecolor
The stroke color
Color
Generategradient
Check if a gradient should be generated
Checkbox (yes/no)
High resolution support
High resolution support
Checkbox (yes/no)
Width
The width of the gauge
Number
Height
The heigh of the gauge
Number
TextFieldId
Specify the element Id of the text element that should be used to display the current value of the gauge. Go to Settings-> General of your App and check the option to expose html attributes to your elements. Drag a Bubble Text Element onto your page and position/style accordingly. In the bottom of the element inspector, enter a unique element id. Enter the same element id here.
Text (optional)
Zone1color
“zone1color” refers to a variable or parameter within the software plugin or API that specifies the color associated with a particular zone or area.
Color
Zone1min
“zone1min” typically refers to a parameter or variable representing the minimum value for a specific zone or area within a software plugin or API.
Number
Zone1max
“zone1max” refers to a parameter or variable in a software plugin or API that defines the maximum value allowed for zone 1.
Number
Zone2color
“zone2color” is a function or feature that assigns colors to specific zones or regions within a software plugin or API.
Color
Zone2min
“zone2min” is a function that converts a time zone value to minutes in a software plugin or API.
Number
Zone2max
“zone2max” is a function in the software plugin or API that calculates the maximum value within a specified zone or region.
Number
Zone3color
“Zone3color” refers to a parameter or property in the software plugin or API that defines the color associated with the third zone or region.
Color
Zone3min
“zone3min” refers to a parameter or function that calculates the minimum value within a specified zone or area in a software plugin or API.
Number
Zone3max
“zone3max” is a function in the software plugin or API that calculates the maximum value within a specified zone or area.
Number

Gauge with 2 zones

Element properties → Gauge with 2 zones.
Element properties → Gauge with 2 zones.
Fields:
Title
Description
Type
Value
The value of the gauge
Number
Animationspeed
The animation speed
Number
Maxvalue
The maximum value of the gauge
Number
Minvalue
The minimum value of the gauge
Number
Angle
The span of the gauge arc
Number
Linewidth
The line thickness
Number
Radiusscale
The relative radius
Number
Pointerlength
Relative to gauge radius
Number
Pointerstrokewidth
The thickness
Number
Pointercolor
The fill color
Color
Limitmax
If false, max value increases automatically if value > maxValue
Checkbox (yes/no)
Limitmin
If true, the min value of the gauge will be fixed
Checkbox (yes/no)
Colorstart
The starting color
Color
Colorstop
The ending color
Color
Strokecolor
The stroke color
Color
Generategradient
Check if a gradient should be generated
Checkbox (yes/no)
High resolution support
High resolution support
Checkbox (yes/no)
Width
The width of the gauge
Number
Height
The heigh of the gauge
Number
TextFieldId
Specify the element Id of the text element that should be used to display the current value of the gauge. Go to Settings-> General of your App and check the option to expose html attributes to your elements. Drag a Bubble Text Element onto your page and position/style accordingly. In the bottom of the element inspector, enter a unique element id. Enter the same element id here.
Text (optional)
Zone1color
“zone1color” refers to the designated color associated with a specific zone or area within the software plugin or API.
Color
Zone1min
“zone1min” refers to a parameter or variable that represents the minimum value for a specific zone or area within a software plugin or API.
Number
Zone1max
“zone1max” refers to a parameter or variable in the software plugin or API that sets the maximum value for a specific zone or area.
Number
Zone2color
“zone2color” is a function or method that converts a specific zone or area into a color representation within the software plugin or API.
Color
Zone2min
“zone2min” is a function or method that converts a time zone offset to minutes in a software plugin or API.
Number
Zone2max
“zone2max” is a function in the software plugin or API that calculates the maximum value within a specified zone or region.
Number
Image without caption

Changelogs