How to visualize data in a Delphi app

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

Posted by: Alex A. Publish date: 31.10.2021

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:

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
Talk to us and get your project moving
Book a free consultation with a solution expert.
Name
This field is required
E-mail
Company web site
This field is required
Phone Number
This field is required