Blog

All Blog Posts | Next Post | Previous Post

Visualize your own data structure in Delphi

Bookmarks:

Wednesday, April 27, 2022

In April, we did a blog on how to retrieve Google Analytics results, and display them in a TMS FNC Chart instance. The data, coming from the request, was displayed in a points collection. Did you know that you can also map your own data structure? TMS FNC Chart is designed to easily integrate your own data with a couple of lines of code. This blog will cover this, but first, let's take a look at a general introduction video on what TMS FNC Chart has to offer.

Introduction

Data mapping

For the purpose of this sample, we take our CARS.csv file, shipped with a couple of our FNC demos. The file contains a list of cars, with useful info such as the power, cylinder capacity and price. First of all, we load our csv data in a TTMSFNCGrid.

TMSFNCGrid1.IOOffset := Point(1,1);
TMSFNCGrid1.LoadFromCSV('CARS.CSV');
TMSFNCGrid1.SortData(1, sdAscending);
TMSFNCGrid1.Cells[1,0] := 'Brand';
TMSFNCGrid1.Cells[2,0] := 'Type';
TMSFNCGrid1.Cells[3,0] := 'CC';
TMSFNCGrid1.Cells[4,0] := 'Hp';
TMSFNCGrid1.Cells[5,0] := 'Cyl';
TMSFNCGrid1.Cells[6,0] := 'Kw';
TMSFNCGrid1.Cells[7,0] := 'Price';
TMSFNCGrid1.Cells[8,0] := 'Country';

TMS Software Delphi Components

Next, we want to visualize the price for each car in a bar chart. First, we add a new series, and set the type.

var
  s: TTMSFNCChartSerie;
begin
  TMSFNCChart1.Series.Clear;
  s := TMSFNCChart1.Series.Add;
  s.ChartType := ctBar;
  s.XValues.Angle := 90;
end;

To visualize the data in the chart, we can loop through the rows in the grid, and manually add a point for each row, pointing to the data. But there is an easier way. To load data in the chart, mapping directly on the grid data, we begin by implementing the OnGetNumberOfPoints event.

procedure TForm1.TMSFNCChart1GetNumberOfPoints(Sender: TObject;
  ASerie: TTMSFNCChartSerie; var ANumberOfPoints: Integer);
begin
  ANumberOfPoints := TMSFNCGrid1.RowCount - 1;
end;

The data is requested for each index between 0 & ANumberOfPoints through the OnGetPoint event. In this event, we can map the index on the series data.

procedure TForm1.TMSFNCChart1GetPoint(Sender: TObject;
  ASerie: TTMSFNCChartSerie; AIndex: Integer;
  var APoint: TTMSFNCChartPointVirtual);
var
  v: Integer;
begin
  v := 0;
  if TryStrToInt(TMSFNCGrid1.Cells[7, AIndex + 1], v) then
    APoint.YValue := v;

  APoint.XValueText := TMSFNCGrid1.Cells[1, AIndex + 1] + ' ' + TMSFNCGrid1.Cells[2, AIndex + 1];
end;

As you can see, a couple of lines of code immediately gives you a first impression of your data. Further customizations can be done, but the chart will map on the data, even if it refreshes the next time your app starts. CSV is a small sample and of course, the data delivered to TMS FNC Chart can be of any source type.

v2.0

Our team is working hard on the next version which will include a significant amount of new features and improvements related to data import, look & feel and out of the box experience. Stay tuned for more! Want to explore the capabilities of TMS FNC Chart, go ahead and download it from our product page.

Pieter Scheldeman