Trouble displaying chart.js line chart on Dashboard 2.0

Dashboard
1

Hello,
I am trying to wrap up a proof of concept i am making to store and display process control data in a node red dashboard. i will start by saying i am very green when it comes to html, javascript, and node-red. i have spent a fair amount of time in node red trying to learn as i go but i seem to be stumped and ai code generation has almost gotten me there but i am having an issue when using actual data instead of test/sample data.

My data is going to be pulled from a ms-sql database via a "node-red-contrib-mssql-plus" node. here is a small sample of how the data is output via msg.payload:
"[{"Stamp":"2025-07-08T12:25:50.427Z","Last_Weighed":203.24,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.772},{"Stamp":"2025-07-08T12:25:51.123Z","Last_Weighed":199.11,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.888},{"Stamp":"2025-07-08T12:25:51.660Z","Last_Weighed":186.5,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.961},{"Stamp":"2025-07-08T12:25:52.233Z","Last_Weighed":171.52,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.983},{"Stamp":"2025-07-08T12:25:52.877Z","Last_Weighed":148.91,"Target":156,"LCL":103.89,"UCL":201.45,"LSL":120.28,"USL":179.91,"Xbar":164.929}]"

Here is what the layout of my dashboard (@flowfuse/node-red-dashboard) looks like with the working static chart:

image
image1895Ă—619 41.1 KB

now, once i amend the code to accept data via msg.payload instead of it being statically built in, the chart does not display at all, just leaving a blank canvas. Any thoughts on where my issue lies?

Thank you in advance

image
image1899Ă—623 17.8 KB

