Skip to main content
Table of Contents

Getting started with TMS FNC Widget Distribution Indicator

TTMSFNCWidgetDistributionIndicator compares a set of values against their combined total and draws the breakdown as a donut, pie, bar, or funnel.

Prerequisites

  • TMS FNC Core installed and the runtime package added to the project.
  • TMS FNC Dashboard Pack design-time package registered in the IDE.

Add the control

  1. Drop TTMSFNCWidgetDistributionIndicator from the TMS FNC Dashboard palette page onto a form.
  2. Set DistributionType to choose the presentation (dtDonut, dtPie, dtHorizontalBar, dtVerticalBar, or dtFunnel).
  3. Either edit the Values collection in the Object Inspector, or fill it at runtime as shown below.

Build a distribution in code

Each entry in Values carries a numeric Value and an optional Text label; the control derives every segment's share from the combined total. Assign each segment's colour through Fill.Color (the Fill property is a graphics object, so set its Color sub-property — never assign a colour directly to Fill).

Populate the value collection and pick a chart typePascalC++
procedure TForm1.BuildDistribution;
var
  Item: TTMSFNCDistributionValue;
begin
  WidgetDistributionIndicator1.Header.Text := 'Sales by Country';

  WidgetDistributionIndicator1.Values.Clear;

  Item := WidgetDistributionIndicator1.Values.Add;
  Item.Text := 'USA';
  Item.Value := 3100;
  Item.Fill.Color := gcDodgerblue;

  Item := WidgetDistributionIndicator1.Values.Add;
  Item.Text := 'UK';
  Item.Value := 2000;
  Item.Fill.Color := gcMediumseagreen;

  Item := WidgetDistributionIndicator1.Values.Add;
  Item.Text := 'Belgium';
  Item.Value := 1700;
  Item.Fill.Color := gcOrange;

  Item := WidgetDistributionIndicator1.Values.Add;
  Item.Text := 'Germany';
  Item.Value := 1600;
  Item.Fill.Color := gcMediumpurple;

  { Render as a donut and show each segment's share as a percentage. }
  WidgetDistributionIndicator1.DistributionType := dtDonut;
  WidgetDistributionIndicator1.ValueType := vtPercentage;
  WidgetDistributionIndicator1.ValueFormatPercentage := '%.0f%%';
end;

void __fastcall TForm1::BuildDistribution()
{
  TTMSFNCDistributionValue *Item;

  WidgetDistributionIndicator1->Header->Text = "Sales by Country";

  WidgetDistributionIndicator1->Values->Clear();

  Item = WidgetDistributionIndicator1->Values->Add();
  Item->Text = "USA";
  Item->Value = 3100;
  Item->Fill->Color = gcDodgerblue;

  Item = WidgetDistributionIndicator1->Values->Add();
  Item->Text = "UK";
  Item->Value = 2000;
  Item->Fill->Color = gcMediumseagreen;

  Item = WidgetDistributionIndicator1->Values->Add();
  Item->Text = "Belgium";
  Item->Value = 1700;
  Item->Fill->Color = gcOrange;

  Item = WidgetDistributionIndicator1->Values->Add();
  Item->Text = "Germany";
  Item->Value = 1600;
  Item->Fill->Color = gcMediumpurple;

  // Render as a donut and show each segment's share as a percentage.
  WidgetDistributionIndicator1->DistributionType = TTMSFNCWidgetDistributionType::dtDonut;
  WidgetDistributionIndicator1->ValueType = TTMSFNCDistributionValueType::vtPercentage;
  WidgetDistributionIndicator1->ValueFormatPercentage = "%.0f%%";
}

This populates four labelled, colour-coded segments, renders them as a donut, and shows each one's percentage share.

Next steps