Ho trovato questo codice, che esporta un grafico in .pdf.
Io però vorrei esportare un grafico linea, come posso modificarlo?
Grazie per l'aiuto
[{"id":"dd81d49.28f2728","type":"tab","label":"Flow 9","disabled":false,"info":""},{"id":"e26c21c5.1443c","type":"function","z":"dd81d49.28f2728","name":"contents","func":"//globals\nvar CompanyName = \"ETM\";\nvar CompanyLogoURL = \"https://www.etmgroup.it/etm/wp-content/uploads/2019/01/Logo-ETM.jpg\";\n\n//flow variables\nvar startdate = 1578485832986; //date in unix timestamp\nvar enddate = 1578485832986 + 24*60*60*1000; //next day ;)\nvar selected_machine = \"PASTORIZZATORE\";\nvar selected_machine_name = \"PS3\";\n\n\nvar content_var_inac_count = 2;\nvar content_var_inac_sum = 5;\nvar content_var_inac_mean = 7;\n\n\nvar options = {year: 'numeric', month: '2-digit', day: '2-digit'};\nvar d = new Date();\nvar dateNow = d.toLocaleDateString('pl-PL', options);\nd = new Date(startdate);\ndateFrom = d.toLocaleDateString('pl-PL', options);\nd = new Date(enddate);\ndateTo = d.toLocaleDateString('pl-PL', options);\n\n\nvar content_table_worktime = flow.get('flow_content_table_worktime')||0;\n\n//data for circle diagram\nvar contents_diag_circle_data = \"[90,5,30,7,1]\"; //only numerical data\nvar contents_diag_circle_label = \"[\\\"Hello\\\",\\\"Hi\\\",\\\"Howdy\\\",\\\"Wadup\\\",\\\"Yo\\\"]\";\nvar contents_diag_circle_color = \"[\\\"#39ca74\\\",\\\"#e54d42\\\",\\\"#f0c330\\\",\\\"#3999d8\\\",\\\"#35485d\\\"]\";\n\n//data for linea chart\nvar chart = [{\n \"series\":[\"A\",\"B\",\"C\"],\n \"data\":[[{\"x\":1504029632890,\"y\":5},{\"x\":1504029636001,\"y\":4},{\"x\":1504029638656,\"y\":2}],[{\"x\":1504029633514,\"y\":6},{\"x\":1504029636622,\"y\":7},{\"x\":1504029639539,\"y\":6}],[{\"x\":1504029634400,\"y\":7},{\"x\":1504029637959,\"y\":9},{\"x\":1504029640317,\"y\":7}]],\n \"labels\":[\"\"]\n}];\n\nvar contents = {\n CompanyName: CompanyName,\n CompanyLogoURL: CompanyLogoURL,\n machineName: selected_machine_name,\n dateNow: dateNow,\n dateFrom: dateFrom,\n dateTo: dateTo,\n \n \n content_var_inac_count: content_var_inac_count,\n content_var_inac_sum: content_var_inac_sum,\n content_var_inac_mean: content_var_inac_mean,\n \n contents_diag_circle_data: contents_diag_circle_data,\n contents_diag_circle_label: contents_diag_circle_label,\n contents_diag_circle_color: contents_diag_circle_color,\n \n \n chart: chart\n}\n\nreturn contents;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":420,"wires":[["a1011341.14d6a","d12b0fc4.66fc2"]]},{"id":"d12b0fc4.66fc2","type":"debug","z":"dd81d49.28f2728","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":450,"y":480,"wires":[]},{"id":"d070f7c6.9f0fa8","type":"debug","z":"dd81d49.28f2728","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":670,"y":500,"wires":[]},{"id":"a1011341.14d6a","type":"template","z":"dd81d49.28f2728","name":"Raport_template1_main","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<script>\n\ndiv {\n width: 100%;\n text-align: center;\n}\ndiv p {\n text-align: center;\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n color: #bdc3c7;\n}\n</script>\n\n <body>\n<p><span style=\"color: #008080;\"> </span></p>\n<table style=\"height: 27px; margin-left: auto; margin-right: auto;\" border=\"1\" width=\"90%\">\n<tbody>\n<tr>\n<td style=\"width: 75%;\"><span style=\"color: #008080;\"><strong>Report</strong></span></td>\n<td style=\"width: 25%;\"><span style=\"color: #008080;\"><strong><img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"{{CompanyLogoURL}}\" alt=\"{{CompanyName}}\" width=\"150\" height=\"33\" /></strong></span></td>\n</tr>\n</tbody>\n</table>\n<table style=\"height: 12px; width: 90%; margin-left: auto; margin-right: auto;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 15%;\"><span style=\"color: #008080;\"><strong>SETTORE:</strong></span></td>\n<td style=\"width: 35%;\"><span style=\"color: #008080;\">{{machineName}}</span></td>\n<td style=\"width: 25%;\"><span style=\"color: #008080;\"><strong>ODIERNA:</strong> {{dateNow}}</span></td>\n</tr>\n</tbody>\n</table>\n<table style=\"height: 12px; width: 90%; margin-left: auto; margin-right: auto;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 10%;\"><span style=\"color: #008080;\"><strong>AZIENDA :</strong></span></td>\n<td style=\"width: 90%;\"><span style=\"color: #008080;\">{{CompanyName}}</span></td>\n</tr>\n</tbody>\n</table>\n<table style=\"height: 26px; margin-left: auto; margin-right: auto;\" width=\"90%\">\n<tbody>\n<tr>\n<td style=\"width: 512.267px;\"><span style=\"color: #008080;\"><strong>GRAFICO</strong></span></td>\n</tr>\n</tbody>\n</table>\n<table style=\"height: 243px; margin-left: auto; margin-right: auto;\" border=\"1\" width=\"90%\">\n<tbody>\n<tr style=\"height: 249px;\">\n<td style=\"width: 540.8px; height: 249px; text-align: center;\"><span style=\"color: #008080;\"> \n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n<canvas id=\"canvas\" width=\"600\" height=\"400\"></canvas>\n \n</span></td>\n</tr>\n<tr style=\"height: 33.6px;\">\n<td style=\"width: 540.8px; height: 33.6px;\">\n<table style=\"height: 15px;\" width=\"100%\">\n<tbody>\n<tr>\n\n\n<td style=\"width: 25%;\"><strong><span style=\"color: #008080;\">LINEE: </span></strong><span style=\"color: #008080;\">{{chart}}</span></td>\n</tr>\n</tbody>\n</table>\n</td>\n</tr>\n</tbody>\n</table>\n{{{content_table_worktime}}}\n<br >\n\n<div>\n <canvas id=\"canvas\" width=\"600\" height=\"400\">\n </canvas>\n <p>Change the 'myData' values to see the labels dynamically adjust.</p>\n</div>\n\n\n<script>\n/* <3 \nhttp://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/\n*/\n\nvar myColor = {{{contents_diag_circle_color}}};\nvar myData = {{contents_diag_circle_data}};\nvar myLabel = {{{contents_diag_circle_label}}};\n\nfunction getTotal(){\n var myTotal = 0;\n for (var j = 0; j < myData.length; j++) {\n myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;\n }\n return myTotal;\n}\n\nfunction plotData() {\n var canvas;\n var ctx;\n var lastend = 0;\n var myTotal = getTotal();\n var doc;\n canvas = document.getElementById(\"canvas\");\n var x = (canvas.width)/2;\n var y = (canvas.height)/2;\n var r = 150;\n \n ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n for (var i = 0; i < myData.length; i++) {\n ctx.fillStyle = myColor[i];\n ctx.beginPath();\n ctx.moveTo(x,y);\n ctx.arc(x,y,r,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);\n ctx.lineTo(x,y);\n ctx.fill();\n \n // Now the pointers\n ctx.beginPath();\n var start = [];\n var end = [];\n var last = 0;\n var flip = 0;\n var textOffset = 0;\n var precentage = (myData[i]/myTotal)*100;\n start = getPoint(x,y,r-20,(lastend+(Math.PI*2*(myData[i]/myTotal))/2));\n end = getPoint(x,y,r+20,(lastend+(Math.PI*2*(myData[i]/myTotal))/2));\n if(start[0] <= x)\n {\n flip = -1;\n textOffset = -110;\n }\n else\n {\n flip = 1;\n textOffset = 10;\n }\n ctx.moveTo(start[0],start[1]);\n ctx.lineTo(end[0],end[1]);\n ctx.lineTo(end[0]+120*flip,end[1]);\n ctx.strokeStyle = \"#bdc3c7\";\n ctx.lineWidth = 2;\n ctx.stroke();\n // The labels\n ctx.font=\"17px Arial\";\n ctx.fillText(myLabel[i]+\" \"+precentage.toFixed(2)+\"%\",end[0]+textOffset,end[1]-4); \n // Increment Loop\n lastend += Math.PI*2*(myData[i]/myTotal);\n \n }\n}\n// Find that magical point\nfunction getPoint(c1,c2,radius,angle) {\n return [c1+Math.cos(angle)*radius,c2+Math.sin(angle)*radius];\n}\n// The drawing\nplotData();\n\n</script>\n </body>\n</html>","output":"str","x":570,"y":420,"wires":[["d070f7c6.9f0fa8","45fa9069.d09e6"]]},{"id":"45fa9069.d09e6","type":"function","z":"dd81d49.28f2728","name":"path","func":"\nvar main_path = \"C:/AAAtemp/\"; //please type your path\nvar name = \"Raport.pdf\";\n\nmsg.filename = main_path + name;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":420,"wires":[["366155a5.fee86a","2f03741a.23ce7c"]]},{"id":"366155a5.fee86a","type":"HTML-PDF","z":"dd81d49.28f2728","name":"HTML-PDF","output":"file","x":990,"y":420,"wires":[["736f99c5.4fa138"]]},{"id":"e8e37d37.081ef","type":"comment","z":"dd81d49.28f2728","name":"edit your path","info":"","x":810,"y":380,"wires":[]},{"id":"5d2839ca.05f928","type":"comment","z":"dd81d49.28f2728","name":"example - readme","info":"oryginal post:\nhttps://discourse.nodered.org/t/display-a-chart-in-pdf/20040/13\n\nother diagrams:\nhttps://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/\n\nMain contributors:\nwojtekdera\nhathemi\n","x":110,"y":180,"wires":[]},{"id":"1d22d083.fbfdff","type":"inject","z":"dd81d49.28f2728","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"","topic":"","payload":"1","payloadType":"str","x":130,"y":420,"wires":[["e26c21c5.1443c"]]},{"id":"2f03741a.23ce7c","type":"debug","z":"dd81d49.28f2728","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1120,"y":280,"wires":[]},{"id":"736f99c5.4fa138","type":"debug","z":"dd81d49.28f2728","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1160,"y":600,"wires":[]}]
