Greetings, I have been using different codes and I have this problem with the colored background when graphing, in the "chart-image" node the background of different colors appears but modifying the code to display it with the "chart" node it doesn't allow me. I appreciate your help.
[
{
"id": "0244f5bb8d1c0b39",
"type": "inject",
"z": "d2f356e8.51d6e8",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 150,
"y": 180,
"wires": [
[
"fc6e3273c80a8bc9"
]
]
},
{
"id": "fc6e3273c80a8bc9",
"type": "random",
"z": "d2f356e8.51d6e8",
"name": "",
"low": 1,
"high": 10,
"inte": "false",
"property": "payload",
"x": 360,
"y": 180,
"wires": [
[
"030d60255e8bf3e8"
]
]
},
{
"id": "030d60255e8bf3e8",
"type": "ui_chart",
"z": "d2f356e8.51d6e8",
"name": "",
"group": "e8af5d916c3b74e5",
"order": 3,
"width": 0,
"height": 0,
"label": "chartp22",
"chartType": "line",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "",
"ymax": "",
"removeOlder": 1,
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"className": "clickable",
"x": 600,
"y": 180,
"wires": [
[
"89bf5d54cca0a5f9",
"055702cb77187ede",
"139b46b97385edbe",
"89ad842407e4590c"
]
]
},
{
"id": "11070ea0e2cad381",
"type": "inject",
"z": "d2f356e8.51d6e8",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": "0.2",
"topic": "",
"payload": "",
"payloadType": "date",
"x": 150,
"y": 220,
"wires": [
[
"048332d4c0732ab9",
"06f106499db0c8c0",
"5926e211bf52243e"
]
]
},
{
"id": "eaaf656accd269de",
"type": "chart-image",
"z": "d2f356e8.51d6e8",
"name": "",
"width": 500,
"height": "500",
"x": 830,
"y": 220,
"wires": [
[
"ab5ed0b5cff3c5dc"
]
]
},
{
"id": "ab5ed0b5cff3c5dc",
"type": "jimp-image",
"z": "d2f356e8.51d6e8",
"name": "",
"data": "payload",
"dataType": "msg",
"ret": "img",
"parameter1": "",
"parameter1Type": "msg",
"parameter2": "",
"parameter2Type": "msg",
"parameter3": "",
"parameter3Type": "msg",
"parameter4": "",
"parameter4Type": "msg",
"parameter5": "",
"parameter5Type": "msg",
"parameter6": "",
"parameter6Type": "msg",
"parameter7": "",
"parameter7Type": "msg",
"parameter8": "",
"parameter8Type": "msg",
"sendProperty": "payload",
"sendPropertyType": "msg",
"parameterCount": 0,
"jimpFunction": "none",
"selectedJimpFunction": {
"name": "none",
"fn": "none",
"description": "Just loads the image.",
"parameters": []
},
"x": 990,
"y": 220,
"wires": [
[
"f22a4b9b935535ec"
]
]
},
{
"id": "f22a4b9b935535ec",
"type": "image viewer",
"z": "d2f356e8.51d6e8",
"name": "",
"width": "400",
"data": "payload",
"dataType": "msg",
"active": true,
"x": 1130,
"y": 220,
"wires": [
[]
]
},
{
"id": "5926e211bf52243e",
"type": "function",
"z": "d2f356e8.51d6e8",
"name": "function 193",
"func": "msg.ui_control = {\n options: {\n elements: {\n line: {\n borderWidth: 3,\n fill:false,\n spanGaps:true,\n },\n point:{\n radius:1,\n pointStyle:'circle' \n }\n },\n legend: {\n display: false\n },\n scales: {\n xAxes: [{\n type: 'time',\n gridLines: {\n display:true,\n color: \"rgba(255, 0, 0, 0.8)\",\n zeroLineColor: \"rgba(0, 255, 0, 0.8)\"\n },\n id: 'custom-x-axis',\n position:'bottom',\n ticks: {\n display : true,\n }\n }],\n yAxes: [{\n gridLines: {\n display:true},\n id: 'custom-y-axis',\n \n scaleLabel: {\n display: true,\n //display: false,\n labelString: 'y-axis title'\n },\n\n }]\n },\n plugins: {\n datalabels: {\n backgroundColor:'whitesmoke',\n //backgroundColor:'red',\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 \n plugins: [{\n beforeDraw: function(chart) {\n const ctx = chart.ctx;\n const canvas = chart.canvas;\n const chartArea = chart.chartArea;\n \n // Chart background\n var gradientBack = canvas.getContext(\"2d\").createLinearGradient(0, 250, 0, 0);\n gradientBack.addColorStop(0, \"rgba(213,235,248,1)\");\n gradientBack.addColorStop(0.16, \"rgba(213,235,248,1)\");\n gradientBack.addColorStop(0.17, \"rgba(226,245,234,1)\");\n gradientBack.addColorStop(0.25, \"rgba(226,245,234,1)\");\n gradientBack.addColorStop(0.26, \"rgba(252,244,219,1)\");\n gradientBack.addColorStop(0.5, \"rgba(252,244,219,1)\");\n gradientBack.addColorStop(0.51, \"rgba(251,221,221,1)\");\n gradientBack.addColorStop(1, \"rgba(251,221,221,1)\");\n \n ctx.fillStyle = gradientBack;\n ctx.fillRect(chartArea.left, chartArea.bottom,\n chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);\n }\n }]\n};\n\ndelete msg.payload;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 350,
"y": 220,
"wires": [
[
"030d60255e8bf3e8"
]
]
},
{
"id": "89ad842407e4590c",
"type": "function",
"z": "d2f356e8.51d6e8",
"name": "Vertical Bar Chart",
"func": "var long = msg.payload[0].data[0].length;\n\nvar lab = [];\nvar dat = [];\n\nfor(var i = 0; i<long; i++){\n lab[i] = msg.payload[0].data[0][i].x;\n dat[i] = msg.payload[0].data[0][i].y;\n}\n\nlet m = {\n type: 'line',\n options: {\n title: {\n display:true,\n text:'Vertical bar example'\n },\n legend: {\n display:false\n },\n chartArea: {\n backgroundColor: 'white'\n },\n scales: {\n xAxes: [{\n type: 'time'\n }]\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 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 \n plugins: [{\n beforeDraw: function(chart) {\n const ctx = chart.ctx;\n const canvas = chart.canvas;\n const chartArea = chart.chartArea;\n \n // Chart background\n var gradientBack = canvas.getContext(\"2d\").createLinearGradient(0, 250, 0, 0);\n gradientBack.addColorStop(0, \"rgba(213,235,248,1)\");\n gradientBack.addColorStop(0.16, \"rgba(213,235,248,1)\");\n gradientBack.addColorStop(0.17, \"rgba(226,245,234,1)\");\n gradientBack.addColorStop(0.25, \"rgba(226,245,234,1)\");\n gradientBack.addColorStop(0.26, \"rgba(252,244,219,1)\");\n gradientBack.addColorStop(0.5, \"rgba(252,244,219,1)\");\n gradientBack.addColorStop(0.51, \"rgba(251,221,221,1)\");\n gradientBack.addColorStop(1, \"rgba(251,221,221,1)\");\n \n ctx.fillStyle = gradientBack;\n ctx.fillRect(chartArea.left, chartArea.bottom,\n chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);\n }\n }],\n \n data: {\n labels:[],\n datasets: [\n {\n label:\"Sample data\",\n backgroundColor:'rgba(57,97,184,0.8)',\n //backgroundColor:'#9E0700',\n data:[]\n }\n ]\n }\n}\n\nm.data.datasets[0].data = dat;\nm.data.labels = lab;\n\nmsg.payload = m;\n\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 630,
"y": 220,
"wires": [
[
"eaaf656accd269de"
]
]
},
{
"id": "e8af5d916c3b74e5",
"type": "ui_group",
"name": "PRESENTACION",
"tab": "20eaa9112016b9a1",
"order": 1,
"disp": false,
"width": 23,
"collapse": false,
"className": "seccion"
},
{
"id": "20eaa9112016b9a1",
"type": "ui_tab",
"name": "CONDITION MONITORING charts",
"icon": "crop_7_5",
"order": 1,
"disabled": false,
"hidden": false
}
]
