Real-Time Data Chart with ChartJs Streaming

Dashboard
1

Hello, I'm working on dashboard's graphs, I'm trying to use ChartJs Streaming with payload (float). I have this with chart js :
ezgif.com-gif-maker (6)

And I want this but with the payload :
ezgif.com-gif-maker (1)
Is there a code or function which were already created for this ? If not could you bring help and knowledges please

2

I FIND !
Here my code !

[
    {
        "id": "ebd7eeb0e4aac142",
        "type": "tab",
        "label": "test chart js stream",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "990aa6ae2bd4ca0e",
        "type": "link in",
        "z": "ebd7eeb0e4aac142",
        "name": "",
        "links": [
            "3bfa2e543743a729"
        ],
        "x": 195,
        "y": 100,
        "wires": [
            [
                "b920fde5f7ae96be"
            ]
        ]
    },
    {
        "id": "5b059ced867507c5",
        "type": "link in",
        "z": "ebd7eeb0e4aac142",
        "name": "",
        "links": [
            "41a7afe3198738d3"
        ],
        "x": 215,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "d7228ac3c969ee58",
        "type": "ui_template",
        "z": "ebd7eeb0e4aac142",
        "group": "16bc2f799e8aba9c",
        "name": "Graphe Effondrement Electrode",
        "order": 6,
        "width": "17",
        "height": "8",
        "format": "<html>\n<body>\n<div>\n  <button type=\"button\" id=\"resetZoom\">Reset Zoom and Pan</button>\n</div>\n<div ng-bind-html=\"msg.payload\"></div>\n<canvas id=\"streamingChart\" width=\"600\" height=\"400\"></canvas>\n<script src=\"/library/chart.min.js\"></script>\n<script src=\"/library/hammer.js\"></script>\n<script src=\"/library/chartjs-plugin-zoom.min.js\"></script>\n<script src=\"/library/chartjs-adapter-date-fns.bundle.min.js\"></script>\n<script src=\"/library/chartjs-plugin-streaming.js\"></script>\n\n<script>\n// the app in question keeps the last 5 minutes' worth of data in the buffer, the following should only apply to the rendered chart\nconst config = {\n  minDuration: 5 * 1000,\n  maxDuration: 1 * 60 * 1000,\n  visible: 10 * 1000\n};\n\nconst streamingChart = new Chart($(\"#streamingChart\"), {\n  // The type of chart we want to create\n      type: 'line',\n    \n      // The data for our dataset\n      data: {\n        datasets: [{\n          label: \"dataset 1\",\n          data: []\n        }]\n      },\n    \n      // Configuration options go here\n      options: {\n        animation: {\n          duration: 0\n        },\n        hover: {\n          animationDuration: 0\n        },\n        responsiveAnimationDuration: 0,\n        elements: {\n          line: {\n            tension: 0\n          }\n        },\n        scales: {\n          xAxes: {\n            type: \"realtime\",\n            streaming: {\n              ttl: config.maxDuration,\n              duration: config.visible\n            },\n            scaleLabel: {\n              display: true,\n              labelString: \"Time\"\n            },\n            display: true,\n            time: {\n              displayFormats: {\n                millisecond: \"HH:mm:ss\",\n                second: \"HH:mm:ss\",\n                minute: \"HH:mm:ss\",\n                hour: \"HH:mm:ss\"\n              }\n            }\n          }\n        },\n        plugins: {\n          zoom: {\n            pan: {\n              enabled: true,\n              mode: 'x',\n              rangeMin: {\n                x: 0\n              },\n              rangeMax: {\n                x: config.maxDuration\n              }\n            },\n            zoom: {\n              enabled: true,\n              mode: 'x',\n              rangeMin: {\n                x: config.minDuration\n              },\n              rangeMax: {\n                x: config.maxDuration\n              }\n            }\n          }\n        }\n      }\n});\n\n$(document).ready(function() {\n  $(\"#resetZoom\").on(\"click\", function() {\n    streamingChart.resetZoom();\n  });\n  updateStreamingChartData();\n});\n\nfunction updateStreamingChartData() {\n  streamingChart.data.datasets.forEach((set) => {\n    set.data.push({\n      x: Date.now(),\n      y: bleh\n    });\n  });\n  streamingChart.update();\n  // NOTE: the device this chart is intended to stream data from actually sends a new point every 10 to 20 milliseconds, this 500ms delay is just to simplify this test...\n  setTimeout(updateStreamingChartData, 500);\n}\n\nvar theScope = scope;\nvar bleh = null;\n\n// Watch the payload and update\n(function(scope) {\n    scope.$watch('msg.payload', function(data) {\n        update(data);\n    });\n})(scope);\n\nfunction update(dta) {\n    theScope.send({payload:dta});\n    bleh = dta.data;\n    otherStuff();\n}\n\n\n</script>\n</body>\n</html>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 690,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "e5bfeff6.d88e2",
        "type": "debug",
        "z": "ebd7eeb0e4aac142",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 550,
        "y": 140,
        "wires": []
    },
    {
        "id": "b920fde5f7ae96be",
        "type": "function",
        "z": "ebd7eeb0e4aac142",
        "name": "",
        "func": "msg.payload = \n{\n    \"data\":msg.payload\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 360,
        "y": 100,
        "wires": [
            [
                "e5bfeff6.d88e2",
                "d7228ac3c969ee58"
            ]
        ]
    },
    {
        "id": "f7a1760f8251aa08",
        "type": "ui_spacer",
        "z": "ebd7eeb0e4aac142",
        "name": "spacer",
        "group": "16bc2f799e8aba9c",
        "order": 1,
        "width": 1,
        "height": 1
    },
    {
        "id": "16bc2f799e8aba9c",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "f4528104e64b1c48",
        "order": 1,
        "disp": true,
        "width": "20",
        "collapse": false,
        "className": ""
    },
    {
        "id": "f4528104e64b1c48",
        "type": "ui_tab",
        "name": "stream",
        "icon": "dashboard",
        "order": 11,
        "disabled": false,
        "hidden": false
    }
]
3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.