... JS spread operator ..
its not needed in this case. we could have simply written :
myChart.data.datasets[0].data = msg.payload.data0;
myChart.data.datasets[1].data = msg.payload.data1;
Been trying the clean example... To get "live" data into it.... Hit a snag with the labels...
If I leave the preset ['Red', 'Blue','Yellow', 'Green', ... etc, I get the first few values through then run out of x axis obviously....
Here is my last attempt... Where am I screwing it up?
[
{
"id": "d43cb77a659ba591",
"type": "function",
"z": "bb0c8939b7b482ce",
"name": "Chart Data",
"func": "frequency = msg.payload.frequency\nsigstrength = msg.payload.sigstrength\nmsg.payload = {\n label: [frequency],\n data0: [\n sigstrength\n /*12 + Math.random() * 2,\n 19 + Math.random() * 2,\n 3 + Math.random() * 2,\n 5 + Math.random() * 2,\n 7 + Math.random() * 2,\n 3 + Math.random() * 2,\n 4 + Math.random() * 2*/\n ]\n /*data1: [\n 3 + Math.random() * 2,\n 9 + Math.random() * 2,\n 3 + Math.random() * 2,\n 5 + Math.random() * 2,\n 2 + Math.random() * 2,\n 7 + Math.random() * 2,\n 3 + Math.random() * 2\n ]*/\n\n};\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 260,
"y": 350,
"wires": [
[
"39ca45f96897dcb7",
"5bdb1d64e43d7b0a"
]
]
},
{
"id": "5bdb1d64e43d7b0a",
"type": "ui_template",
"z": "bb0c8939b7b482ce",
"group": "62350f50d4b09ff8",
"name": "",
"order": 63,
"width": "24",
"height": "20",
"format": "<div id=\"{{'my_'+$id}}\" class=\"chart-container\" style=\"position: relative; height:40vh; width:50vw\">\n <canvas id=\"myChart\"></canvas>\n</div>\n\n<script>\n (function(scope) {\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar myChart = new Chart(ctx, {\n type: 'line',\n data: {\n //labels: ['Red', 'Blue','Yellow', 'Green', 'Purple', 'Orange','Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n labels: []\n datasets: [\n {\n label: 'Dataset 1',\n data: [],\n borderColor: 'red',\n backgroundColor:'red',\n fill: false\n },\n {\n label: 'Dataset 2',\n data: [],\n borderColor: 'blue',\n backgroundColor: 'blue',\n fill: false\n }\n ]\n },\n options: {\n scales: {\n y: {\n beginAtZero: true\n }\n },\n responsive: true,\n\n onClick(e) {\n const activePoints = this.getElementAtEvent(e)[0];\n var index = activePoints._index;\n var datasetIndex = activePoints._datasetIndex;\n const value = this.data.datasets[datasetIndex].data[index]\n\n scope.send({ payload: value })\n }\n },\n \n \n});\n\n// watch for msg\nscope.$watch('msg', (msg) => {\n if (msg) {\n // Do something when msg arrives\n //myChart.clear();\n myChart.data.labels.push(...msg.payload.label) // add x-axis label\n myChart.data.datasets[0].data.push(...msg.payload.data0) // add y-axis value\n //myChart.data.datasets[0].data = [...msg.payload.data0];\n //myChart.data.datasets[1].data = [...msg.payload.data1];\n myChart.update();\n }\n})\n\n\n})(scope)\n\n</script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 460,
"y": 350,
"wires": [
[
"4fed8d054d6da28e"
]
]
},
{
"id": "62350f50d4b09ff8",
"type": "ui_group",
"name": "PCR1000",
"tab": "554e77d51ad13f2d",
"order": 1,
"disp": false,
"width": 25,
"collapse": false,
"className": ""
},
{
"id": "554e77d51ad13f2d",
"type": "ui_tab",
"name": "PCR1000",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Its taken me another couple hours to get further confused....
Thanks for all the help!!
Ed
You should provide an Inject node in your Flow emulating sample data going in the "Chart Data" function
otherwise its impossible to recreate it.
Tried that... indeed, it did help me to clean up the data being spat out by the "append data" function I am using... I actually created 4 or 5 nodes, 3 of which provided sample data and the last couple allowing me to "advance the scan" to the next... It worked a treat, the current NR-Chart is nice and clean!!
Ed
I'm not much closer to getting multiple series on a single chart... But I have managed to almost get it up to scratch for a single trace. (5hrs of fun!!)
I will take a break from the bit bashing and concentrate on the visual appearance of it as a change in pace...
Here is the chart node that I have got mostly working so far...
[
{
"id": "2fae95ca738df624",
"type": "ui_template",
"z": "68e5c71acc43e814",
"g": "4a6c3d0a49f2ad93",
"group": "62350f50d4b09ff8",
"name": "S1 Chart 30 80 responsive:true",
"order": 63,
"width": 25,
"height": "11",
"format": "<div id=\"{{'my_'+$id}}\" class=\"chart-container\" \nstyle=\"position: relative; height:30vh; width:80vw\">\n <canvas id=\"myChart\"></canvas>\n</div>\n\n<script>\n (function(scope) {\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar myChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: [],\n datasets: [{\n label: \"Series1\",\n data: [],\n fill: false,\n borderColor: 'rgba(255, 206, 86, 0.2)',\n tension: 0.1\n }]\n },\n options: {\n // scales: {\n // x: {display: true,},\n // y: {display: true,type: 'logarithmic' }\n // },\n responsive: true,\n //responsive:false,\n onClick(e) {\n const activePoints = this.getElementAtEvent(e)[0];\n var index = activePoints._index;\n var datasetIndex = activePoints._datasetIndex;\n const value = this.data.labels[index]\n\n scope.send({ payload: value })\n }\n },\n\n});\n\n\n// watch for msg\nscope.$watch('msg', (msg) => {\n if (msg) {\n // Do something when msg arrives\n //scope.send({ payload: msg })\n if (msg.payload == \"clear\"){\n //scope.send({payload: \"cleared\"})\n myChart.clear();\n myChart.data.labels = []\n myChart.data.datasets[0].data = []\n return\n } \n myChart.data.labels.push(msg.payload.label) // add x-axis label\n myChart.data.datasets[0].data.push(msg.payload.data) // add y-axis value\n //console.log(myChart.data)\n myChart.update();\n \n\n }\n})\n\n\n})(scope)\n\n</script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 260,
"y": 3670,
"wires": [
[
"3482d561c742d280"
]
]
},
{
"id": "6fc71a712ebff35e",
"type": "function",
"z": "68e5c71acc43e814",
"g": "4a6c3d0a49f2ad93",
"name": "Append Chart.js Data",
"func": "freqsigctl = flow.get('freqsigctl')\nsweepenabled = flow.get('sweepenabled')\nsweepcount = flow.get('sweepcount');// Set of scan data as passed forward, max 7\nif(msg.payload == \"clear\"){return msg}\nfrequency = msg.payload.frequency;\nsigstrength = msg.payload.sigstrength;\n\nif (freqsigctl==\"auto\" && sweepenabled==0){\n //node.warn(\"1\")\n return\n}\n\nif(freqsigctl!=\"run\" && freqsigctl!=\"auto\" ){\n //node.warn(\"2\")\n return\n}\n\nif(sweepcount != 1){\n //node.warn(\"3\")\n return\n}\n\nif(msg.payload.frequency==null||msg.payload.frequency==null){\n return//No frequency data(sweepcount changed?)\n}\n\n//Have valid data and Conditions - Send to chart\nmsg.payload = {\n label: (frequency),// + ' Hz', // F x-axis\n data: (sigstrength) , // S y-axis\n}\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 470,
"y": 3630,
"wires": [
[
"0bcb6fbd5269d93d",
"2fae95ca738df624"
]
]
},
{
"id": "62350f50d4b09ff8",
"type": "ui_group",
"name": "PCR1000",
"tab": "554e77d51ad13f2d",
"order": 1,
"disp": false,
"width": 25,
"collapse": false,
"className": ""
},
{
"id": "554e77d51ad13f2d",
"type": "ui_tab",
"name": "PCR1000",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Having trouble setting width/height of the chart... I primarily want it to simply be a fixed size according to the:
as set up on its node layout... Is this possible?
hehe .. no pain no gain 
try removing height and width from
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
and add in chart options :
responsive: true,
maintainAspectRatio: false,
so it doesnt use an aspect ratio and the chart hopefully stretches to its container
i say hopefully because the Dashboard (which i dont know all its ins and outs) can have some padding between groups
Dude!!
In 30sec you just solved what I was trying to do for the last hour....!
At your sixth decade of existence, pain becomes a daily part of your life... Additional pains are not really welcomed... 
On removing the height/width parameters, it now fills the width of tiles allocated to it, but not the height allocated, only around a third or so of what's available... Is there an additional tweak that can be applied to stretch its legs a bit to use the space allocated? I did try putting the H parameter back, but that seemed to hold it to a set height regardless of how many vertical tiles used...
Oh, probably 4.99999hrs of the time earlier was trying to apply the options I saw available under chart.js .... Like setting a max and min for the y scale... Also cant get it to work... mutter mutter...
Ed
you are right .. i noticed something weird too
try adding back the style="background-color:pink; height:100%"
the pink bg-color is just there to easily identify the chart container div and where is the dashboard group / widget when using your browser's Inspector in developer tools.
to you need to set them ? i havent played around with those settings before.. doesnt the chart auto adjust the y-axis scale depending on the values received ?
Much better:
I missed the % sign and had vh .... I take it that vh and vw are more like "absolute" sizes....
As to anything weird happening, the only weird thing I noticed was that I found where to put the style bit in without breaking it half doz times first....
I would like to, yes, as a variable scale on a signal level is a bit of a pain to glance at and see quickly .... See below... Not as evident, but imagine a higher density signal area... the lower graph has a "false" noise floor... It looks like low noise, but when you look at the y scale, it starts not at 0 but at 4... The top graph is way better to judge at a glance...
I have hooked the tuner input up to the chart "click output" now... Works a treat too! (You don't know perhaps if there is an alternative to the "onclick" event... something like "drag" , to send an output as you drag the cursor, button down, across a few points, effectively streaming the point data as the cursor crosses a point...?)
Edit:
in this section:
<div id="{{'my_'+$id}}" class="chart-container"
style="background-color:pink;position: relative; width:100%; height:100%">
<canvas id="myChart"></canvas>
</div>
Is it possible to "comment out" something without removing it?
i had to experiment with those vh vw % also .. apparently the v is the viewport - the whole browser window size .. but if you use % instead its the % of the parent container ..
makes sense .. the options relating to this are documented here
scales: {
y: {
min: 10,
max: 50,
}
}
sure just wrap around the element that you want to comment out like :
<!-- <div class="chart-container" style="background-color:pink; height:100%;">
<canvas id="myChart"></canvas>
</div> -->
ps. how's those html, css, js crash courses coming along
Yeh... that was where I spent a good hour or two trying to "be positive"...
This is what I ended up with:
options: {
scales: {
x: {display: true,},
y: {display: true, type: 'linear', min: 0, max: 25 }//type: 'logarithmic'
},
and it makes no difference:
Can your eagle-eye spot the mistake? My Alsatian and white stick have gone missing again...
Edit:
...---...Rough ...---...
indeed .. seems to be a chartjs version missmatch ..
the dashboard uses an older chart library
that syntax in the docs are for latest version
try
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
responsive: true,
mainAspectRatio: false,
min: 0,
max: 30,
// step: 0.005
}
}]
},
Spot on!!
As we answer one question, the next crops up....
But I have pestered you enough for tonight/day (depending where in the world you are)...
Thanks a million for the ongoing help... Really appreciate it!!
Hi hi...
I'm still puzzling over the "multi series" on chart.js... I would like to pick your brain again at a later stage if I may...
I am going to have to take a break for a few days. things are piling up around here...
Regds
Ed
hello Ed ..
sure .. give us a nudge if you have any questions
regarding multiseries, you can study the example in my first post that defines an object that represents the data and options of one dataseries which later is .push() to the existing datasets.
The problem helping is that we dont have your source of data .. so if you can capture a few messages (before you function node) and add them as inject nodes .. that would give us something to work on.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
