Heatmap Component — sgcHTML | eSeGeCe

Heatmap

TsgcHTMLComponent_Heatmap — render a colour-scaled SVG heatmap grid from cell values or a bound dataset, with legend and row/column labels, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_Heatmap

Set row and column labels, fill cells with SetCell (or bind a dataset), then read the HTML property.

Component class

TsgcHTMLComponent_Heatmap

Renders

Inline SVG heatmap grid + optional legend (no chart library)

Languages

Delphi, C++ Builder, .NET

Label the grid, fill the cells, render it

Populate RowLabels and ColumnLabels, call SetCell(aRow, aCol, aValue) for each data point (or bind a dataset), then read HTML.

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');
// includes: sgcHTML_Component_Heatmap.hpp

TsgcHTMLComponent_Heatmap *oHeatmap = new TsgcHTMLComponent_Heatmap(NULL);
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);

  String html = oHeatmap->HTML;   // SVG grid, min->max colour scale
}
__finally
{
  delete oHeatmap;
}
using esegece.sgcWebSockets;

var heatmap = new TsgcHTMLComponent_Heatmap();
heatmap.RowLabels.CommaText = "Mon,Tue,Wed,Thu,Fri";
heatmap.ColumnLabels.CommaText = "9h,12h,15h,18h";
heatmap.ShowLegend = true;
heatmap.ShowValues = true;

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

string html = heatmap.HTML;   // SVG grid, min->max colour scale

Key properties & methods

The members you reach for most often.

Cells

SetCell(aRow, aCol, aValue) writes one value; FindCell looks one up and ClearData empties the Cells collection.

Labels

RowLabels and ColumnLabels are TStringLists that name each row and column of the grid.

Colour scale

MinColor/MaxColor/EmptyColor blend per cell; AutoMin/AutoMax pin MinValue/MaxValue instead of scaling from the data.

Dataset binding

LoadFromDataSet(aDataSet, aRowField, aColField, aValueField) builds the grid straight from a query.

Cell display

CellSize/CellGap/Rounded shape the cells; ShowValues/Decimals/FontSize control the printed numbers.

Legend & labels

ShowLegend draws a min-to-max gradient bar; ShowRowLabels/ShowColumnLabels toggle the axis text.

Keep exploring

Online HelpFull API reference and usage guide for this component.
All sgcHTML ComponentsBrowse the full feature matrix of 80+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.
Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Ready to Get Started?

Download the free trial and start building web UIs in Delphi, C++ Builder and .NET.