Display line chart with data retrieved from mysql

kaekzha
Thu, 09 Jan 2025 15:01:15 +0000
Dashboard

can someone help me? im new with node-red. i want to display line chart for my data but seems like somethings wrong because the line won't appear. here is my flow

[
    {
        "id": "965463562375cf7e",
        "type": "mysql",
        "z": "bae0fa13bc192bb4",
        "mydb": "69487da61920f155",
        "name": "cradle db",
        "x": 1080,
        "y": 400,
        "wires": [
            [
                "dbd533965af4947e",
                "91d58826a42d052e"
            ]
        ]
    },
    {
        "id": "311edb1ffde2125f",
        "type": "function",
        "z": "bae0fa13bc192bb4",
        "name": "insert into chart",
        "func": "msg.topic = `\n        SELECT frequency, DateTime \nFROM movement_frequency \nWHERE DateTime >= NOW() - INTERVAL 1 HOUR;\n\n\n    `;\n\n// Return the message with the query\nreturn msg;\n\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 980,
        "y": 340,
        "wires": [
            [
                "773ba03cf3933d04",
                "965463562375cf7e"
            ]
        ]
    },
    {
        "id": "dbd533965af4947e",
        "type": "function",
        "z": "bae0fa13bc192bb4",
        "name": "combiforchart",
        "func": "const inp = msg.payload;\n\n// Create an empty chart object\nvar outObj = [{\n    series: [\"Frequency\"],  // Line label\n    data: [[]],  // Chart data structure\n    labels: []   // Chart labels\n}];\n\n// Fill chart object with data\nfor (let item of inp) {\n    const date = new Date(item.DateTime); // Convert DateTime to Date object\n    \n    // Check if the date is invalid\n    if (isNaN(date)) {\n        node.warn(`Invalid Date for item: ${JSON.stringify(item)}`);\n        continue; // Skip this item if the date is invalid\n    }\n\n    // Ensure x is formatted as HH:mm (you may use other formats)\n    const xValue = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n    \n    // Add data point to the chart\n    outObj[0].data[0].push({ x: xValue, y: item.frequency || 0 });\n    \n    // Optionally add labels (not used in x/y chart but for reference)\n    outObj[0].labels.push(xValue);\n}\n\n// Assign the formatted chart object to the message payload\nmsg.payload = outObj;\n\n// Set the topic to ensure the line label is used in the chart\nmsg.topic = \"Motion\";  // You can change this to whatever label you prefer for the line\n\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1300,
        "y": 480,
        "wires": [
            [
                "3906731b6640319b"
            ]
        ]
    },
    {
        "id": "91d58826a42d052e",
        "type": "debug",
        "z": "bae0fa13bc192bb4",
        "name": "debug 32",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1260,
        "y": 600,
        "wires": []
    },
    {
        "id": "3bd8483f9deb09e1",
        "type": "mysql",
        "z": "bae0fa13bc192bb4",
        "mydb": "69487da61920f155",
        "name": "cradle db",
        "x": 860,
        "y": 400,
        "wires": [
            [
                "311edb1ffde2125f"
            ]
        ]
    },
    {
        "id": "773ba03cf3933d04",
        "type": "debug",
        "z": "bae0fa13bc192bb4",
        "name": "debug 30",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1160,
        "y": 340,
        "wires": []
    },
    {
        "id": "3906731b6640319b",
        "type": "ui_chart",
        "z": "bae0fa13bc192bb4",
        "name": "",
        "group": "ab32e6f0245d4ae1",
        "order": 1,
        "width": "22",
        "height": "4",
        "label": "Movement Frequency",
        "chartType": "line",
        "legend": "true",
        "xformat": "HH:mm",
        "interpolate": "linear",
        "nodata": "no data available",
        "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": "",
        "x": 1500,
        "y": 480,
        "wires": [
            [
                "36354d0080905ced"
            ]
        ]
    },
    {
        "id": "e3757c85f85920e2",
        "type": "function",
        "z": "bae0fa13bc192bb4",
        "name": "insert into database",
        "func": "if (Array.isArray(msg.payload) && msg.payload.length > 0) {\n    let frequency = msg.payload[0].frequency || 0; // Default to 0 if undefined\n    msg.topic = `\n        INSERT INTO movement_frequency (DateTime, frequency)\n        VALUES (NOW(), ${frequency})\n    `;\n    msg.payload = frequency;\n    return msg;\n} else {\n    // If no data, insert 0\n    msg.topic = `\n        INSERT INTO movement_frequency (DateTime, frequency)\n        VALUES (NOW(), 0)\n    `;\n    msg.payload = 0;\n\n    node.warn(\"ResultSetHeader: \" + JSON.stringify(msg.payload));\n    \n    return msg;\n}\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 710,
        "y": 340,
        "wires": [
            [
                "3bd8483f9deb09e1"
            ]
        ]
    },
    {
        "id": "36354d0080905ced",
        "type": "debug",
        "z": "bae0fa13bc192bb4",
        "name": "debug 35",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1680,
        "y": 480,
        "wires": []
    },
    {
        "id": "72cd8bed3cf1e1f8",
        "type": "mysql",
        "z": "bae0fa13bc192bb4",
        "mydb": "69487da61920f155",
        "name": "cradle db",
        "x": 520,
        "y": 340,
        "wires": [
            [
                "e3757c85f85920e2"
            ]
        ]
    },
    {
        "id": "8db5d2a5ab316b2d",
        "type": "function",
        "z": "bae0fa13bc192bb4",
        "name": "create query audio",
        "func": "msg.topic = `\n    SELECT COUNT(*) AS frequency, DateTime\n    FROM movement\n    WHERE DateTime >= NOW() - INTERVAL 1 MINUTE\n    GROUP BY HOUR(DateTime), MINUTE(DateTime);\n\n`;\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 310,
        "y": 340,
        "wires": [
            [
                "72cd8bed3cf1e1f8"
            ]
        ]
    },
    {
        "id": "e5090132986e7610",
        "type": "inject",
        "z": "bae0fa13bc192bb4",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "60",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 90,
        "y": 340,
        "wires": [
            [
                "8db5d2a5ab316b2d"
            ]
        ]
    },
    {
        "id": "0a013b8c4eb3631a",
        "type": "ui_button",
        "z": "bae0fa13bc192bb4",
        "name": "",
        "group": "ab32e6f0245d4ae1",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "button",
        "tooltip": "Load Data from Database",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "payload",
        "topicType": "msg",
        "x": 110,
        "y": 420,
        "wires": [
            [
                "8db5d2a5ab316b2d"
            ]
        ]
    },
    {
        "id": "69487da61920f155",
        "type": "MySQLdatabase",
        "name": "cradle",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "cradle",
        "tz": "",
        "charset": "UTF8"
    },
    {
        "id": "ab32e6f0245d4ae1",
        "type": "ui_group",
        "name": "Motion Frequency",
        "tab": "899250cf6621fe0f",
        "order": 1,
        "disp": true,
        "width": "22",
        "collapse": false,
        "className": ""
    },
    {
        "id": "899250cf6621fe0f",
        "type": "ui_tab",
        "name": "Data Visualization",
        "icon": "dashboard",
        "order": 4,
        "disabled": false,
        "hidden": false
    }
]

i'll provide the dashboard and the debugs too just for review

8 posts - 4 participants