Visualize csv file data at Node-RED UI - csv

Question

I would like to visualize data from csv file at node-red ui.
What I would like to do is to show behind a flag of a country the countity from the csv file. So into the csv file I have 2 columns (country, quantity).
Because of I am new at node-red I would like to get some hints how to do that.
Thanks in advance.
my flow with CSV data

Answer 1

Welcome to Node-RED!
Firstly you need to decide what kind of UI you would like. Node-RED has options for a number ranging from the creation of data driven web pages using the http-in/out and template nodes through the more dynamic but slightly more complex Dashboard through to full-power dynamic web-apps using things like node-red-contrib-uibuilder.
The very simplest approach is to use an http-in and an http-out node to define a web page. Then to add your file reader after the http-in then the CSV node (which turns the CSV data into JSON). Then you could use node-red-contrib-tableify to turn your JSON into an HTML table. Finally use the template node to insert the table into the html that the http-out node sends back to the browser.
http-in -> file read -> csv -> tablify -> template -> http-out
Once you've mastered that, you could go on either to smarten up the template or swap to using Dashboard or even uibuilder depending on your needs.
I have to create a web page first, right?
You define the URL in the http-in node. When the -in is connected to the -out, you have a "page". Albeit with no content. To create content you can use the template node. In fact, pushing the csv data through the tablify node and into the template would give you enough of a page to see the data. The templatate itself need only be:
<pre>{{payload}}</pre>
Though, of course, you can also wrap that with other HTML elements as needed. But that alone should be enough to render something useful.
How can I trigger the http-in?
You simply reference the URL from your browser. So if you set the http-in node to use URL /fred and you used a browser on the same device that is running Node-RED, you would use the URL http://localhost:1880/fred in your browser.
How should I design the web page to be able to put the information from the csv file into it by the http-out node?
The tablify node does that for you.
String together what I've outlined and you should see something that will let you go further.
I suggest just using http-in, template and http-out nodes to start so that you can see how they work together. Then feed in your data without the csv or tablify nodes, then add the csv and finally the tablify. That way you can see how things work.