Chart
TsgcHTMLComponent_Chart — render Chart.js graphs (line, bar, pie, doughnut, radar, polar, bubble and scatter) from your own data or directly from a dataset, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Chart — render Chart.js graphs (line, bar, pie, doughnut, radar, polar, bubble and scatter) from your own data or directly from a dataset, in Delphi, C++ Builder and .NET.
A charting component that emits a Chart.js <canvas> plus its configuration script. Set the type, add labels and datasets, then read the HTML property.
TsgcHTMLComponent_Chart
Chart.js <canvas> + Bootstrap 5 markup
Delphi, C++ Builder, .NET
Set ChartType, push labels and one or more datasets, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).
uses
sgcHTML_Enums, sgcHTML_Component_Chart;
var
oChart: TsgcHTMLComponent_Chart;
begin
oChart := TsgcHTMLComponent_Chart.Create(nil);
try
oChart.ChartType := ctBar;
oChart.Title := 'Quarterly Revenue';
oChart.Height := '320';
oChart.AddLabel('Q1');
oChart.AddLabel('Q2');
oChart.AddLabel('Q3');
oChart.AddDataset('Revenue', [1200, 1900, 1500],
'#7C3AED', 'rgba(124,58,237,.25)', True);
WebModule.Response := oChart.HTML; // <canvas> + Chart.js script
finally
oChart.Free;
end;
end;
// Or bind it straight to a dataset:
oChart.LoadFromDataSet(qryQuarters, 'Quarter', 'Revenue');// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Chart.hpp
TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
try
{
oChart->ChartType = ctBar;
oChart->Title = "Quarterly Revenue";
oChart->Height = "320";
oChart->AddLabel("Q1");
oChart->AddLabel("Q2");
oChart->AddLabel("Q3");
oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
"#7C3AED", "rgba(124,58,237,.25)", true);
String html = oChart->HTML; // <canvas> + Chart.js script
}
__finally
{
delete oChart;
}using esegece.sgcWebSockets;
var chart = new TsgcHTMLComponent_Chart();
chart.ChartType = TsgcHTMLChartType.ctBar;
chart.Title = "Quarterly Revenue";
chart.Height = "320";
chart.AddLabel("Q1");
chart.AddLabel("Q2");
chart.AddLabel("Q3");
chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
"#7C3AED", "rgba(124,58,237,.25)", true);
string html = chart.HTML; // <canvas> + Chart.js scriptThe members you reach for most often.
ChartType selects line, bar, pie, doughnut, radar, polar, bubble or scatter; Stacked stacks datasets; Title sets the heading.
AddLabel adds an axis label; AddDataset(label, data, color, bgColor, fill) adds a series; ClearData resets it; Datasets and Labels expose the collections.
LoadFromDataSet(aDataSet, aLabelField, aValueFields) fills the chart from a query; assign DataSource for live refresh.
Width, Height, ShowLegend, Responsive, PointRadius and CustomOptions (raw Chart.js options JSON) tune the look.
HTML returns the <canvas> plus its Chart.js configuration script — serve it, or assign it to a page template's BodyContent.
Inherited Section, ColumnWidth and RowGroup place the chart on a TsgcHTMLPageBuilder grid.