• Blog
  • How to visualize data in a Delphi app

How to visualize data in a Delphi app

How to parse a JSON response from a remote server and then visualize the data received

Publish date:
Discover more of what matters to you

In the previous post we explained how to connect an FMX app to a remote server and pull data from it. In this post we’re going to visualize the data.

The parsing of the JSON response from the server will be executed with the usage of the TJSONObject, TJSONArray classes.

TJSONObject

The TChart component class has wide capacities in presenting information in the form of diagrams and it will be very helpful for data visualization. The component for data visualization TChart requires some settings before being used. Below you can see what it will look like after being added to the form.

TChart

Double click on the component will call the interface of its settings.

TChart: the interface of its settings

You need to add Series (use the Add command). The transaction diagram looks like a line that’s why you need to choose the Line option. If you wish, the 3D view can be turned off.

TChart: Series

Now let’s assign the name for the diagram using the options Chart > Titles > Text

editing_chart

The display of the ongoing parsing progress as well the crypto transaction graph creation are ensured with the help of the component that belongs to the TProgressBar class. The component of the TLabel class is used for displaying the app status.

TProgressBar class. The component of the TLabel class is used for displaying the app status

For component alignment use the Align property.

the Align property

The alignment is necessary for the correct display of interface elements on mobile devices of different sizes.

To prevent blocking of the main app thread, the TTask class is used. It allows making a request and getting a response from the server as parallel tasks.

The graphic interface of a client app developed in the Embarcadero Delphi (FireMonkey) environment looks as follows:

The graphic interface of a client app developed in the Embarcadero Delphi (FireMonkey)

To execute the necessary actions for connecting to the server, getting data with their further processing and visualization, you need to redefine the OnClick handler of the “GET TRANSACTIONS” button.

For updating and getting access to UI components (instances of the TChart, TProgressBar, TLabel classes) from the child thread, you need to use the TThread.Synchronize method to synchronize them with the main thread.

The OnClick handler will look the following way:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
procedure TForm1.Button1Click(Sender: TObject);
var s:string; JSON: TJSONObject;
JSONValues: TJSONArray;
begin
if NetHTTPClient1.Tag=NOT_BUSY then
begin
NetHTTPClient1.Tag := BUSY;
TTask.Run(procedure var LResponse: TMemoryStream;
var i:integer;
begin
TThread.Synchronize(nil, procedure
begin
StatusLabel.Text:='Waiting for answer…';
Exit;
end);
LResponse := TMemoryStream.Create;
try
// Send a GET request to the api.blockchain.info server
NetHTTPClient1.Get('https://api.blockchain.info/charts/transactions-per-second',LResponse);
TThread.Synchronize(nil, procedure
begin
Chart1.Series[0].Clear;
Exit;
end);
TThread.Synchronize(nil, procedure
begin
StatusLabel.Text:='Working…';
Exit;
end);
s:=StreamToString(LResponse);
// Initiate objects to work with JSON
JSON := TJSONObject.ParseJSONValue(s) as TJSONObject;
JSONValues:=TJSONArray(JSON.Get('values').JsonValue);
ProgressBar1.Max:=JSONValues.Size-1;
ProgressBar1.Value:=0;
// Parse the received response and take the info from it
for i:=0 to JSONValues.Size-1 do
begin
TThread.Synchronize(nil, procedure
begin
Chart1.Series[0].AddXY((TJSONPair(TJSONObject(JSONValues.Get(i)).Get('x')).JsonValue.Value).ToDouble(),(TJSONPair(TJSONObject(JSONValues.Get(i)).Get('y')).JsonValue.Value).ToDouble());
Exit;
end);
TThread.Synchronize(nil, procedure
begin
ProgressBar1.Value:=i;
Exit;
end);
end;
finally
LResponse.Free;
TThread.Synchronize(nil, procedure
begin
StatusLabel.Text:='Ready';
Exit;
end);
NetHTTPClient1.Tag := NOT_BUSY;
end;
end);
end;
end;

You can see the interface of the developed app for Windows and Android on the screenshots placed below.

MS Windows platform

MS Windows platform

Android platform

Android platform

Softacom is TOP Delphi development company, that specializes in upgrading and migrating Delphi software. Book a free consultation with a solution expert.

Subscribe to our newsletter and get amazing content right in your inbox.

This field is required
This field is required Invalid email address
By submitting data, I agree to the Privacy Policy

Thank you for subscribing!
See you soon... in your inbox!

confirm your subscription, make sure to check your promotions/spam folder

Subscribe to our newsletter and get amazing content right in your inbox.

You can unsubscribe from the newsletter at any time

This field is required
This field is required Invalid email address

You're almost there...

A confirmation was sent to your email

confirm your subscription, make sure to check
your promotions/spam folder