Gauge
TsgcHTMLComponent_Gauge — render a semicircular SVG gauge that plots a value against its min and max with low, mid and high colour thresholds, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Gauge — render a semicircular SVG gauge that plots a value against its min and max with low, mid and high colour thresholds, in Delphi, C++ Builder and .NET.
A KPI component that emits a self-contained inline <svg> semicircle. Set the value, range and unit, then read the HTML property — the arc colour switches automatically as the value crosses the mid and high thresholds.
TsgcHTMLComponent_Gauge
Inline <svg> semicircular gauge
Delphi, C++ Builder, .NET
Set Value, MinValue and MaxValue, pick the thresholds, then read HTML. For a one-off gauge use the static Build helper.
uses
sgcHTML_Enums, sgcHTML_Component_Gauge;
var
oGauge: TsgcHTMLComponent_Gauge;
begin
oGauge := TsgcHTMLComponent_Gauge.Create(nil);
try
oGauge.Title := 'CPU Load';
oGauge.Value := 72;
oGauge.MinValue := 0;
oGauge.MaxValue := 100;
oGauge.Unit_ := '%';
oGauge.ThresholdMid := 50;
oGauge.ThresholdHigh := 80;
oGauge.ColorLowStyle := hcSuccess;
oGauge.ColorMidStyle := hcWarning;
oGauge.ColorHighStyle := hcDanger;
WebModule.Response := oGauge.HTML; // inline <svg> semicircle
finally
oGauge.Free;
end;
end;
// Or one line with the static Build helper:
Result := TsgcHTMLComponent_Gauge.Build('CPU Load', 72, 0, 100, '%');// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Gauge.hpp
TsgcHTMLComponent_Gauge *oGauge = new TsgcHTMLComponent_Gauge(NULL);
try
{
oGauge->Title = "CPU Load";
oGauge->Value = 72;
oGauge->MinValue = 0;
oGauge->MaxValue = 100;
oGauge->Unit_ = "%";
oGauge->ThresholdMid = 50;
oGauge->ThresholdHigh = 80;
oGauge->ColorLowStyle = hcSuccess;
oGauge->ColorMidStyle = hcWarning;
oGauge->ColorHighStyle = hcDanger;
String html = oGauge->HTML; // inline <svg> semicircle
}
__finally
{
delete oGauge;
}
// Or one line with the static Build helper:
String html = TsgcHTMLComponent_Gauge::Build("CPU Load", 72, 0, 100, "%");using esegece.sgcWebSockets;
var gauge = new TsgcHTMLComponent_Gauge();
gauge.Title = "CPU Load";
gauge.Value = 72;
gauge.MinValue = 0;
gauge.MaxValue = 100;
gauge.Unit_ = "%";
gauge.ThresholdMid = 50;
gauge.ThresholdHigh = 80;
gauge.ColorLowStyle = TsgcHTMLColor.hcSuccess;
gauge.ColorMidStyle = TsgcHTMLColor.hcWarning;
gauge.ColorHighStyle = TsgcHTMLColor.hcDanger;
string html = gauge.HTML; // inline <svg> semicircle
// Or one line with the static Build helper:
string html = TsgcHTMLComponent_Gauge.Build("CPU Load", 72, 0, 100, "%");The members you reach for most often.
Value, MinValue and MaxValue (all Double) define what the arc fills to; the value is clamped to the range automatically.
Title prints under the gauge and Unit_ prints beside the value; the min and max are drawn at the ends of the arc.
ThresholdMid and ThresholdHigh (Double) decide which colour the value arc uses as the reading climbs.
ColorLowStyle, ColorMidStyle and ColorHighStyle (TsgcHTMLColor) set the threshold colours; the ColorLow/ColorMid/ColorHigh strings override with a literal CSS colour. BackgroundArcColorStyle tints the track.
Width (px, default 200), ArcStrokeWidth, ValueFontSize, UnitFontSize, LabelFontSize and SvgViewBox tune the rendered SVG.
HTML returns the inline <svg> gauge. The static Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) returns the same markup in a single call.