Hi, I used a lot this chart-image node but now it is outdated , difficult/impossible to install.
Does anybody know any similar solution ?
It is a node to render a chart image so you can use it to send to an email, telegram, ....
Thanks.
I don’t use a node to do this. I use a function node to create a url containing all my data points, and that is then sent via a http request node to the web page quickchart.io. That page request returns an image of the chart. I save it to a file, and then attach it to the email or telegram message.
1 Like
@M-a-r-t-i-n Thanks a lot, it is a possibility, but it is a pitty not to have a node for that so we don't depend on an external service.
What are you using to render the chart? Some chart libraries probably have API's to render to an image?
I agree.. I would have preferred to have a node doing it, but that was the best I could come up with when I needed a quick solution. Best of luck with your search.
I think that the node I was using did with canvas and charjs, not external api. It is ony to be able to render the image by my own resources, without any external service that some day could close, not be online, or whatever.
A quick search suggests some possibilities:
1 Like
Thanks a lot @TotallyInformation
It is not a node, but seems to be easy to implement.
But again, it depends on an external web service: " The renderer is based on QuickChart, a free and open-source web service for generating static charts. View the main QuickChart repository here", isnt it?
Search results & the ai answers will vary from person to person.
One of the suggestions was to use chartjs-node-canvas - npm Which does not use heavy computational Dom but instead the canvas library.
To use that node, you would need to import it in the setup tab of a function node. You will probably need to add a particular version of canvas also since it is a peer dependency (it's mentioned in the readme).
This article will help with importing regular npm packages: Use any npm module in Node-RED • FlowFuse
For anyone wondering why this is so tricky: nodejs does not have DOM (ie nodejs is not a browser) so it's not a simple case of rendering a chart in a full browser environment.
2 Likes
I use amcharts:It can export many file types.
Export menu is fully customizable
this is exported ,jpg pic
@M-a-r-t-i-n could you please share a json flow from nodered in which you use quickchart.io http request? Thanks.,
I dont post code here often so I hope I've got this right.
It is a simple demo that plots temperature over a few days.
The temperatures are used to format a URL that is then sent to the request node.
The image is returned which is then sent to a file write node. you will obviously need
to change the path and or filename to suite your own needs.
After that I would create either an email or telegram message to send the image.
[
{
"id": "fbcb693089bdd79f",
"type": "function",
"z": "2c04f0acbc9c4dba",
"name": "dummy temperature history",
"func": "\nmsg.payload = [\n\n{ x: new Date(\"1 feb 2025 3:42\"), y: 10},\n{ x: new Date(\"2 feb 2025 6:32\"), y: 12},\n{ x: new Date(\"3 feb 2025 14:34\"), y: 8},\n{ x: new Date(\"5 feb 2025 17:30\"), y: 6},\n{ x: new Date(\"6 feb 2025 13:38\"), y: 18},\n{ x: new Date(\"8 feb 2025 20:34\"), y: 17},\n{ x: new Date(\"9 feb 2025 22:12\"), y: 8},\n{ x: new Date(\"11 feb 2025 2:16\"), y: 11},\n{ x: new Date(\"13 feb 2025 22:52\"), y: 18},\n{ x: new Date(\"14 feb 2025 23:12\"), y: 8},\n{ x: new Date(\"19 feb 2025 21:12\"), y: 5},\n\n];\n\nreturn msg; \n",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 380,
"y": 1760,
"wires": [
[
"efc2b30100e770e6"
]
]
},
{
"id": "efc2b30100e770e6",
"type": "function",
"z": "2c04f0acbc9c4dba",
"name": "create chart URL ",
"func": "\nlet ymax = 30;\nlet ymin = 0;\nvar date = new Date();\nvar month = date.getMonth();\n\n// form the URL for the graph.\n\nlet history_array = msg.payload;\n\n// try to show the last month or so of data.\n\nlet end = history_array.length;\nlet start = end - 200;\n\nif ( start < 0) start = 0;\n\nmsg.span = end - start;\n\n// now got and form the url for the chart.\n\nmsg.url = \"https://quickchart.io/chart?c={\";\n\nmsg.url = msg.url + \"options: {scales: {yAxes: [{ticks: {min: \"+ymin+\",max:\"+ymax+\",stepSize: 5}}]}},\";\nmsg.url = msg.url + \"type:%27line%27,data:{labels:[\";\n\n//msg.url = \"https://quickchart.io/chart?c={type:%27line%27,data:{labels:[\";\n\nlet timestamp = new Date();\n\nlet i;\n\nfor( i=start; i < end;)\n{\n timestamp.setTime( history_array[i].x );\n\n let date = timestamp.toLocaleDateString();\n \n msg.url = msg.url + \"%27\" + \" \" + date + \"%27\";\n\n if ( i+1 < end ) msg.url = msg.url + \",\"\n\n i++;\n};\n\n\nmsg.url = msg.url + \"],datasets:[{label:%27°C%27,data:[\";\n\nfor( i=start; i < end; )\n{\n msg.url = msg.url + history_array[i].y\n\n if ( i+1 < end ) msg.url = msg.url + \",\";\n\n i++; \n};\n\nmsg.url = msg.url + \"], fill:false, pointRadius:1 }]}}\"\n\nmsg.payload = msg.url;\n\nreturn msg;\n\n",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 630,
"y": 1760,
"wires": [
[
"dd278b25841ba63a"
]
]
},
{
"id": "dd278b25841ba63a",
"type": "http request",
"z": "2c04f0acbc9c4dba",
"name": "Request Outdoor temp Chart",
"method": "GET",
"ret": "bin",
"paytoqs": "ignore",
"url": "",
"tls": "",
"persist": false,
"proxy": "",
"insecureHTTPParser": false,
"authType": "",
"senderr": false,
"headers": [],
"x": 880,
"y": 1760,
"wires": [
[
"4cdc9645994af0cf"
]
]
},
{
"id": "4cdc9645994af0cf",
"type": "function",
"z": "2c04f0acbc9c4dba",
"name": "Set filename ",
"func": "// check the response code.\n\nif ( msg.statusCode != 200 ) return null;\n\nmsg.filename = \"/data/UserData/temp/outdoor_temp_history.jpg\";\n\nreturn msg;",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 330,
"y": 1840,
"wires": [
[
"bda45ba208eb68b7"
]
]
},
{
"id": "bda45ba208eb68b7",
"type": "file",
"z": "2c04f0acbc9c4dba",
"name": "Write Image",
"filename": "filename",
"filenameType": "msg",
"appendNewline": false,
"createDir": true,
"overwriteFile": "true",
"encoding": "none",
"x": 530,
"y": 1840,
"wires": [
[]
]
},
{
"id": "5127db1c3f754e10",
"type": "inject",
"z": "2c04f0acbc9c4dba",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 160,
"y": 1760,
"wires": [
[
"fbcb693089bdd79f"
]
]
}
]
The resulting image,
2 Likes
Works perfectly for me.
A Tip: (Please ignore if you already knew)
Using Compact mode, you can post the code in a single line.
[{"id":"fbcb693089bdd79f","type":"function","z":"0637174b7a71a782","name":"dummy temperature history","func":"\nmsg.payload = [\n\n{ x: new Date(\"1 feb 2025 3:42\"), y: 10},\n{ x: new Date(\"2 feb 2025 6:32\"), y: 12},\n{ x: new Date(\"3 feb 2025 14:34\"), y: 8},\n{ x: new Date(\"5 feb 2025 17:30\"), y: 6},\n{ x: new Date(\"6 feb 2025 13:38\"), y: 18},\n{ x: new Date(\"8 feb 2025 20:34\"), y: 17},\n{ x: new Date(\"9 feb 2025 22:12\"), y: 8},\n{ x: new Date(\"11 feb 2025 2:16\"), y: 11},\n{ x: new Date(\"13 feb 2025 22:52\"), y: 18},\n{ x: new Date(\"14 feb 2025 23:12\"), y: 8},\n{ x: new Date(\"19 feb 2025 21:12\"), y: 5},\n\n];\n\nreturn msg; \n","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":960,"wires":[["efc2b30100e770e6"]]},{"id":"efc2b30100e770e6","type":"function","z":"0637174b7a71a782","name":"create chart URL ","func":"\nlet ymax = 30;\nlet ymin = 0;\nvar date = new Date();\nvar month = date.getMonth();\n\n// form the URL for the graph.\n\nlet history_array = msg.payload;\n\n// try to show the last month or so of data.\n\nlet end = history_array.length;\nlet start = end - 200;\n\nif ( start < 0) start = 0;\n\nmsg.span = end - start;\n\n// now got and form the url for the chart.\n\nmsg.url = \"https://quickchart.io/chart?c={\";\n\nmsg.url = msg.url + \"options: {scales: {yAxes: [{ticks: {min: \"+ymin+\",max:\"+ymax+\",stepSize: 5}}]}},\";\nmsg.url = msg.url + \"type:%27line%27,data:{labels:[\";\n\n//msg.url = \"https://quickchart.io/chart?c={type:%27line%27,data:{labels:[\";\n\nlet timestamp = new Date();\n\nlet i;\n\nfor( i=start; i < end;)\n{\n timestamp.setTime( history_array[i].x );\n\n let date = timestamp.toLocaleDateString();\n \n msg.url = msg.url + \"%27\" + \" \" + date + \"%27\";\n\n if ( i+1 < end ) msg.url = msg.url + \",\"\n\n i++;\n};\n\n\nmsg.url = msg.url + \"],datasets:[{label:%27°C%27,data:[\";\n\nfor( i=start; i < end; )\n{\n msg.url = msg.url + history_array[i].y\n\n if ( i+1 < end ) msg.url = msg.url + \",\";\n\n i++; \n};\n\nmsg.url = msg.url + \"], fill:false, pointRadius:1 }]}}\"\n\nmsg.payload = msg.url;\n\nreturn msg;\n\n","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":960,"wires":[["dd278b25841ba63a"]]},{"id":"dd278b25841ba63a","type":"http request","z":"0637174b7a71a782","name":"Request Outdoor temp Chart","method":"GET","ret":"bin","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":860,"y":960,"wires":[["4cdc9645994af0cf"]]},{"id":"4cdc9645994af0cf","type":"function","z":"0637174b7a71a782","name":"Set filename ","func":"// check the response code.\n\nif ( msg.statusCode != 200 ) return null;\n\nmsg.filename = \"/temp/outdoor_temp_history.jpg\";\n\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":1040,"wires":[["bda45ba208eb68b7"]]},{"id":"bda45ba208eb68b7","type":"file","z":"0637174b7a71a782","name":"Write Image","filename":"filename","filenameType":"msg","appendNewline":false,"createDir":true,"overwriteFile":"true","encoding":"none","x":510,"y":1040,"wires":[[]]},{"id":"5127db1c3f754e10","type":"inject","z":"0637174b7a71a782","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":960,"wires":[["fbcb693089bdd79f"]]}]
1 Like
Thanks for the tip. I didn’t realise that.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
