02-25-2020 06:17 AM
The gauge is an interactive component - the value variable can be set to a slider or an app variable. The guts of the component are an interactive SVG file that uses the following inputs.
The inputs are:
GaugeColorNo: the color that you want your gauge to show. I tend to use a formula so the color changes when the value changes. The Color must be in Hex format with the #
GaugeValue: the value that drives the size of the line
GaugeMaxValue: the max value that the gauge value could be - when the whole gauge is filled
GaugeTargetValue: the value for your black hash marker, this MUST be less than your Max Value
GaugeUnitText: the text, if any that you want at the bottom of the gauge
GaugeValueText: the text, if any that you want in the center of the gauge. I usually use a Text of the Gauge value with the appropriate number of decimal places specified.
GaugeUnitAdjustment: a number that you may have to play around with to ensure that the units text is centered
GaugeValueAdjustment: a number that you may have to play around with to ensure that the value is centered
BaseColorNo: the hex no of the base color.
I learned how to do this by reading https://medium.com/@heyoka Mark Canon's post on donut charts, so I feel compelled to thank him for teaching me about dash arrays and offsets.