[SOLVED] Using node-red-contrib-chart-image

This is something, I wanted to do a long time ago, and only today I realised that there is a node for this. Thanks @gemini86 for your work.

If there any special procedures getting this node installed? I tried using the Palette Manager and it came back with a fail and a very long log.

Can you also share a few examples how it should be used. I tried chart.js a few years ago, I don't remember the details any more. I just need one example how I pass the object in the payload.

I want to generate charts for Telegram. It sends image messages from an image file, so I am guessing I can just save the output payload to a file and send that over in to Telegram.

Could you please post your environment and the error messages? I've not had any difficulty on any of my installs, but they're all ubuntu linux so I have no idea what it would do under windows.

Here's an example flow. The chartjs guide will give you details on changing the chart definition object to suit your needs. The output is an image buffer which can be saved as a png directly with the file write node or you can pass it to an http response like in my example. just navigate to http://your.ip.address:1880/chart to view it.

[{"id":"16fae274.3810fe","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"eb9f5375.f83fe","type":"function","z":"16fae274.3810fe","name":"chart definition object","func":"msg.payload = {\n    type: 'horizontalBar',\n    options: {\n        title: {\n            display:true,\n            text:'yar, here be a label'\n        },\n        legend: {\n            display:false\n        },\n        chartArea: {\n            backgroundColor: 'white'\n        },\n        plugins: {\n            datalabels: {\n                display:true,\n                backgroundColor:'whitesmoke',\n                borderRadius:1,\n                padding:1,\n                align: 'right',\n                anchor: function(context) {\n                    //node.send({debug:{dataindex:context.dataIndex}});\n                    if (context.dataIndex == context.dataset.data.length - 1) {\n                        return 'center';\n                    } else {\n                        return 'end';\n                    }\n                },\n                offset:8,\n                formatter:function(value) {\n                    return value > 0 ? value.toLocaleString() : '';\n                }\n            }\n        }\n    },\n    data: {\n        labels:[\n            'series 1',\n            'series 2',\n            'series 3',\n            'series 4',\n            'series 5',\n            'series 6',\n            'series 7'\n        ],\n        datasets: [\n            {\n                label:msg.payload.date,\n                backgroundColor:'rgba(57,97,184,0.8)',\n                data:[\n                    2000,\n                    0,\n                    5000,\n                    5500,\n                    4000,\n                    0,\n                    30222\n                ]\n            }\n        ]\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":240,"wires":[["9a0c7839.bfc7b8"]]},{"id":"e41c9fe8.8d2e4","type":"inject","z":"16fae274.3810fe","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":470,"y":240,"wires":[["eb9f5375.f83fe"]]},{"id":"dae3a7b0.b09288","type":"http in","z":"16fae274.3810fe","name":"","url":"/chart","method":"get","upload":false,"swaggerDoc":"","x":600,"y":300,"wires":[["2a40cf2b.4594a"]]},{"id":"2a40cf2b.4594a","type":"change","z":"16fae274.3810fe","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"image","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":300,"wires":[["98fa50cf.3eea"]]},{"id":"98fa50cf.3eea","type":"http response","z":"16fae274.3810fe","name":"","statusCode":"","headers":{"content-type":"image/png"},"x":910,"y":300,"wires":[]},{"id":"9a0c7839.bfc7b8","type":"chart-image","z":"16fae274.3810fe","name":"","width":500,"height":300,"x":850,"y":240,"wires":[["83ef2b8d.5ed4c8"]]},{"id":"83ef2b8d.5ed4c8","type":"change","z":"16fae274.3810fe","name":"","rules":[{"t":"set","p":"image","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1020,"y":240,"wires":[[]]}]

I have a quite old rpi3 running Raspbian jessie. I am running Node-Red v1.1.3 with the NodeJS version that was updated to with the NR update to 1.1.3.

This is the message log I get when trying to install it from the palette manager. Little bit too much for me to get my head around it

2020-11-04T10:31:26.060Z Install : node-red-contrib-chart-image 1.0.1

2020-11-04T10:31:27.794Z npm install --no-audit --no-update-notifier --no-fund --save --save-prefix="~" --production node-red-contrib-chart-image@1.0.1
2020-11-04T10:31:52.370Z [out] 
2020-11-04T10:31:52.370Z [out] > canvas@2.6.1 install /home/pi/.node-red/node_modules/canvas
2020-11-04T10:31:52.370Z [out] > node-pre-gyp install --fallback-to-build
2020-11-04T10:31:52.370Z [out] 
2020-11-04T10:31:54.023Z [err] node-pre-gyp
2020-11-04T10:31:54.026Z [err]  
2020-11-04T10:31:54.026Z [err] WARN
2020-11-04T10:31:54.026Z [err]  Using request for node-pre-gyp https download
2020-11-04T10:31:54.026Z [err]  
2020-11-04T10:31:54.555Z [err] node-pre-gyp
2020-11-04T10:31:54.555Z [err]  WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v64-linux-glibc-arm.tar.gz 
2020-11-04T10:31:54.556Z [err] node-pre-gyp
2020-11-04T10:31:54.556Z [err]  WARN 
2020-11-04T10:31:54.556Z [err] Pre-built binaries not found for canvas@2.6.1 and node@10.22.0 (node-v64 ABI, glibc) (falling back to source compile with node-gyp)
2020-11-04T10:31:54.556Z [err]  
2020-11-04T10:32:00.226Z [out] make: Entering directory '/home/pi/.node-red/node_modules/canvas/build'
2020-11-04T10:32:00.232Z [out]   SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
2020-11-04T10:32:00.683Z [out]   COPY Release/canvas-postbuild.node
2020-11-04T10:32:00.728Z [out]   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
2020-11-04T10:32:05.698Z [out]   CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
2020-11-04T10:32:09.415Z [out]   CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
2020-11-04T10:32:10.119Z [err] In file included from ../src/backend/PdfBackend.h:4:0,
2020-11-04T10:32:10.119Z [err]                  from ../src/backend/PdfBackend.cc:1:
2020-11-04T10:32:10.119Z [err] ../src/backend/../closure.h:6:21: fatal error: jpeglib.h: No such file or directory
2020-11-04T10:32:10.119Z [err]  #include <jpeglib.h>
2020-11-04T10:32:10.119Z [err]                      ^
2020-11-04T10:32:10.119Z [err] compilation terminated.
2020-11-04T10:32:11.994Z [out] canvas.target.mk:132: recipe for target 'Release/obj.target/canvas/src/backend/PdfBackend.o' failed
2020-11-04T10:32:11.995Z [out] make: Leaving directory '/home/pi/.node-red/node_modules/canvas/build'
2020-11-04T10:32:11.995Z [err] make: *** [Release/obj.target/canvas/src/backend/PdfBackend.o] Error 1
2020-11-04T10:32:12.001Z [err] gyp
2020-11-04T10:32:12.005Z [err]  
2020-11-04T10:32:12.005Z [err] ERR!
2020-11-04T10:32:12.005Z [err]  
2020-11-04T10:32:12.005Z [err] build error 
2020-11-04T10:32:12.007Z [err] gyp ERR!
2020-11-04T10:32:12.008Z [err]  stack Error: `make` failed with exit code: 2
2020-11-04T10:32:12.008Z [err] gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:191:23)
2020-11-04T10:32:12.008Z [err] gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
2020-11-04T10:32:12.008Z [err] gyp 
2020-11-04T10:32:12.009Z [err] ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
2020-11-04T10:32:12.009Z [err] gyp
2020-11-04T10:32:12.009Z [err]  ERR! 
2020-11-04T10:32:12.010Z [err] System Linux 4.9.35-v7+
2020-11-04T10:32:12.010Z [err] gyp
2020-11-04T10:32:12.010Z [err]  ERR! 
2020-11-04T10:32:12.010Z [err] command
2020-11-04T10:32:12.011Z [err]  "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/home/pi/.node-red/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/home/pi/.node-red/node_modules/canvas/build/Release" "--napi_version=6" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v64"
2020-11-04T10:32:12.011Z [err] gyp
2020-11-04T10:32:12.011Z [err]  ERR!
2020-11-04T10:32:12.011Z [err]  
2020-11-04T10:32:12.011Z [err] cwd /home/pi/.node-red/node_modules/canvas
2020-11-04T10:32:12.011Z [err] gyp
2020-11-04T10:32:12.011Z [err]  ERR!
2020-11-04T10:32:12.011Z [err]  
2020-11-04T10:32:12.011Z [err] node -v
2020-11-04T10:32:12.011Z [err]  v10.22.0
2020-11-04T10:32:12.011Z [err] gyp
2020-11-04T10:32:12.012Z [err]  ERR!
2020-11-04T10:32:12.012Z [err]  
2020-11-04T10:32:12.012Z [err] node-gyp -v v5.1.0
2020-11-04T10:32:12.012Z [err] gyp
2020-11-04T10:32:12.012Z [err]  
2020-11-04T10:32:12.012Z [err] ERR! 
2020-11-04T10:32:12.012Z [err] not ok
2020-11-04T10:32:12.012Z [err]  
2020-11-04T10:32:12.021Z [err] node-pre-gyp
2020-11-04T10:32:12.021Z [err]  ERR! build error
2020-11-04T10:32:12.021Z [err]  
2020-11-04T10:32:12.022Z [err] node-pre-gyp
2020-11-04T10:32:12.022Z [err]  ERR! stack
2020-11-04T10:32:12.022Z [err]  Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/home/pi/.node-red/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/pi/.node-red/node_modules/canvas/build/Release --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
2020-11-04T10:32:12.023Z [err] node-pre-gyp 
2020-11-04T10:32:12.023Z [err] ERR! 
2020-11-04T10:32:12.023Z [err] stack
2020-11-04T10:32:12.023Z [err]      at ChildProcess.<anonymous> (/home/pi/.node-red/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
2020-11-04T10:32:12.023Z [err] node-pre-gyp 
2020-11-04T10:32:12.023Z [err] ERR!
2020-11-04T10:32:12.023Z [err]  
2020-11-04T10:32:12.023Z [err] stack     at ChildProcess.emit (events.js:198:13)
2020-11-04T10:32:12.023Z [err] node-pre-gyp
2020-11-04T10:32:12.023Z [err]  
2020-11-04T10:32:12.023Z [err] ERR! 
2020-11-04T10:32:12.023Z [err] stack
2020-11-04T10:32:12.023Z [err]      at maybeClose (internal/child_process.js:982:16)
2020-11-04T10:32:12.023Z [err] node-pre-gyp
2020-11-04T10:32:12.024Z [err]  
2020-11-04T10:32:12.024Z [err] ERR! 
2020-11-04T10:32:12.024Z [err] stack
2020-11-04T10:32:12.024Z [err]      at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
2020-11-04T10:32:12.025Z [err] node-pre-gyp
2020-11-04T10:32:12.025Z [err]  ERR! 
2020-11-04T10:32:12.025Z [err] System Linux 4.9.35-v7+
2020-11-04T10:32:12.026Z [err] node-pre-gyp
2020-11-04T10:32:12.026Z [err]  ERR!
2020-11-04T10:32:12.026Z [err]  command
2020-11-04T10:32:12.026Z [err]  "/usr/bin/node" "/home/pi/.node-red/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
2020-11-04T10:32:12.026Z [err] node-pre-gyp
2020-11-04T10:32:12.026Z [err]  ERR!
2020-11-04T10:32:12.026Z [err]  
2020-11-04T10:32:12.026Z [err] cwd
2020-11-04T10:32:12.026Z [err]  /home/pi/.node-red/node_modules/canvas
2020-11-04T10:32:12.027Z [err] node-pre-gyp
2020-11-04T10:32:12.027Z [err]  ERR!
2020-11-04T10:32:12.027Z [err]  node -v
2020-11-04T10:32:12.027Z [err]  v10.22.0
2020-11-04T10:32:12.027Z [err] node-pre-gyp
2020-11-04T10:32:12.027Z [err]  
2020-11-04T10:32:12.027Z [err] ERR! 
2020-11-04T10:32:12.027Z [err] node-pre-gyp -v
2020-11-04T10:32:12.027Z [err]  v0.11.0
2020-11-04T10:32:12.027Z [err] node-pre-gyp
2020-11-04T10:32:12.027Z [err]  ERR!
2020-11-04T10:32:12.028Z [err]  
2020-11-04T10:32:12.028Z [err] not ok 
2020-11-04T10:32:12.029Z [out] Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/home/pi/.node-red/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/home/pi/.node-red/node_modules/canvas/build/Release --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
2020-11-04T10:32:13.635Z [err] npm
2020-11-04T10:32:13.635Z [err]  WARN retry-axios@0.3.2 requires a peer of axios@* but none is installed. You must install peer dependencies yourself.
2020-11-04T10:32:13.648Z [err] npm
2020-11-04T10:32:13.648Z [err]  WARN
2020-11-04T10:32:13.648Z [err]  node-red-project@0.0.1 No repository field.
2020-11-04T10:32:13.660Z [err] npm
2020-11-04T10:32:13.661Z [err]  WARN
2020-11-04T10:32:13.661Z [err]  node-red-project@0.0.1 No license field.
2020-11-04T10:32:13.661Z [err] 
2020-11-04T10:32:13.704Z [err] npm
2020-11-04T10:32:13.705Z [err]  ERR! code ELIFECYCLE
2020-11-04T10:32:13.705Z [err] npm
2020-11-04T10:32:13.705Z [err]  
2020-11-04T10:32:13.705Z [err] ERR!
2020-11-04T10:32:13.705Z [err]  errno
2020-11-04T10:32:13.705Z [err]  1
2020-11-04T10:32:13.712Z [err] npm
2020-11-04T10:32:13.712Z [err]  ERR!
2020-11-04T10:32:13.712Z [err]  canvas@2.6.1 install: `node-pre-gyp install --fallback-to-build`
2020-11-04T10:32:13.712Z [err] npm
2020-11-04T10:32:13.712Z [err]  ERR!
2020-11-04T10:32:13.712Z [err]  Exit status 1
2020-11-04T10:32:13.712Z [err] npm
2020-11-04T10:32:13.713Z [err]  
2020-11-04T10:32:13.713Z [err] ERR!
2020-11-04T10:32:13.713Z [err]  
2020-11-04T10:32:13.713Z [err] npm
2020-11-04T10:32:13.713Z [err]  ERR!
2020-11-04T10:32:13.713Z [err]  Failed at the canvas@2.6.1 install script.
2020-11-04T10:32:13.713Z [err] npm
2020-11-04T10:32:13.713Z [err]  ERR!
2020-11-04T10:32:13.713Z [err]  This is probably not a problem with npm. There is likely additional logging output above.
2020-11-04T10:32:13.759Z [err] 
2020-11-04T10:32:13.759Z [err] npm ERR! A complete log of this run can be found in:
2020-11-04T10:32:13.759Z [err] npm ERR!     /home/pi/.npm/_logs/2020-11-04T10_32_13_729Z-debug.log
2020-11-04T10:32:13.787Z rc=1

Thanks for your assistance.

You may need to install the pre-reqs for that canvas lib so it can recompiile correctly - https://www.npmjs.com/package/canvas

1 Like

Is there something more I should be adding to the package.json to eliminate this issue?

You could perhaps look at something like the pureimage package instead of canvas as that is just js and doesn't need any compilation.

1 Like

Thank you for the advice, I managed to get it working.
I had to do 3 steps:

  1. Had to install some dependencies as described on https://www.npmjs.com/package/canvas
sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
  1. Next I could install canvas (using the pi user, starting /home/pi folder):
npm install canvas
  1. After the above 2 steps chart-image has installed from the Palette Manager in Node-Red.

Your example is working now.

Let me ask a related question: if I want to create a small graphics for example show a measurement value, maybe influence the colour based on the value, add trending icon or something similar and send that over telegram as an image. Since I have canvas installed, I could just create a canvas object and save the result to an image similarly like it is done for the canvas image, right?

Yes, - however as noted above if i was creating a node I would look to use something like pureimage library instead which also provides a canvas to "draw" on - that doesn't rely on native libraries so would be more easily installed by others.

1 Like

Thanks! I'll start messing with it.

Wouldn't be that simple in node-red...
What you can do is add filters to things based on the data put in. Check the chartjs documentation. I've also included the chartjs-plugin-annotation library. Look at that documentation on how to use it. You can draw shapes on the chart with that.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.