Chart on dashboard 2 with multiline: the first 2 point are connected only for the first line

[ghedolo]

I send multiple msg to chart using a function
the function is

const v=msg.payload.split(',')
let gpc = []

let x=context.get('x')
x=x===undefined?1:++x
context.set('x',x)

for (let i = 1; i < 9; i++) {
    const val = i*4 + v[i+5]
    gpc.push({ topic: "t" + i, payload: {x:x, v:val} })
}
return [gpc]

the message sent to the chat are :

{"topic":"t1","payload":{"x":2,"v":6},"_msgid":"2279f52ad5738a66"}

{"topic":"t2","payload":{"x":2,"v":10},"_msgid":"2279f52ad5738a66"}

{"topic":"t1","payload":{"x":3,"v":6},"_msgid":"b59dd85692696016"}

{"topic":"t2","payload":{"x":3,"v":10},"_msgid":"b59dd85692696016"}

I got this

any ideas?

[Trying_to_learn]

Hi and welcome.

Slight suggestion.

When pasting code, please format it correctly.
Click the button in the top that looks like </>

type or paste code here

Then put the code where it says.

It is better as the second like in your code is corrupted
let gpc = (square box)

So something is going on there.

[ghedolo]

Thank's a a lot for the hints

the code is

const v=msg.payload.split(',')
let gpc = []

let x=context.get('x')
x=x===undefined?1:++x
context.set('x',x)

for (let i = 1; i < 9; i++) {
    const val = i*4 +v[i+5]
    gpc.push({ topic: "t" + i, payload: {x:x, v:val} })
}
return [gpc]

the message get form mqtt serv are like
"0,0,8,0,0,0,2,2,2,2,2,2,2,2"

the chart conf:

[E1cid]

HI there seems to be a few bugs i have notice here.
I think you should check the nodes github page and check to see if issues have been raised, if not raise them.

First - The point is plotted but no line drawn after any topic after first. As you have highlighted

Second - When you hover over a y axis point not all topic points that correspond to that point ar shown. You have to move mouse over each individually, This maybe by design, but for a line chart I think all corresponding topics should be shown

Third - There appears to be no msg or string type input on y property input, this maybe a browser issue, is anyone else seeing this (chrome android).

Tagging @joepavitt
reported

Missing type input in chart property field

Multi line chart does not draw line for first point on additional topics

feature request

All hover to show all topics in x property value when hovering

[ghedolo]

Thank youu @E1cid !

[E1cid]

No problem.
Just to add you can send the chart an array of objects in one message rather than multiple.

This example also contains a workaround till issue is fixed
e.g.