[
    {
        "id": "db379ea65e11bedc",
        "type": "ui-template",
        "z": "422ecc23a312cf7c",
        "group": "78941b46bdde56bb",
        "page": "",
        "ui": "",
        "name": "working static chart (dont delete)",
        "order": 17,
        "width": "3",
        "height": "10",
        "head": "",
        "format": "<!DOCTYPE html>\n<html>\n<head>\n  <title>Line Chart Example</title>\n  <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n</head>\n<body>\n  <canvas id=\"myChart\" width=\"900\" height=\"450\"></canvas>\n\n  <script>\n    // Example data (replace with your actual data arrays)\n    const stamp = [\n      \"2025-07-01T10:00:00Z\",\n      \"2025-07-01T11:00:00Z\",\n      \"2025-07-01T12:00:00Z\"\n    ];\n\n    const last_weighed = [98, 99.5, 97.8];\n    const target = [100, 100, 100];\n    const xbar = [98.5, 99.2, 98.7];\n    const lcl = [95, 95, 95];\n    const ucl = [105, 105, 105];\n    const lsl = [90, 90, 90];\n    const usl = [110, 110, 110];\n\n    const ctx = document.getElementById('myChart').getContext('2d');\n\n    new Chart(ctx, {\n      type: 'line',\n      data: {\n        labels: stamp, // x-axis values\n        datasets: [\n          {\n            label: 'Last Weighed',\n            data: last_weighed,\n            borderColor: 'blue',\n            fill: false,\n            tension: 0.1\n          },\n          {\n            label: 'Target',\n            data: target,\n            borderColor: 'green',\n            fill: false,\n            borderDash: [5, 5],\n            tension: 0.1\n          },\n          {\n            label: 'XĚ„ (Xbar)',\n            data: xbar,\n            borderColor: 'black',\n            fill: false,\n            tension: 0.1\n          },\n          {\n            label: 'LCL',\n            data: lcl,\n            borderColor: 'orange',\n            fill: false,\n            borderDash: [4, 4],\n            tension: 0.1\n          },\n          {\n            label: 'UCL',\n            data: ucl,\n            borderColor: 'orange',\n            fill: false,\n            borderDash: [4, 4],\n            tension: 0.1\n          },\n          {\n            label: 'LSL',\n            data: lsl,\n            borderColor: 'red',\n            fill: false,\n            borderDash: [6, 2],\n            tension: 0.1\n          },\n          {\n            label: 'USL',\n            data: usl,\n            borderColor: 'red',\n            fill: false,\n            borderDash: [6, 2],\n            tension: 0.1\n          }\n        ]\n      },\n      options: {\n        responsive: true,\n        scales: {\n          x: {\n            type: 'time',\n            time: {\n              tooltipFormat: 'MMM d, HH:mm',\n              unit: 'hour'\n            },\n            title: {\n              display: true,\n              text: 'Timestamp'\n            }\n          },\n          y: {\n            title: {\n              display: true,\n              text: 'Value'\n            }\n          }\n        },\n        plugins: {\n          legend: {\n            position: 'top'\n          },\n          title: {\n            display: true,\n            text: 'Process Control Chart'\n          }\n        }\n      }\n    });\n  </script>\n</body>\n</html>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 470,
        "y": 1520,
        "wires": [
            []
        ]
    },
    {
        "id": "3a6b0941167264eb",
        "type": "inject",
        "z": "422ecc23a312cf7c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 200,
        "y": 1520,
        "wires": [
            [
                "db379ea65e11bedc"
            ]
        ]
    },
    {
        "id": "0bdbcb2aab9e05ba",
        "type": "ui-template",
        "z": "422ecc23a312cf7c",
        "group": "78941b46bdde56bb",
        "page": "",
        "ui": "",
        "name": "chart if injected data - not working",
        "order": 12,
        "width": "3",
        "height": "10",
        "head": "",
        "format": "<style>\n#myChart {\n  width: 100% !important;\n  height: 300px !important;\n}\n</style>\n\n<canvas id=\"myChart\"></canvas>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\nexport default {\n  data() {\n    return {\n      chart: null\n    };\n  },\n  methods: {\n    renderChart(data) {\n      if (!Array.isArray(data) || data.length === 0) return;\n\n      const labels = data.map(d => new Date(d.Stamp).toLocaleTimeString());\n      const lastWeighed = data.map(d => d.Last_Weighed);\n      const target = data.map(d => d.Target);\n      const xbar = data.map(d => d.Xbar);\n      const lcl = data.map(d => d.LCL);\n      const ucl = data.map(d => d.UCL);\n      const lsl = data.map(d => d.LSL);\n      const usl = data.map(d => d.USL);\n\n      const ctx = this.$el.querySelector('#myChart').getContext('2d');\n\n      if (this.chart) {\n        this.chart.destroy();\n      }\n\n      this.chart = new Chart(ctx, {\n        type: 'line',\n        data: {\n          labels: labels,\n          datasets: [\n            {\n              label: 'Last Weighed',\n              data: lastWeighed,\n              borderColor: 'blue',\n              fill: false,\n              tension: 0.1\n            },\n            {\n              label: 'Target',\n              data: target,\n              borderColor: 'green',\n              fill: false,\n              borderDash: [5, 5],\n              tension: 0.1\n            },\n            {\n              label: 'XĚ„ (Xbar)',\n              data: xbar,\n              borderColor: 'black',\n              fill: false,\n              tension: 0.1\n            },\n            {\n              label: 'LCL',\n              data: lcl,\n              borderColor: 'orange',\n              fill: false,\n              borderDash: [4, 4],\n              tension: 0.1\n            },\n            {\n              label: 'UCL',\n              data: ucl,\n              borderColor: 'orange',\n              fill: false,\n              borderDash: [4, 4],\n              tension: 0.1\n            },\n            {\n              label: 'LSL',\n              data: lsl,\n              borderColor: 'red',\n              fill: false,\n              borderDash: [6, 2],\n              tension: 0.1\n            },\n            {\n              label: 'USL',\n              data: usl,\n              borderColor: 'red',\n              fill: false,\n              borderDash: [6, 2],\n              tension: 0.1\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: {\n              title: {\n                display: true,\n                text: 'Timestamp'\n              }\n            },\n            y: {\n              title: {\n                display: true,\n                text: 'Value'\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              position: 'top'\n            },\n            title: {\n              display: true,\n              text: 'Process Control Chart'\n            }\n          }\n        }\n      });\n    }\n  },\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler(newProps) {\n        if (newProps.payload) {\n          this.renderChart(newProps.payload);\n        }\n      }\n    }\n  }\n};\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 460,
        "y": 1560,
        "wires": [
            []
        ]
    },
    {
        "id": "f56cd6a5f86661a1",
        "type": "inject",
        "z": "422ecc23a312cf7c",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"Stamp\":\"2025-07-08T12:25:04.220Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.383},{\"Stamp\":\"2025-07-08T12:25:04.917Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.044},{\"Stamp\":\"2025-07-08T12:25:05.473Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.778},{\"Stamp\":\"2025-07-08T12:25:06.113Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.558},{\"Stamp\":\"2025-07-08T12:25:06.660Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.411},{\"Stamp\":\"2025-07-08T12:25:07.327Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.346},{\"Stamp\":\"2025-07-08T12:25:07.860Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.382},{\"Stamp\":\"2025-07-08T12:25:08.433Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.485},{\"Stamp\":\"2025-07-08T12:25:09.057Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.643},{\"Stamp\":\"2025-07-08T12:25:09.610Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.817},{\"Stamp\":\"2025-07-08T12:25:10.310Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.023},{\"Stamp\":\"2025-07-08T12:25:10.850Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.24},{\"Stamp\":\"2025-07-08T12:25:11.507Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.441},{\"Stamp\":\"2025-07-08T12:25:12.040Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:12.743Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.808},{\"Stamp\":\"2025-07-08T12:25:13.273Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.955},{\"Stamp\":\"2025-07-08T12:25:13.923Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.047},{\"Stamp\":\"2025-07-08T12:25:14.463Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.075},{\"Stamp\":\"2025-07-08T12:25:15.037Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.006},{\"Stamp\":\"2025-07-08T12:25:15.737Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.863},{\"Stamp\":\"2025-07-08T12:25:16.290Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.653},{\"Stamp\":\"2025-07-08T12:25:16.920Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.406},{\"Stamp\":\"2025-07-08T12:25:17.453Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.096},{\"Stamp\":\"2025-07-08T12:25:18.040Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.854},{\"Stamp\":\"2025-07-08T12:25:18.633Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.652},{\"Stamp\":\"2025-07-08T12:25:19.220Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.517},{\"Stamp\":\"2025-07-08T12:25:19.923Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.457},{\"Stamp\":\"2025-07-08T12:25:20.467Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.49},{\"Stamp\":\"2025-07-08T12:25:21.110Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.584},{\"Stamp\":\"2025-07-08T12:25:21.643Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.728},{\"Stamp\":\"2025-07-08T12:25:22.227Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.887},{\"Stamp\":\"2025-07-08T12:25:22.810Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.075},{\"Stamp\":\"2025-07-08T12:25:23.517Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.273},{\"Stamp\":\"2025-07-08T12:25:24.053Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.458},{\"Stamp\":\"2025-07-08T12:25:24.717Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:25.260Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.794},{\"Stamp\":\"2025-07-08T12:25:25.830Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.929},{\"Stamp\":\"2025-07-08T12:25:26.430Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.014},{\"Stamp\":\"2025-07-08T12:25:27.140Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.039},{\"Stamp\":\"2025-07-08T12:25:27.683Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.976},{\"Stamp\":\"2025-07-08T12:25:28.243Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.845},{\"Stamp\":\"2025-07-08T12:25:28.810Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.652},{\"Stamp\":\"2025-07-08T12:25:29.523Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.425},{\"Stamp\":\"2025-07-08T12:25:30.067Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.14},{\"Stamp\":\"2025-07-08T12:25:30.637Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.917},{\"Stamp\":\"2025-07-08T12:25:31.347Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.731},{\"Stamp\":\"2025-07-08T12:25:31.890Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.607},{\"Stamp\":\"2025-07-08T12:25:32.430Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.551},{\"Stamp\":\"2025-07-08T12:25:33.107Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.581},{\"Stamp\":\"2025-07-08T12:25:33.653Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.667},{\"Stamp\":\"2025-07-08T12:25:34.293Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.799},{\"Stamp\":\"2025-07-08T12:25:34.847Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.946},{\"Stamp\":\"2025-07-08T12:25:35.453Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.119},{\"Stamp\":\"2025-07-08T12:25:36.017Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.302},{\"Stamp\":\"2025-07-08T12:25:36.607Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.472},{\"Stamp\":\"2025-07-08T12:25:37.310Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:37.837Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.782},{\"Stamp\":\"2025-07-08T12:25:38.423Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.907},{\"Stamp\":\"2025-07-08T12:25:39.030Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.985},{\"Stamp\":\"2025-07-08T12:25:39.610Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":165.009},{\"Stamp\":\"2025-07-08T12:25:40.307Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.951},{\"Stamp\":\"2025-07-08T12:25:40.847Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.829},{\"Stamp\":\"2025-07-08T12:25:41.433Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.651},{\"Stamp\":\"2025-07-08T12:25:42.017Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.441},{\"Stamp\":\"2025-07-08T12:25:42.723Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.178},{\"Stamp\":\"2025-07-08T12:25:43.263Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.97},{\"Stamp\":\"2025-07-08T12:25:43.927Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.798},{\"Stamp\":\"2025-07-08T12:25:44.447Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.683},{\"Stamp\":\"2025-07-08T12:25:45.020Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.631},{\"Stamp\":\"2025-07-08T12:25:45.717Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.659},{\"Stamp\":\"2025-07-08T12:25:46.247Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.738},{\"Stamp\":\"2025-07-08T12:25:46.910Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.861},{\"Stamp\":\"2025-07-08T12:25:47.553Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.996},{\"Stamp\":\"2025-07-08T12:25:48.093Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.157},{\"Stamp\":\"2025-07-08T12:25:48.633Z\",\"Last_Weighed\":213.66,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.326},{\"Stamp\":\"2025-07-08T12:25:49.313Z\",\"Last_Weighed\":210.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.484},{\"Stamp\":\"2025-07-08T12:25:49.853Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.641},{\"Stamp\":\"2025-07-08T12:25:50.427Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.772},{\"Stamp\":\"2025-07-08T12:25:51.123Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.888},{\"Stamp\":\"2025-07-08T12:25:51.660Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.961},{\"Stamp\":\"2025-07-08T12:25:52.233Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.983},{\"Stamp\":\"2025-07-08T12:25:52.877Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.929},{\"Stamp\":\"2025-07-08T12:25:53.420Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.816},{\"Stamp\":\"2025-07-08T12:25:54.117Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.651},{\"Stamp\":\"2025-07-08T12:25:54.657Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.455},{\"Stamp\":\"2025-07-08T12:25:55.340Z\",\"Last_Weighed\":90.14,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.21},{\"Stamp\":\"2025-07-08T12:25:55.870Z\",\"Last_Weighed\":105.55,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.017},{\"Stamp\":\"2025-07-08T12:25:56.517Z\",\"Last_Weighed\":115.02,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.856},{\"Stamp\":\"2025-07-08T12:25:57.087Z\",\"Last_Weighed\":130.99,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.749},{\"Stamp\":\"2025-07-08T12:25:57.630Z\",\"Last_Weighed\":148.91,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.7},{\"Stamp\":\"2025-07-08T12:25:58.247Z\",\"Last_Weighed\":171.52,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.726},{\"Stamp\":\"2025-07-08T12:25:58.837Z\",\"Last_Weighed\":186.5,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.8},{\"Stamp\":\"2025-07-08T12:25:59.407Z\",\"Last_Weighed\":199.11,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":163.913},{\"Stamp\":\"2025-07-08T12:26:00.120Z\",\"Last_Weighed\":203.24,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.04},{\"Stamp\":\"2025-07-08T12:26:00.663Z\",\"Last_Weighed\":210.72,\"Target\":156,\"LCL\":103.89,\"UCL\":201.45,\"LSL\":120.28,\"USL\":179.91,\"Xbar\":164.189}]",
        "payloadType": "json",
        "x": 210,
        "y": 1560,
        "wires": [
            [
                "0bdbcb2aab9e05ba"
            ]
        ]
    },
    {
        "id": "78941b46bdde56bb",
        "type": "ui-group",
        "name": "Report",
        "page": "c9362b93aa48a81c",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "c9362b93aa48a81c",
        "type": "ui-page",
        "name": "Reporting",
        "ui": "0984762e823e159c",
        "path": "/Reporting",
        "icon": "home",
        "layout": "tabs",
        "theme": "8842e361403cacce",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "0984762e823e159c",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "notificationDisplayTime": 5
    },
    {
        "id": "8842e361403cacce",
        "type": "ui-theme",
        "name": "All Fill",
        "colors": {
            "surface": "#433d3d",
            "primary": "#ff4d00",
            "bgPage": "#918d8d",
            "groupBg": "#ffffff",
            "groupOutline": "#ff4d00"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
2

Any reason you are not using the built-in chart?

PS, to integrate with external dependencies (like chart.js), there is a specific pattern required. Template ui-template | Node-RED Dashboard 2.0

Also, on that page (scroll to the top) is a "Try Demo" button that has an example of loading eCharts and populating them with data - you could copy/download that demo flow and adapt it for chartjs

Also, there is this demo: How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl

3

Hey Steve,
I was under the impression that the built in charts cannot map multiple y-axis values in this fashion. I have tried the regular line graph node but i was having trouble being able to manipulate the data in order to split each item into series and x/y.

I will look through the links you have included. Thank you for the reply!

4

Steve,
Just wanted to thank you again. After your questioning me for not using the built-in chart, i went back to the drawing board. I referred back to the chart documentation and utilized multiple items in the "series" designation field. works like a charm!

1 Like