[Announce] node-red-contrib-chart-image

I had a project that required generating charts from my db automatically a emailing them to coworkers using outlook. This required static images, so I wrote this node to make that simple. It's just a Node-RED wrapper for chartjs-node-canvas, which uses node-canvas to create the charts on. I'm using chartjs-node-canvas built in image buffer output, which can be saved to a .png file or stored in a global variable to be accessed over an http endpoint.

I've included chartjs-plugin-datalabels and chartjs-plugin-annotations as those are pretty commonly used.

Any feedback is appreciated.

5 Likes

Thanks for the work. I would love to have the chartjs node to show live line chart. The line chart from Node Red Dashboard has very limited function (slow response for real-time data, can't zoom in/out).

@davidz, the node as designed will only produce a static image. This is for attaching to emails where JavaScript is not possible.

Have you looked at node-red-contrib-chartjs?

Thanks Gemini86. I looked at the chartjs node but don't know how to integrate it with the node red dashboard. It would be ideal to replace the line chart from the dashboard with the chartjs one, since i have spent lots of efforts on the I/O interface using dashboard :frowning:

Take a look at plotly.js instead. There is a nice example here on the forum. Doesnt require any installation and can be implemented directly with ui-template nodes.

Look at example 3 and modify it's parameters in the bottom of the ui-template node to:

Plotly.newPlot('example3', data, layout, { modeBarButtonsToRemove: ['toggleSpikelines'], displaylogo: false})

Deploy and refresh the dashboard, you will see all kinds of buttons appear, including download as image and it supports zooming among many other features.

You can still use the template node for chartjs. Simply follow their direction like you would for use in a web page.

1 Like

Thanks. The plotly looks nice. I will check it out.

Thanks. It looks like I have to use the template node for better GUI. I will give it a try.

Is it possible to change the pixel density?

Welcome to the forum, what exactly do you mean?

This topic was automatically closed after 60 days. New replies are no longer allowed.