Six New sgcHTML Visuals: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode and Barcode

Second post in our tour of the 25 components sgcHTML just gained. This batch is about pixels: six components that render straight to inline SVG on the server, with no Chart.js, no QR library, no client-side JavaScript at all to load or version. Set properties, call HTML, done. Three are data visuals — Heatmap, Sparkline, CandlestickChart and TreeMap — and two are scannable codes — QRCode and Barcode.

Heatmap — a colour-scaled grid

TsgcHTMLComponent_Heatmap takes a row/column grid of numbers and renders it as a colour-scaled SVG, low values one colour, high values another, with an optional legend. Populate RowLabels and ColumnLabels, then call SetCell for each data point.

uses
  sgcHTML_Component_Heatmap;

var
  oHeatmap: TsgcHTMLComponent_Heatmap;
begin
  oHeatmap := TsgcHTMLComponent_Heatmap.Create(nil);
  try
    oHeatmap.RowLabels.CommaText := 'Mon,Tue,Wed,Thu,Fri';
    oHeatmap.ColumnLabels.CommaText := '9h,12h,15h,18h';
    oHeatmap.ShowLegend := True;
    oHeatmap.ShowValues := True;

    oHeatmap.SetCell(0, 0, 12);
    oHeatmap.SetCell(0, 1, 48);
    oHeatmap.SetCell(1, 2, 76);
    oHeatmap.SetCell(4, 3, 92);

    WebModule.Response := oHeatmap.HTML;   // SVG grid, min->max colour scale
  finally
    oHeatmap.Free;
  end;
end;

// Or bind it straight to a dataset:
oHeatmap.LoadFromDataSet(qryTraffic, 'DayName', 'HourSlot', 'Visits');

Traffic-by-hour, activity-by-weekday, error-rate-by-endpoint — anywhere you'd reach for a colour-coded table, LoadFromDataSet gets you there directly from a query.

Sparkline — a tiny inline trend

TsgcHTMLComponent_Sparkline is the small, label-free line/bar/area chart you drop inline next to a number — a KPI tile's trend indicator, a table cell's mini-history. It also has a static Build helper for genuinely one-line use when you don't need to keep the component instance around.

uses
  sgcHTML_Component_Sparkline;

var
  oSpark: TsgcHTMLComponent_Sparkline;
  sHTML: string;
begin
  oSpark := TsgcHTMLComponent_Sparkline.Create(nil);
  try
    oSpark.ChartType := slArea;
    oSpark.Width := 160;
    oSpark.Height := 32;
    oSpark.ShowLastPoint := True;
    oSpark.SetData([14, 18, 12, 22, 30, 26, 34]);

    WebModule.Response := oSpark.HTML;   // inline SVG, no chart library
  finally
    oSpark.Free;
  end;
end;

// Or bind it straight to a dataset:
oSpark.LoadFromDataSet(qryRevenue, 'Amount');

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_Sparkline.Build([5, 9, 4, 12, 7], slBar);

CandlestickChart — OHLC without a charting library

TsgcHTMLComponent_CandlestickChart renders a genuine OHLC candlestick chart — wicks, bodies, up/down colouring, an optional volume strip — as inline SVG. AddPoint takes a label plus open/high/low/close (and optionally volume) per bar.

uses
  sgcHTML_Component_CandlestickChart;

var
  oChart: TsgcHTMLComponent_CandlestickChart;
begin
  oChart := TsgcHTMLComponent_CandlestickChart.Create(nil);
  try
    oChart.Width := 800;
    oChart.Height := 400;
    oChart.ShowVolume := True;

    oChart.AddPoint('Mon', 101.2, 104.8, 100.1, 103.5, 125000);
    oChart.AddPoint('Tue', 103.5, 106.0, 102.8, 105.1, 98000);
    oChart.AddPoint('Wed', 105.1, 105.4, 101.0, 101.9, 154000);

    WebModule.Response := oChart.HTML;   // SVG candles + wicks + volume strip
  finally
    oChart.Free;
  end;
end;

// Or bind it straight to a dataset:
oChart.LoadFromDataSet(qryOHLC, 'TradeDate', 'OpenPrice', 'HighPrice',
  'LowPrice', 'ClosePrice', 'Volume');

TreeMap — proportional rectangles

TsgcHTMLComponent_TreeMap lays out a set of named values as a squarified treemap — the classic "budget by department" or "disk usage by folder" visual, each rectangle's area proportional to its value. The layout algorithm runs entirely server-side.

uses
  sgcHTML_Component_TreeMap;

var
  oTreeMap: TsgcHTMLComponent_TreeMap;
begin
  oTreeMap := TsgcHTMLComponent_TreeMap.Create(nil);
  try
    oTreeMap.Width := 640;
    oTreeMap.Height := 360;
    oTreeMap.ColorScheme := tmCool;
    oTreeMap.ShowValues := True;

    oTreeMap.AddItem('Engineering', 420000);
    oTreeMap.AddItem('Sales', 260000);
    oTreeMap.AddItem('Marketing', 140000);
    oTreeMap.AddItem('Support', 90000, '#20c997');   // explicit colour overrides the scheme

    WebModule.Response := oTreeMap.HTML;   // <svg> squarified rectangles, no client-side library
  finally
    oTreeMap.Free;
  end;
end;

// Or bind it straight to a dataset:
oTreeMap.LoadFromDataSet(qryBudget, 'Department', 'Amount');

// One-shot helper, no instance to manage:
Response := TsgcHTMLComponent_TreeMap.Build(['Engineering', 'Sales'], [420000, 260000]);

QRCode and Barcode — scannable codes, zero dependencies

Both are pure-Pascal implementations — no external encoding library, no image service call. TsgcHTMLComponent_QRCode is a real ISO/IEC 18004 encoder with a selectable error-correction level; TsgcHTMLComponent_Barcode generates Code 128 with an optional human-readable caption underneath. Both also expose a static Build helper.

uses
  sgcHTML_Component_QRCode;

var
  oQR: TsgcHTMLComponent_QRCode;
begin
  oQR := TsgcHTMLComponent_QRCode.Create(nil);
  try
    oQR.Data := 'https://www.esegece.com';
    oQR.ECCLevel := qrHigh;
    oQR.ModuleSize := 6;
    oQR.Caption := 'Scan to open';
    oQR.CaptionVisible := True;

    WebModule.Response := oQR.HTML;   // SVG QR modules + optional caption
  finally
    oQR.Free;
  end;
end;

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_QRCode.Build('https://www.esegece.com', qrHigh, 6);

uses
  sgcHTML_Component_Barcode;

var
  oBarcode: TsgcHTMLComponent_Barcode;
begin
  oBarcode := TsgcHTMLComponent_Barcode.Create(nil);
  try
    oBarcode.Data := 'ACME-00219841';
    oBarcode.Symbology := bsCode128;
    oBarcode.ModuleWidth := 2;
    oBarcode.Height := 60;
    oBarcode.ShowText := True;

    WebModule.Response := oBarcode.HTML;   // SVG bars + human-readable text
  finally
    oBarcode.Free;
  end;
end;

Invoice numbers, asset tags, warehouse bins, event tickets — anywhere your app already prints a reference code, these two turn it into something a phone camera or a handheld scanner can read, without a single external asset request.

Try them

Full documentation, key-property references and Delphi/C++Builder/.NET code samples live on each component's own page: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode and Barcode. Next up in this series: smarter form inputs.

Questions, feedback or migration help? Get in touch — you will get a reply from the people who wrote the code.