I am trying the code posted in Real-Time Data Chart with ChartJs Streaming - #2 by Mathieu.
But I get following error coming from app.min.js:
and the flow is shown below,
How could I solve these errors?
and the flow is shown below,
what's in the function node?
the function just returns the message payload.
msg.payload =
{
"data":msg.payload
}
return msg;
I have not changed anything from the solution code posted in Real-Time Data Chart with ChartJs Streaming - #2 by Mathieu. I just imported it.
I have downloaded the javascripts files and put in the httpStatic folder.
<script src="/chart.min.js"></script>
<script src="/hammer.js"></script>
<script src="/chartjs-plugin-zoom.min.js"></script>
<script src="/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="/chartjs-plugin-streaming.js"></script>
Hello! Happy to see that someone found my flow ! 
could you share me your flow please ? When I posted my flow, I didn't fully understood what I did, but I get better in this so I think I can solve your issue 
hi,
the post I shared had the flow but here it is again.
[
{
"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
}
]
Okay, can you share me the data you need to show please ?
On line 116 of the ui-template node there is:
var theScope = scope;
Where is scope declared/set?
hmm, i just imported it and passed data used inject node. what is scope and where should it be declared or set?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
