Draw custom chart with motion data

[AlbertoGiani]

Hello, as i wrote in the title i want to achieve this: i have a rotational axis that by rotating is moving an object forward and backward. I want to make a plot where in real time i have on the y axis the RPM and on the x axis the position (i can calculate this value from the degrees of the axis) how can i achieve this? because i'm trying to use the default chart but i think it can only be time based, thanks you 

[Sgilk]

Hello @AlbertoGiani ,

With what tools are you trying to plot this? From your previous post, I'm guessing Node-RED? You can look at implementing chart.js or similar. Here is an example pallet.

All of this data is available via the datalayer and could be visualized using the application of your choice. For example, you can read axis position off of the datalayer at: motion/[axs]/<axis name>/state/values/actual/pos

[AlbertoGiani]

Hello, sorry i didn't specifiy it, yes i'm using node red. Yes i'm aware that all the data is available via the datalayer, my problem is only related to how to plot it. What i want to achieve is to have a real time graph in the dashboard with this two variables, x: position, y: rpm, is it possible to achieve this with chart.js? thank you for your answer

[Sgilk · Accepted solution]

Hi @AlbertoGiani ,

Here is an example using ChartJS delivered via CDN in a UI Template node. This method will require an internet connection on your client device to utilize ChartJS. Unfortunately, I didn't find any great packaged nodes that provide ChartJS. You can build a custom Node-RED app or node pallet that provides ChartJS if an internet connection is not possible.

[
    {
        "id": "524397992d5ae19e",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "e3505e1cb4ec52d8",
        "type": "inject",
        "z": "524397992d5ae19e",
        "name": "Inject Data",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 290,
        "y": 160,
        "wires": [
            [
                "7c20a75286d06c3b"
            ]
        ]
    },
    {
        "id": "7c20a75286d06c3b",
        "type": "function",
        "z": "524397992d5ae19e",
        "name": "Buffer Data",
        "func": "let buf = flow.get(\"dataBuffer\");\n\n//node.warn(buf);\n\nlet count = 0;\n// Store 10 x,y pairs in buffer\nif (buf.x.length < 10){\n    // Increment buffer by 10 units in x each pass\n    buf.x.push(buf.x[buf.x.length-1] + 10);\n    // Add a random y value between (0,100) each pass\n    buf.y.push(Math.random() * 100);\n}\n// Once 10 values have been populated, rollover from start\nelse {\n    if(count < 10){\n        if(count != 0){\n            buf.x[count] = buf.x[count-1] + 10;\n        } else {\n            buf.x[0] = 0;\n        }\n        buf.y[count] = Math.random() * 100;\n        count++;\n        // When all 10 values have been rolled over, restart\n        if(count == 10){\n            count = 0;\n        }\n    }\n}\n\n\n// Format ChartJS message\nmsg.payload = {\"data\": []};\n// Pupulate message with buffered values\nfor(let i = 0; i < buf.x.length; i++){\n    msg.payload.data.push(\n        {\"x\" : buf.x[i], \"y\" : buf.y[i]}\n    )\n}\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "// Code added here will be run once\n// whenever the node is started.\n\n// On init, set first dataBuffer values\nlet x1 = 0;\nlet y1 = Math.random() * 100;\n\nflow.set\n    (\"dataBuffer\",\n    {\n        \"x\": [x1],\n        \"y\": [y1]\n    }\n    );",
        "finalize": "",
        "libs": [],
        "x": 530,
        "y": 160,
        "wires": [
            [
                "301b2cc4cc5bbbef"
            ]
        ]
    },
    {
        "id": "301b2cc4cc5bbbef",
        "type": "ui_template",
        "z": "524397992d5ae19e",
        "group": "7c014f53d28beb23",
        "name": "ChartJS UI",
        "order": 1,
        "width": 20,
        "height": 15,
        "format": "<head>\n    <title>Chart.js example</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n</head>\n<body>\n    <div><canvas id=\"demoCanvas\" width=\"1200\" height=\"600\"></canvas></div>\n    <script>\n        var chart = new Chart(document.getElementById(\"demoCanvas\"), {\n        type: 'scatter',\n        data: {\n        datasets: [{\n            label: \"Plot1\",\n            // Pass dataBuffer in msg.payload as chart data\n            data: [],\n            }]\n        },\n        options: {\n        responsive: true,\n        showLine: true,\n        scales: {\n            y: {\n                title: \n                {\n                    display: true,\n                    text: 'RPM'\n                }\n            },\n            x: {\n                title: \n                {\n                    display: true,\n                    text: 'Position'\n                }\n            }\n            }\n        }\n    });\n\n    function updateChart(chart, label, newData) {\n        chart.data.datasets.forEach((dataset) => {\n            if(dataset.label == label){\n                dataset.data = newData;\n            }\n        });\n            chart.update();\n    }\n    </script>\n    <script>\n        (function(scope) {\n      scope.$watch('msg', function(msg) {\n        if (msg) {\n            //console.log(msg.payload.data);\n            updateChart(chart, \"Plot1\", msg.payload.data);\n        }\n      });\n    })(scope);\n    </script>\n</body>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 730,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "7c014f53d28beb23",
        "type": "ui_group",
        "name": "Default",
        "tab": "2fc1ffece0d082f3",
        "order": 1,
        "disp": true,
        "width": 20,
        "collapse": false,
        "className": ""
    },
    {
        "id": "2fc1ffece0d082f3",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]