How to display custom data dashboard in WordPress and update it?

I am doing a project currently using WordPress and I want to display some data to the front end from the back end.
First of all, the data will be written via the network to a folder on my server(ubuntu) and updated every 30 seconds to 1 minute.
The format available for the data is txt but they can be sent as json files also.
The form of the txt files is:
12 42837.5659846296
USDJPY -200’000 109.518 -141
0 0 1’042 2’916 2’775

Output MODE1

DISC 42837.5659839931
USDCHF -1’500’000 1.0074 1’511’105 87
USDJPY 2’250’000 109.55167 -246’491’250 890
NZDUSD -2’500’000 0.69925 1’748’136 18’086
EURAUD 300’000 1.44016 -432’049 -5’502
EURNZD 1’400’000 1.51183 -2’116’566 20’052
48’265 -1’164 7’748 20’280 29’312 66’474
MODE 2 Output

Preferably with the option to change cell colors depending on the values (and update them via ajax).
Currently this works as a desktop C# application (txt files are parsed and displayed as above).
I want to do the same on a web server (ubuntu) with WordPress as a CMS.

What I have thought about implementing this is:

  1. Have a folder where the data will be updated in the back-end (txt, json format or other).
  2. Parse the data in WordPress and send them to front-end with Ajax (or send them directly via Ajax and parse them in the Front-end)
  3. Use custom JQuery code to create the display table and refresh the values with Ajax requests

Is there a better/easier way to achieve this?
Any other preferred combination of technologies or plugins or architecture?
Is my architecture design going to work?
Are there any limitations I should be aware of?
I have experience with high level programming languages, but I am just getting started in Web Development.

Any help is highly appreciated!

You can have a PHP file on the server, that will read this TXT file…
this PHP program can dynamically reformat the data, create tables, color the cells, etc… i.e. standard html code output format
On your front end, call via Ajax this PHP program, and the html response received can be used to replace the contents of a DIV id=“mode-table” in your frontend page.

Update: You can just use .load ()


If you need to work/use these numbers individually on your frontend, you can use VueJS.

Load your data via JSON, assign to VueJS data, then display data using Vue {{ }} templates within your html code. The webpage can then make server calls for new JSON data, and when the data model is updated with new numbers, the resulting html template will also be updated automatically.

But if you just want to display the data/table, the first method above (using jquery .load) will be simpler.