Need Advice For Reset Button Chart And Speed Chart

Hallo All,

I've create an dynagraph chart. But sometimes when I need to reset the chart, it's not working. Maybe someone can give me advises for this problem.

Another question is, how to adjust the chart in to maximum value of X.

Here is my code:

[
    {
        "id": "79e3f109.0eb59",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "e70a8a42.1241b8",
        "type": "function",
        "z": "79e3f109.0eb59",
        "name": "chart HPU",
        "func": "context.data = context.data || {};\nvar chartdata = context.get(\"chartdata\") || [];\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment);\n context.set(\"chartdata\",[]);\n msg.payload = [];\n return msg;\n}\nswitch (msg.topic) {\n    case \"stroke\":\n        context.data.stroke = msg.payload;\n        break;\n         case \"load\":\n        context.data.load = msg.payload;\n      break;\n}\n\nvar xnew = context.data.stroke;\n//node.warn(xnew);\nvar ynew = context.data.load;\n\nvar ob = {x:xnew, y:ynew};\n// collect datapoints\nchartdata.push(ob);\n\n// limit data collection length\n\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\n//////////////////////////////////////////////////////////////////////////////////\n// reset button has topic 'reset'. clear all data\n\nmsg.payload = [{\n\"series\": [\"A\"],\n\"xAxisID\": 'custom-x-axis',\n\"yAxisID\": 'custom-y-axis',\n\"data\": [chartdata],\n\"labels\": [],\n\"align\": 'center'\n}];\n\nmsg.ui_control = {\n    options: {\n                elements: {\n            line: {\n                borderWidth: 3,\n                fill:false,\n                //lineTension:5,\n                spanGaps:true,\n                // default = 3\n            },\n            point:{\n                radius:1,\n              pointStyle:'circle'  \n            }\n        },\n        legend: {\n            display: false\n        },\n       scales: {\n           \n            xAxes: [{\n                gridLines: {\n                display:true},\n                type: 'linear',\n                id: 'custom-x-axis',\n                position:'bottom',\n                ticks: {display : true,\n                  //  fontColor:\"#ccc\",\n                 max: 120,\n                  min :0,\n                   // autoSkip: true,\n                    \n                  //  min: -5,\n               //   stepSize: 20\n                }\n            }],\n            yAxes: [{\n                gridLines: {\n                display:true},\n                id: 'custom-y-axis',\n                ticks: {display : true,\n                   max: 10000,\n                  min: 0,\n                  //  fontColor:\"#ccc\",\n                   \n                }\n            }]\n       }\n    }\n};\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 760,
        "y": 240,
        "wires": [
            [
                "4ac7af2.2b94cd"
            ]
        ]
    },
    {
        "id": "a2dac6ae.0939a8",
        "type": "function",
        "z": "79e3f109.0eb59",
        "name": "stroke length & SPM",
        "func": "var max = 120;//STROKE LENGTH\nvar min = 0;\nvar x = 2;\nvar step = 1;\n\nsetInterval(function() {\n    if(flow.get(\"run\") === false) {\n        return null;\n    }\n\nnode.send(msg);\nmsg.payload = x;\n  x += step;\n  \n  if (x ===max || x===min ) {\n    step=-step;\n  }\n}, 120);\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 370,
        "y": 472,
        "wires": [
            [
                "ad8faed3.cb763",
                "f88480ea.a457e"
            ]
        ]
    },
    {
        "id": "df040012.96e478",
        "type": "inject",
        "z": "79e3f109.0eb59",
        "name": "",
        "props": [
            {
                "p": "payload",
                "v": "true",
                "vt": "bool"
            },
            {
                "p": "topic",
                "v": "",
                "vt": "string"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 130,
        "y": 300,
        "wires": [
            [
                "df4a523.b651bb"
            ]
        ]
    },
    {
        "id": "f3584599.1f0c38",
        "type": "inject",
        "z": "79e3f109.0eb59",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "false",
        "payloadType": "bool",
        "x": 130,
        "y": 360,
        "wires": [
            [
                "df4a523.b651bb"
            ]
        ]
    },
    {
        "id": "df4a523.b651bb",
        "type": "change",
        "z": "79e3f109.0eb59",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "run",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 310,
        "y": 320,
        "wires": [
            [
                "a2dac6ae.0939a8"
            ]
        ]
    },
    {
        "id": "2bc169c5.dcaac6",
        "type": "function",
        "z": "79e3f109.0eb59",
        "name": "",
        "func": "rnd = Math.round (Math.random()*10000)\nmsg.payload = rnd;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 430,
        "y": 180,
        "wires": [
            [
                "3e58701d.a6d868"
            ]
        ]
    },
    {
        "id": "4ac7af2.2b94cd",
        "type": "ui_chart",
        "z": "79e3f109.0eb59",
        "name": "",
        "group": "7f2e699e.5a9b58",
        "order": 5,
        "width": 0,
        "height": 0,
        "label": "Dynagraph",
        "chartType": "line",
        "legend": "false",
        "xformat": "mm",
        "interpolate": "linear",
        "nodata": "",
        "dot": true,
        "ymin": "0",
        "ymax": "10000",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "useOldStyle": false,
        "outputs": 1,
        "x": 1050,
        "y": 240,
        "wires": [
            [
                "dbddc489.a6c54"
            ]
        ]
    },
    {
        "id": "dbddc489.a6c54",
        "type": "debug",
        "z": "79e3f109.0eb59",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 1210,
        "y": 240,
        "wires": []
    },
    {
        "id": "5dbc08f8.10222",
        "type": "debug",
        "z": "79e3f109.0eb59",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "x": 950,
        "y": 340,
        "wires": []
    },
    {
        "id": "3e58701d.a6d868",
        "type": "change",
        "z": "79e3f109.0eb59",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "load",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 590,
        "y": 200,
        "wires": [
            [
                "e70a8a42.1241b8",
                "e1da766f.60fcb"
            ]
        ]
    },
    {
        "id": "e1da766f.60fcb",
        "type": "debug",
        "z": "79e3f109.0eb59",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 770,
        "y": 180,
        "wires": []
    },
    {
        "id": "ad8faed3.cb763",
        "type": "change",
        "z": "79e3f109.0eb59",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "stroke",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 630,
        "y": 320,
        "wires": [
            [
                "e70a8a42.1241b8",
                "5dbc08f8.10222"
            ]
        ]
    },
    {
        "id": "f88480ea.a457e",
        "type": "switch",
        "z": "79e3f109.0eb59",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 607,
        "y": 486,
        "wires": [
            [
                "b395fa1f.7919d"
            ]
        ]
    },
    {
        "id": "b395fa1f.7919d",
        "type": "change",
        "z": "79e3f109.0eb59",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "[ ]",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 791,
        "y": 489,
        "wires": [
            [
                "e70a8a42.1241b8"
            ]
        ]
    },
    {
        "id": "46c6dbd0.aae864",
        "type": "inject",
        "z": "79e3f109.0eb59",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "reset",
        "payload": "[]",
        "payloadType": "json",
        "x": 610,
        "y": 80,
        "wires": [
            [
                "e70a8a42.1241b8"
            ]
        ]
    },
    {
        "id": "5f3f01c8.b2f86",
        "type": "ui_slider",
        "z": "79e3f109.0eb59",
        "name": "",
        "label": "Simulation Weight",
        "tooltip": "",
        "group": "7f2e699e.5a9b58",
        "order": 6,
        "width": "6",
        "height": "1",
        "passthru": true,
        "outs": "all",
        "topic": "",
        "min": 0,
        "max": "10000",
        "step": 1,
        "x": 235.5,
        "y": 153,
        "wires": [
            [
                "3e58701d.a6d868",
                "953b6eeb.1bf61"
            ]
        ]
    },
    {
        "id": "65f18478.74811c",
        "type": "ui_button",
        "z": "79e3f109.0eb59",
        "name": "",
        "group": "7f2e699e.5a9b58",
        "order": 1,
        "width": "4",
        "height": "1",
        "passthru": false,
        "label": "SCAN",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "true",
        "payloadType": "bool",
        "topic": "",
        "x": 111.5,
        "y": 210,
        "wires": [
            [
                "df4a523.b651bb"
            ]
        ]
    },
    {
        "id": "ed33b58a.3d786",
        "type": "ui_button",
        "z": "79e3f109.0eb59",
        "name": "",
        "group": "7f2e699e.5a9b58",
        "order": 3,
        "width": "4",
        "height": "1",
        "passthru": false,
        "label": "Reset",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "[]",
        "payloadType": "json",
        "topic": "",
        "x": 443.5,
        "y": 120,
        "wires": [
            [
                "e70a8a42.1241b8"
            ]
        ]
    },
    {
        "id": "d555fcd6.eb7ef",
        "type": "ui_button",
        "z": "79e3f109.0eb59",
        "name": "",
        "group": "7f2e699e.5a9b58",
        "order": 2,
        "width": "4",
        "height": "1",
        "passthru": false,
        "label": "STOP",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "false",
        "payloadType": "bool",
        "topic": "",
        "x": 139,
        "y": 439,
        "wires": [
            [
                "df4a523.b651bb"
            ]
        ]
    },
    {
        "id": "953b6eeb.1bf61",
        "type": "ui_text",
        "z": "79e3f109.0eb59",
        "group": "7f2e699e.5a9b58",
        "order": 4,
        "width": "4",
        "height": "1",
        "name": "",
        "label": "Weight",
        "format": "{{msg.payload}} Kg",
        "layout": "row-spread",
        "x": 347.5,
        "y": 254,
        "wires": []
    },
    {
        "id": "7f2e699e.5a9b58",
        "type": "ui_group",
        "z": "",
        "name": "TEST GRAPH",
        "tab": "82374659.722fc8",
        "order": 1,
        "disp": true,
        "width": "20",
        "collapse": false
    },
    {
        "id": "82374659.722fc8",
        "type": "ui_tab",
        "z": "",
        "name": "TEST DYNAGRAPH",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

This is example a dynagraph from pictures:

Thank you for any advices

Usually to clear the chart send json payload message that is an empty array. Works pretty consistently for me.

[{"id":"59d43ad2.c7ca34","type":"inject","z":"6b41d747.90d1e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1.0","payloadType":"num","x":510,"y":180,"wires":[["fe05f219.cc09a"]]},{"id":"97cb8678.c4a9f8","type":"inject","z":"6b41d747.90d1e8","name":"None","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":510,"y":220,"wires":[["fe05f219.cc09a"]]},{"id":"fe05f219.cc09a","type":"ui_chart","z":"6b41d747.90d1e8","name":"Test","group":"7e974cda.91ae54","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"Test!","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"],"useOldStyle":false,"outputs":1,"x":650,"y":200,"wires":[[]]},{"id":"7e974cda.91ae54","type":"ui_group","z":"","name":"Test","tab":"a4b142e4.df1bf","order":1,"disp":true,"width":"6","collapse":false},{"id":"a4b142e4.df1bf","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

Hi Nodi,
Your method is same with me. But in my node, it's not working.

Add a debug node showing what is going into the chart and make sure you are sending the empty array.

Your reset button does not have the topic set, so the function doesn't do what you want.