# Binary Buffer to Graph

**URL:** <https://discourse.nodered.org/t/binary-buffer-to-graph/40620>\
**Category:** Dashboard\
**Created:** [8 February 2021 16:18 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620 "2021-02-08T16:18:20Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 16:18 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/1 "2021-02-08T16:18:21Z")

</div>

Hi all,  
I have a binary buffer that comes from a a serial port and looks like this:  
buffer[15]  
0: 0x0  
1: 0x10  
2: 0x22  
3: 0x33  
4: 0x44  
5: 0x55  
6: 0x66  
7: 0x77  
8: 0x88  
9: 0x99  
10: 0xa0  
11: 0xb1  
12: 0xc2  
13: 0xd3  
14: 0xff

I need to feed it to a dashboard graph node. I tried reading it as buffer ( m2.data [Buffer.from(msg.payload)]😉 and then writing it in an array in a for loop but the graph won't accept it.  
Anyone has done something similar?  
Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 February 2021 16:34 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/2 "2021-02-08T16:34:15Z")

</div>

This describes the format you need in msg.payload to pre-fill a chart. Look at the section Stored Data. [node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 16:38 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/3 "2021-02-08T16:38:02Z")

</div>

Hi Colin, thanks.  
I already tried the kine chart and can get an array plotted. For example if I pass this one it works fine.  
m2.data = [  
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]  
];

My problem is that the value I should get into m2.data from the serial port are in a buffer and I can't get them in a format like the one above to pass to the graph.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 February 2021 17:01 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/4 "2021-02-08T17:01:06Z")

</div>

> [@podi62](#):
>
> I already tried the kine chart

What is a kine chart?

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 17:13 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/5 "2021-02-08T17:13:41Z")

</div>

typo ... line chart. Or I should have said just chart.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 February 2021 17:49 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/6 "2021-02-08T17:49:11Z")

</div>

Show us what you are sending to the chart for the one that works.

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 18:00 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/7 "2021-02-08T18:00:41Z")

</div>

Here what works.  
This is just test data.

m2.labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];  
m2.series = [1];  
m2.data = [  
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]  
];

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 February 2021 18:15 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/8 "2021-02-08T18:15:11Z")

</div>

That isn't what you are giving to the chart, that is is some code from a function node, presumably you then manipulate that into the form required by the chart.  
Feed your incoming data into a debug node and show us what it gives.

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 18:17 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/9 "2021-02-08T18:17:50Z")

</div>

This is the output of debug node attached to the serial input:  
buffer[15]  
0: 0x0  
1: 0x10  
2: 0x22  
3: 0x33  
4: 0x44  
5: 0x55  
6: 0x66  
7: 0x77  
8: 0x88  
9: 0x99  
10: 0xa0  
11: 0xb1  
12: 0xc2  
13: 0xd3  
14: 0xff

I need to transform this in an array of integers to feed to the graph node as the example I've used to test it.

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 18:21 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/10 "2021-02-08T18:21:11Z")

</div>

This is my function:  
var m2={};

//var dd = String (msg.payload);  
m2.labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];  
m2.series = [1];  
//test data  
[//m2.data](https://m2.data) = [  
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]  
];

var j;  
for (j=0;j \< msg.payload.length;j++) {  
[//m2.data](https://m2.data) [0][j]= dd.charCodeAt(j) ; // [m2[j]];  
m2.data [0][j]= msg.payload[j] ;  
}  
return {payload:[m2]};

and this is the output if this function and the graph doesn't like it.

 ![Screenshot 2021-02-08 at 19.20.24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/674d76d4e8b9e4ff8bd6c56bfafcbc100161a96e.jpeg)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 February 2021 19:03 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/11 "2021-02-08T19:03:32Z")

</div>

your function (with the hardcoded data) works for me...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c53e4366db069376125ca866b2ad6df101f74811.png)

```auto
[{"id":"f3242d57.06f4f","type":"ui_chart","z":"553814a2.1248ec","name":"","group":"dce9e7a2.d20c78","order":5,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","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,"x":1550,"y":580,"wires":[[]]},{"id":"20e90dd8.d49882","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":1240,"y":580,"wires":[["67feff68.ff6d"]]},{"id":"67feff68.ff6d","type":"function","z":"553814a2.1248ec","name":"","func":"var m2 = {};\n\n//var dd = String (msg.payload);\nm2.labels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64];\nm2.series = [1];\n//test data\nm2.data = [\n[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]\n];\n\nvar j;\nfor (j = 0; j < msg.payload.length; j++) {\n //m2.data [0][j]= dd.charCodeAt(j) ; // [m2[j]];\n m2.data[0][j] = msg.payload[j];\n}\nreturn { payload: [m2] };\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1400,"y":580,"wires":[["f3242d57.06f4f"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"7","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

can you expand the data[0][...] array = is it filled with numeric values like this...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4ef84058aed31489af59cc2a92a6abb8ac9cb553.png)

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 19:11 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/12 "2021-02-08T19:11:11Z")

</div>

Hi Steve, yes correct. With the hard coded data it works. It doesn't with the binary payloads I get from the serial port. The array[64] expanded looks like this:  
[0 … 9]  
0: 0x44  
1: 0x55  
2: 0x66  
3: 0x1  
4: 0x22  
5: 0x33  
6: 0x44  
7: 0x55  
8: 0x66  
9: 0x77

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 February 2021 19:13 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/13 "2021-02-08T19:13:32Z")

</div>

can you do 2 things please...

1. paste a screenshot of the debug (expanded so we can see data values in the array)
2. put a debug BEFORE the function and then use the copy button (that appears when you hover over the payload) & paste that into a reply (please use the code formatting button `</>` then paste between the backticks to preserve code formatting).

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 February 2021 19:16 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/14 "2021-02-08T19:16:01Z")

</div>

Also show us what is coming out of the function node

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 19:38 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/15 "2021-02-08T19:38:31Z")

</div>

```auto
[68,85,102,1,34,51,68,85,102,119,136,153,160,177,194,211,1,34,51,68,85,102,119,136,153,160,177,194,211,1,34,51,68,85,102,119,136,153,160,177,194,211,51,51,51,51,51,51,51,51,1,34,51,68,85,102,119,136,153,160,177,194,211,255]

```

This is the input to the function. The buffer that is coming from my serial node

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 19:39 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/16 "2021-02-08T19:39:01Z")

</div>

![Screenshot 2021-02-08 at 20.36.46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e24c1c891976e4ad3749be9ff2aef6eef93fb535.jpeg)  
This sis the output of the function

---

<div class="post-metadata">

**Author:** ![podi62](https://avatars.discourse-cdn.com/v4/letter/p/ea5d25/32.png) [@podi62](https://discourse.nodered.org/u/podi62)\
**Post date:** [8 February 2021 19:45 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/17 "2021-02-08T19:45:35Z")

</div>

It looks like this is working. Initially I didn't see the graph updating but now it's working.  
The following function seems to work properly to decode the binary input from the serial port and send it the the graph node.  
Thanks for all your help  
var m2={};

//var dd = String (msg.payload);  
m2.labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];  
m2.series = [1];  
m2.data = [  
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]  
];

var j;  
for (j=0;j \< msg.payload.length;j++) {  
[//m2.data](https://m2.data) [0][j]= dd.charCodeAt(j) ; // [m2[j]];  
m2.data [0][j]= msg.payload[j] ;  
}  
return {payload:[m2]};

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 February 2021 19:46 UTC](https://discourse.nodered.org/t/binary-buffer-to-graph/40620/18 "2021-02-22T19:46:05Z")

</div>

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