# Export Charts to Jpeg

**URL:** <https://discourse.nodered.org/t/export-charts-to-jpeg/4693>\
**Category:** General\
**Created:** [8 November 2018 17:07 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693 "2018-11-08T17:07:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://discourse.nodered.org/u/Jeremy)\
**Post date:** [8 November 2018 17:07 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693/1 "2018-11-08T17:07:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 November 2018 22:49 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693/2 "2018-11-08T22:49:07Z")

</div>

Hi Jeremy,

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

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

- **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](https://www.npmjs.com/package/anychart-nodejs). However:

- **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](https://www.npmjs.com/package/node-red-contrib-googlechart) allows you to create some chart in the cloud, and it [seems](https://developers.google.com/chart/interactive/docs/printing) 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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 November 2018 06:03 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693/3 "2018-11-09T06:03:46Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://discourse.nodered.org/u/Jeremy)\
**Post date:** [9 November 2018 08:03 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693/4 "2018-11-09T08:03:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 November 2018 09:04 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693/5 "2018-11-09T09:04:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [9 November 2018 17:26 UTC](https://discourse.nodered.org/t/export-charts-to-jpeg/4693/6 "2018-11-09T17:26:56Z")

</div>

Early last year, I posted a [solution to this same question](https://groups.google.com/forum/#!msg/node-red/EF1R-wCJYM8/R0yRsiLfBAAJ) 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...