Chart Node - Control x-axis time scale with slider

General
1

I want to vary the x-axis time scale of a chart with a slider.

Based on Chart Variable Timeline X-Axis - #14 by hotNipi I have a flow which does this, but it has unwanted consequences.

It changes other chart style attributes too. To start with I have

image

But operating the slider changes this to

image

I want to change the scale only, leaving the same font, orientation and format of the axis labels and grid lines.

What am I missing?

[
    {
        "id": "d99ffb2ff1e23bf4",
        "type": "ui_chart",
        "z": "0eaaad4644f22f25",
        "name": "",
        "group": "dec3c6d180355ace",
        "order": 1,
        "width": 0,
        "height": 0,
        "label": "Signal Strength (dBm)",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": "24",
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#ff9300",
            "#669c35",
            "#00c7fc",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 640,
        "y": 520,
        "wires": [
            []
        ]
    },
    {
        "id": "2f1feae6133b65fa",
        "type": "function",
        "z": "0eaaad4644f22f25",
        "name": "F: Format Chart Scale",
        "func": "var x = msg.payload * 60000 * 60;\n// var x = flow.get('chartprops').xaxis.min; //time back in milliseconds\nvar xd = new Date().getTime() - x //current time in milliseconds - desired time\ndelete msg.payload;\ndelete msg.topic;\n\n//send all modification in one go\nmsg.ui_control = {\n    options: {\n        scales: {\n            xAxes: [{\n                type: 'time',\n                time: {\n                    min: xd\n                }\n            }],\n        }\n    }\n}\nreturn msg;\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 420,
        "y": 520,
        "wires": [
            [
                "d99ffb2ff1e23bf4",
                "f3fe12987c943718"
            ]
        ]
    },
    {
        "id": "b32b7096b285e6a9",
        "type": "ui_slider",
        "z": "0eaaad4644f22f25",
        "name": "",
        "label": "Slider: Hours",
        "tooltip": "",
        "group": "dec3c6d180355ace",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": true,
        "outs": "end",
        "topic": "payload",
        "topicType": "msg",
        "min": "1",
        "max": "24",
        "step": "0.5",
        "className": "",
        "x": 210,
        "y": 520,
        "wires": [
            [
                "2f1feae6133b65fa"
            ]
        ]
    },
    {
        "id": "dec3c6d180355ace",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "f3b09f6959de3b58",
        "order": 1,
        "disp": false,
        "width": "18",
        "collapse": false,
        "className": ""
    },
    {
        "id": "f3b09f6959de3b58",
        "type": "ui_tab",
        "name": "Signal Strength",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
1 Like
2

Is xAxes correct or should that be xAxis?

3

I believe that Axes is correct. Checked on Github.

The slider works functionally, it's just that the font colour, scale text format, gridlines are changed, whereas I want them to remain as per the default chart (in the first screenshot)

4

As explained in example all scale related configuration will be lost and you'll need to configure all what you need. There is many examples shared where you can find different ways how to do it. Also you can find chartjs documentation from web. Must admit it is a bit hard to read but still very helpful.

5

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