Export Charts to Jpeg

General
1

Hello everyone,
I have a question that I can not solve.
My flow creates graphs of temperature, co2 etc.
I would like the graphics to be saved automatically, at specific times for example, like jpg,
to be able to recover them through another software. do you know if it is possible? if so how can I do?

thank you in advance to all

2

Hi Jeremy,

I don't have an out-of-the-box solution, but just thinking out loud :woozy_face:

  • client side (= dashboard): Don't think you can use the current chart functionality of the dashboard:

    • Then you should always have a dashboard open (?)
    • That dashboard should be able to convert the chart to an image
    • That image needs to be send back to the server (i.e. back to your flow) where you can save it somewhere.

  • server side (= flow): Don't think it would be easy to create such an image in your Node-RED flow either. Indeed you need some node that can create a chart and create an image from that chart. There are some NodeJS nodes that could be used underneath, for example anychart-nodejs. However:

    • The charts that you create will not be identical to the ones one your dashboard (since it is another library with its own look and feel). Don't know if that is a problem for you?
    • NodeJs is not really strong in creating images. So 'almost' all image-related nodes will depend upon some image-libraries written in C or C++, which means you have to install and build those libraries manually. And that is not always easy (e.g. on Raspberry PI). For example the anychar-nodejs library uses the ImageMagick library under the hood.
    • If none of the previous points is a problem for you, you still need some Node-RED node that wraps such a NodeJS library. I don't think there is Node-RED node already available on flows.nodered.org

  • cloud: My best guess is using a cloud service, to avoid having to do image processing in NodeJS. Have not used it myself but e.g. node-red-contrib-googlechart allows you to create some chart in the cloud, and it seems that you can also get an image from such a Google chart.

If anybody else from the community has better idea(s), be my guest to discuss them here ...

Bart

3

Just for curiosity: why don't you just save the sensor data in a database, like everybody does? Because you can load the data afterwards and show it as a graph in your dashboard. Moreover you can analyze the data, calculate statistics,...

But I assumed last night you have good reasons to store it as images...

4

Hello,
Thank you very much for your answer. indeed, for Node red, no worries I have the graph. I wanted to recover the graphs on Crestron as a dynamic jpeg image.
the idea of ​​the database is probably an excellent idea, I'm going to look at how to create a graph from Mysql. which will be better, because I could ask to create an image with specific data. again a huge thank you. have a good day

1 Like
5

If you want to be able to look at the data later and maybe do things like selecting a time range, zooming in on events in the chart, choosing which lines to include on the chart and so on then I strongly recommend (as will others here I am sure) looking at influxdb for storing the data and grafana for viewing it.

1 Like
6

Early last year, I posted a solution to this same question on the now inactive Google Groups forum. The idea is to use a ui_template node to push the array of data points into the 3-rd party Plot.ly graphing library, and use its internal methods to convert the image into a jpg or png data buffer. Somewhat interesting reading, but limited in its scope, since the graph has to be visible in the dashboard in order to grab the image.

I've also had some luck grabbing images of svg graphs using the save-svg-as-png library found on npm. The main issue with this approach is that support for css inherited fonts is missing (not sure if that is an issue with the current chartjs dashboard rendering). And I don't know how well it supports canvas-based graphs (which the dashboard appears to use).

If you still need to grab some graphs as images, I can see about digging up some code to elaborate on these two techniques. But generally, an interactive graph based on a db query is a far better user experience. Incidentally, when you mentioned "Crestron", is this for a presentation management system or something? I've been managing one of those for years, and would love to discuss ideas for integrating node-red...