2 Y-axis for a line chart

Dashboard
1

I want two y-axis. Thats my code but it is not working.

[
    {
        "id": "4d42c82f441208c2",
        "type": "inject",
        "z": "6358dcd8731b6b68",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1200",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 270,
        "y": 2120,
        "wires": [
            [
                "2a3df72899b75e5d"
            ]
        ]
    },
    {
        "id": "2a3df72899b75e5d",
        "type": "function",
        "z": "6358dcd8731b6b68",
        "name": "Abfrage der Werte",
        "func": "// Hole die Werte aus der globalen Variable\nlet leistung = global.get(\"Leistung\") || 0;\nlet temperatur = global.get(\"temperatur_Zelt\") || 0;\n\n// Konfiguriere das Diagramm mit zwei Y-Achsen\nlet ui_control = {\n    \"options\": {\n        \"scales\": {\n            \"yAxes\": [\n                {\n                    \"id\": \"y-axis-1\",\n                    \"type\": \"linear\",\n                    \"position\": \"left\",\n                    \"scaleLabel\": { \"display\": true, \"labelString\": \"Leistung (Watt)\" }\n                },\n                {\n                    \"id\": \"y-axis-2\",\n                    \"type\": \"linear\",\n                    \"position\": \"right\",\n                    \"scaleLabel\": { \"display\": true, \"labelString\": \"Temperatur (°C)\" }\n                }\n            ]\n        }\n    }\n};\n\n// Sende die Werte als einzelne Nachrichten mit zugewiesener Achse\nlet msgs = [\n    { topic: \"Leistung\", payload: leistung, ui_control, yAxisID: \"y-axis-1\" },\n    { topic: \"Temperatur\", payload: temperatur, ui_control, yAxisID: \"y-axis-2\" }\n];\n\n// Mehrere Nachrichten senden\nreturn [msgs];\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 550,
        "y": 2120,
        "wires": [
            [
                "0338ca703a132da7",
                "ffd716f710613851"
            ]
        ]
    },
    {
        "id": "0338ca703a132da7",
        "type": "ui-chart",
        "z": "6358dcd8731b6b68",
        "group": "2a8e39cac6fe4bb9",
        "name": "Leistung und Temperatur",
        "label": "Leistung und Temperatur",
        "order": 4,
        "chartType": "line",
        "category": "topic",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "",
        "xAxisPropertyType": "timestamp",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "",
        "yAxisProperty": "payload",
        "yAxisPropertyType": "msg",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "append",
        "stackSeries": false,
        "pointShape": "circle",
        "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": "",
        "interpolation": "linear",
        "x": 850,
        "y": 2120,
        "wires": [
            []
        ]
    },
    {
        "id": "ffd716f710613851",
        "type": "debug",
        "z": "6358dcd8731b6b68",
        "name": "debug 7",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 740,
        "y": 2220,
        "wires": []
    },
    {
        "id": "2a8e39cac6fe4bb9",
        "type": "ui-group",
        "name": "Microgreens Zelt",
        "page": "8e53903ac41b05c6",
        "width": "8",
        "height": "4",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "8e53903ac41b05c6",
        "type": "ui-page",
        "name": "Microgreens Zelt",
        "ui": "29b53658faf575c1",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "622486944d7f9c5e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "29b53658faf575c1",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-scheduler"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true
    },
    {
        "id": "622486944d7f9c5e",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
2

Chart node does not support that.
You can do it by making the charts with ui_template so you can provide options for scales.

scales: {
   x: {
       // x options here
   },
   y:{
       display: true,
       position: 'right'
   },
   y1:{
       display: true,
       position: 'left',                                
       grid: {
            drawOnChartArea: false 
       }
   }
}
1 Like
3

Thanks.
Thats my code so far:

[
    {
        "id": "21c8f753b3ae1f0d",
        "type": "ui-template",
        "z": "6358dcd8731b6b68",
        "group": "2a8e39cac6fe4bb9",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<canvas id=\"myChart\"></canvas>\n\n<script>\n    let ctx = document.getElementById('myChart').getContext('2d');\n    let chart;\n    let chartData = {\n        labels: [],\n        datasets: [\n            {\n                label: \"Leistung\",\n                data: [],\n                borderColor: \"blue\",\n                yAxisID: 'y-axis-1',\n                fill: false\n            },\n            {\n                label: \"Temperatur\",\n                data: [],\n                borderColor: \"red\",\n                yAxisID: 'y-axis-2',\n                fill: false\n            }\n        ]\n    };\n\n    chart = new Chart(ctx, {\n        type: 'line',\n        data: chartData,\n        options: {\n            responsive: true,\n            scales: {\n                x: { display: true, title: { display: true, text: 'Zeit' } },\n                y: {\n                    id: 'y-axis-1',\n                    position: 'left',\n                    title: { display: true, text: 'Leistung' }\n                },\n                y1: {\n                    id: 'y-axis-2',\n                    position: 'right',\n                    title: { display: true, text: 'Temperatur' },\n                    grid: { drawOnChartArea: false }\n                }\n            }\n        }\n    });\n\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            if (!msg) return;\n\n            let now = new Date().toLocaleTimeString();\n            if (chartData.labels.length > 20) {\n                chartData.labels.shift();\n                chartData.datasets[0].data.shift();\n                chartData.datasets[1].data.shift();\n            }\n            chartData.labels.push(now);\n\n            if (msg.topic === \"Leistung\") {\n                chartData.datasets[0].data.push(msg.payload);\n            } else if (msg.topic === \"Temperatur\") {\n                chartData.datasets[1].data.push(msg.payload);\n            }\n\n            chart.update();\n        });\n    })(scope);\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 820,
        "y": 2320,
        "wires": [
            []
        ]
    },
    {
        "id": "c81f9c32add94141",
        "type": "inject",
        "z": "6358dcd8731b6b68",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1200",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 310,
        "y": 2320,
        "wires": [
            [
                "e74eda6ada2cec39"
            ]
        ]
    },
    {
        "id": "e74eda6ada2cec39",
        "type": "function",
        "z": "6358dcd8731b6b68",
        "name": "Abfrage der Werte",
        "func": "// Hole die Werte aus der globalen Variable\nlet leistung = global.get(\"Leistung\") || 0;\nlet temperatur = global.get(\"temperatur_Zelt\") || 0;\n\n\n// Sende die Werte nacheinander als einzelne Nachrichten an den Chart\nlet msgs = [\n    { topic: \"Leistung\", payload: leistung },\n    { topic: \"Temperatur\", payload: temperatur },\n];\n\n// Mehrere Nachrichten senden\nreturn [msgs];",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 590,
        "y": 2320,
        "wires": [
            [
                "21c8f753b3ae1f0d",
                "33fe2274767f7ce8"
            ]
        ]
    },
    {
        "id": "33fe2274767f7ce8",
        "type": "debug",
        "z": "6358dcd8731b6b68",
        "name": "debug 7",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 2400,
        "wires": []
    },
    {
        "id": "2a8e39cac6fe4bb9",
        "type": "ui-group",
        "name": "Microgreens Zelt",
        "page": "8e53903ac41b05c6",
        "width": "8",
        "height": "4",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "8e53903ac41b05c6",
        "type": "ui-page",
        "name": "Microgreens Zelt",
        "ui": "29b53658faf575c1",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "622486944d7f9c5e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "29b53658faf575c1",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-scheduler"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true
    },
    {
        "id": "622486944d7f9c5e",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

The Problem is i get 2 random y axis on the left and there is no data point/line visible.
I checked the function if the template recivise the data, and its working.
Any ideas ?