The bulb gauge is one of the simplest charts in all. It is used in a variety of applications including financial dashboards, machine controller screens etc., where a single value or state indicator is required.

Bulb Gauges are used to indicate a specific dataset utilizing a circle that changes color to indicate whether the monitored data is within defined limits and if it is, then which limit it is in. The colors can be selected to suit the application such as green for satisfactory, yellow for caution and red for alarm.
A few outputs of Bulb Gauge can be reproduced as under:
     Displaying Capture.PNG
           (a)                      (b)                        (c)                          (d)                                 (e)
The gauge is defined by minimum and maximum values. Within that scale you can create various ranges to classify your data. Its purpose is to classify that value as belonging to a predetermined range. For example, you might define a range called “Best” that consists of values between 60 and 100. Or you might create a range called “Weak” that consists of values between 30 and 60. Now when the data value belongs to a particular range, the bulb is shown in the color specified for that range.

Color Range

The bulb gauge is defined by minimum and maximum values. Within that scale you can create various ranges to classify your data. There can be any number of ranges as you wish to. For each range, you’ll have to specify the minimum and maximum limits, a name for the range and the hex color for the range.
Color Range is the child of Bulb Gauge .We can define any numbe of color range children for Bulb Gauge.
Example: 
In below screen shots we defined two color range.
1. If value is between 1-50 then FFFF00 color will come.
2. If value is between 51-100 then 00FFFF color will come.
Displaying Bulb Gauge.PNG
Displaying Property Pallet.PNGDisplaying Property Pallet - 1.PNG

Attribute Name Type Description
Min Value Number Indicates the starting value of that color range. The minValue of the first color range should be equal to the chart's lowerLimit and the minValue of the succeeding <color> element should be equal to the current<color> element's maxValue.
Max Value Number Indicates the end value of that color range. The maxValue of the last color range should be equal to the chart's upperLimit.
Code Color Code Actual color (hex color) of the color range using which it will be filled.
Label String Visible label for the color range.
Alpha Number (0-100) Sets the transparency of each range in the color range.
Border Color Color Code Border color of that particular color in the range. If you want to specify a different border for each range in the color range, you can use this attribute.
Border Alpha Number (0-100) Border alpha for the color range.

Chart Properties:

Attribute Name Type Description
Gauge Fill Alpha Number (0-100) Fill alpha for the bulb.
Gauge Origin X Number (Pixels) If you want to specify your origin X for the bulb, please use this attribute.
Gauge Origin Y Number (Pixels) If you want to specify your origin Y for the bulb, please use this attribute.
Gauge Radius Number (Pixels) Your custom radius for the bulb.
Show Gauge Border Boolean  Whether to show a border around bulb?
Gauge Border Color Color Code or Fill Mix formula (but single token) Color of bulb border. You can either specify a hex code here (like 333333), or a single token from gradient fill mix like {dark-20} or {light-30}. The chart will then calculate the border color for each color range individually (based on the color code for each color range).
Gauge Border Thickness Number (Pixels) Thickness of bulb border.
Gauge Border Alpha Number (0-100) Alpha of bulb border.
Is 3D Boolean  Whether to render the bulb in 2D or 3D mode? By default, the chart is displayed in 3D mode.
Upper Limit Number This attribute helps you explicitly set the upper limit of the chart. If you don't specify this value, the chart automatically calculates the upper limit based on the data provided by you.
Lower Limit Number This attribute helps you explicitly set the lower limit of the chart. If you don't specify this value, the chart automatically calculates the lower limit based on the data provided by you.
Place Values Inside Boolean  Whether to place values inside the bulb or below it?(As shown in figure d above)
Show Value Boolean  Whether to show chart's value?
Use Color Name As Value Boolean Whether to use the color range label as value or show the actual numerical value?(As shown in figure c above)
Show Value With Color Label Boolean Whether to show color range label and actual numberical value together ?(As shown in figure e above)


Location

101 California Street, Suite 2710
San Francisco, CA 94111


440 N. Wolfe Rd.
Sunnyvale, CA 94085


Office 11, 5th Floor, Building 9,
Mindspace IT Park
Hyderabad 500081

p: +1 (844) AT CloudIO (844-282-5683)
f: +1 (650) 300-5247 | e: sales@cloudio.io
© 2009, 2017 CloudIO Inc. | Terms of Use | Privacy Policy