[{"id":"98571d07252f3e61","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"0,0,8,0,0,0,2,2,2,2,2,2,2,2\",\"0,0,8,0,0,0,2,2,2,2,2,2,2,2\",\"0,0,8,0,0,0,2,2,2,2,2,2,2,2\",\"0,0,8,0,0,0,2,2,2,2,2,2,2,2\"]","payloadType":"json","x":130,"y":100,"wires":[["3ae1dd08967d2334"]]},{"id":"3ae1dd08967d2334","type":"split","z":"d1395164b4eec73e","name":"simulate mqtt","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":280,"y":100,"wires":[["59965e5b7592fb31"]]},{"id":"59965e5b7592fb31","type":"function","z":"d1395164b4eec73e","name":"function 157","func":"\nconst v=msg.payload.split(',')\nlet gpc = []\n\nlet x = context.get('x') ?? 0\nx++\ncontext.set('x',x)\n\nfor (let i = 1; i < 9; i++) {\n    const val = i*4 +v[i+5]\n    gpc.push({x:x, v:val, series: \"t\" + i} )\n}\nmsg.payload = gpc\n\nif(x===1){\n    let null_array = []\n    for (let i = 1; i < 9; i++) {\n        const val = i * 4 + v[i + 5]\n        null_array.push({ x: x, v: null, series: \"t\" + i })\n    }\n    node.send({payload:null_array})\n}\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":470,"y":160,"wires":[["f11b0e84da884431","c7b8e797bf25ce1e"]]},{"id":"f11b0e84da884431","type":"debug","z":"d1395164b4eec73e","name":"debug 2565","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":100,"wires":[]},{"id":"c7b8e797bf25ce1e","type":"ui-chart","z":"d1395164b4eec73e","group":"ff7cbf009b7b3034","name":"","label":"chart","order":5,"chartType":"line","category":"series","categoryType":"property","xAxisLabel":"","xAxisProperty":"x","xAxisPropertyType":"property","xAxisType":"linear","xAxisFormat":"s","xAxisFormatType":"custom","yAxisLabel":"","yAxisProperty":"v","ymin":"","ymax":"","action":"append","stackSeries":false,"pointShape":"false","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":570,"y":240,"wires":[[]]},{"id":"dac39029fdd65c11","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"action","v":"replace","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":290,"y":260,"wires":[["c7b8e797bf25ce1e"]]},{"id":"ff7cbf009b7b3034","type":"ui-group","name":"Form","page":"3bceecc44f91d26b","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"3bceecc44f91d26b","type":"ui-page","name":"Custom Form Submission","ui":"1805777f90e92057","path":"/form-submission","icon":"home","layout":"grid","theme":"35ee7753b5b3599b","order":1,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"35ee7753b5b3599b","type":"ui-theme","name":"Theme Name","colors":{"surface":"#16234b","primary":"#1d44b9","bgPage":"#ecf2f8","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

msg.payload

    {
        "x": 10,
        "v": "42",
        "series": "t1"
    },
    {
        "x": 10,
        "v": "82",
        "series": "t2"
    },
    {
        "x": 10,
        "v": "122",
        "series": "t3"
    },
    {
        "x": 10,
        "v": "162",
        "series": "t4"
    },
    {
        "x": 10,
        "v": "202",
        "series": "t5"
    },
    {
        "x": 10,
        "v": "242",
        "series": "t6"
    },
    {
        "x": 10,
        "v": "282",
        "series": "t7"
    },
    {
        "x": 10,
        "v": "322",
        "series": "t8"
    }
]

Function

const v=msg.payload.split(',')
let gpc = []

let x = context.get('x') ?? 0
x++
context.set('x',x)

for (let i = 1; i < 9; i++) {
    const val = i*4 +v[i+5]
    gpc.push({x:x, v:val, series: "t" + i} )
}
msg.payload = gpc

if(x===1){
    let null_array = []
    for (let i = 1; i < 9; i++) {
        const val = i * 4 + v[i + 5]
        null_array.push({ x: x, v: null, series: "t" + i })
    }
    node.send({payload:null_array})
}
return msg

[ghedolo]

Thank U a lot!

[ghedolo]

It works fine!
Jus add a cls/reset

const t=msg.topic

if (t === 'cls') {
    context.set('x', 0); 
    return null
    }

const v = msg.payload.split(',')
let gpc = []

let x = context.get('x') ?? 0
x++
context.set('x', x)

for (let i = 1; i < 9; i++) {
    const val = i*4 +1.0*v[i+5]
    gpc.push({ x: x, v: val, series: "t" + i })
}
msg.payload = gpc

if (x === 1) {
    let null_array = []
    for (let i = 1; i < 9; i++) {
        const val = i * 4 + 1.0*v[i + 5]
        null_array.push({ x: x, v: null, series: "t" + i })
    }
    node.send({ payload: null_array })
}
return msg

[
    {
        "id": "59965e5b7592fb31",
        "type": "function",
        "z": "c0791a4b1d1825e1",
        "name": ".",
        "func": "const t=msg.topic\n\nif (t === 'cls') {\n    context.set('x', 0); \n    return null\n    }\n\nconst v = msg.payload.split(',')\nlet gpc = []\n\nlet x = context.get('x') ?? 0\nx++\ncontext.set('x', x)\n\nfor (let i = 1; i < 9; i++) {\n    const val = i*4 +1.0*v[i+5]\n    gpc.push({ x: x, v: val, series: \"t\" + i })\n}\nmsg.payload = gpc\n\nif (x === 1) {\n    let null_array = []\n    for (let i = 1; i < 9; i++) {\n        const val = i * 4 + v[i + 5]\n        null_array.push({ x: x, v: null, series: \"t\" + i })\n    }\n    node.send({ payload: null_array })\n}\nreturn msg",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 430,
        "y": 300,
        "wires": [
            [
                "c7b8e797bf25ce1e"
            ]
        ]
    },
    {
        "id": "c7b8e797bf25ce1e",
        "type": "ui-chart",
        "z": "c0791a4b1d1825e1",
        "group": "2b122ee2150554cb",
        "name": "WO",
        "label": "chart",
        "order": 5,
        "chartType": "line",
        "category": "series",
        "categoryType": "property",
        "xAxisLabel": "",
        "xAxisProperty": "x",
        "xAxisPropertyType": "property",
        "xAxisType": "linear",
        "xAxisFormat": "s",
        "xAxisFormatType": "custom",
        "yAxisLabel": "",
        "yAxisProperty": "v",
        "ymin": "",
        "ymax": "",
        "action": "append",
        "stackSeries": false,
        "pointShape": "false",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": "22",
        "height": "7",
        "className": "",
        "x": 590,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "dac39029fdd65c11",
        "type": "inject",
        "z": "c0791a4b1d1825e1",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "action",
                "v": "replace",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 130,
        "y": 340,
        "wires": [
            [
                "2988c92b9989cebe"
            ]
        ]
    },
    {
        "id": "32bd46a4d0312454",
        "type": "mqtt in",
        "z": "c0791a4b1d1825e1",
        "name": "",
        "topic": "lenovo/17",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "6887952d93610996",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 240,
        "y": 260,
        "wires": [
            [
                "59965e5b7592fb31"
            ]
        ]
    },
    {
        "id": "2988c92b9989cebe",
        "type": "ui-button",
        "z": "c0791a4b1d1825e1",
        "group": "2b122ee2150554cb",
        "name": "CLS",
        "label": "button",
        "order": 1,
        "width": 0,
        "height": 0,
        "emulateClick": true,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "[]",
        "payloadType": "json",
        "topic": "cls",
        "topicType": "str",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 250,
        "y": 340,
        "wires": [
            [
                "59965e5b7592fb31",
                "c7b8e797bf25ce1e"
            ]
        ]
    },
    {
        "id": "2b122ee2150554cb",
        "type": "ui-group",
        "name": "Lenovo",
        "page": "ed0c097b7d2f4e94",
        "width": "22",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "6887952d93610996",
        "type": "mqtt-broker",
        "name": "tfqm",
        "broker": "172.27.1.100",
        "port": "8883",
        "tls": "",
        "clientid": "",
        "autoConnect": true,
        "usetls": true,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "autoUnsubscribe": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "ed0c097b7d2f4e94",
        "type": "ui-page",
        "name": "L2",
        "ui": "0b41aa48339b29b0",
        "path": "/page4",
        "icon": "home",
        "layout": "grid",
        "theme": "eeb23137d2f23736",
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "0b41aa48339b29b0",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "eeb23137d2f23736",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]