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.

Ready to Get Started?

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