[SOLVED] Combine chart lines and images

Hi,

I am working on a weather forcast chart (see below)
and my question is: does anyone know how to combine chart lines and images?

... like the icons on top of this temperature line ...


(found: http://www.meteoxativa.es/)

The base is this chart from @hotNipi, the weather data comes from OpenWeatherMap and the weather icons from Paul Reed.

[{"id":"a24ec06e.62ad9","type":"tab","label":"Vorhersage","disabled":false,"info":""},{"id":"d5948620.7414f8","type":"ui_template","z":"a24ec06e.62ad9","group":"109b0b40.54c0b5","name":"Table","order":3,"width":"13","height":"1","format":"<style>\n/* Need a transposed table:  Headings on left, data horizontally to the right.  However, if the table has a caption, we need it to remain above the entire table.  Do this by creating a grid for the caption, head, and body.  Then within the head and body, use flex-box to orientate the cells.\n*/\n\n/* IE-10/11 Grid */\n.vertical {\n  display: -ms-grid;\n  -ms-grid-rows: auto auto;\n  -ms-grid-columns: auto auto;\n}\n.vertical thead {\n  -ms-grid-row: 2;\n  -ms-grid-column: 1;\n}\n.vertical tbody {\n  -ms-grid-row: 2;\n  -ms-grid-column: 2;\n}\n.vertical caption {\n  -ms-grid-row: 1;\n  -ms-grid-column: 1;\n  -ms-grid-column-span: 2;\n}\n\n/* Everyone Else's Grid */\n@supports (display: grid) {\n   .vertical {\n     display: grid;\n     grid-template-columns: min-content min-content;\n     grid-template-rows: auto auto;\n     grid-template-areas:\n       \"caption caption\"\n       \"head body\";\n   }\n   .vertical thead {\n     grid-area: head;\n   }\n   .vertical tbody {\n     grid-area: body;\n   }\n   .vertical caption {\n     grid-area: caption; \n   }\n}\n\n/* Flex - Cross Browser CSS */\n.vertical thead {\n  display: flex;\n  flex-shrink: 0;\n  min-width: min-content;\n}\n.vertical tbody {\n    display: flex;\n}\n.vertical tr {\n  display: flex;\n  flex-direction: column;\n  min-width: min-content;\n  flex-shrink: 0;\n}\n.vertical td, .vertical th {\n  display: block;\n}\n.vertical caption {\n  display: block;\n}\n\n/* Visual styling */\ntable { border-collapse: collapse; }\ntable td {\n  border: 0px solid black; \n   text-align:center;\n   width: 39px;\n}\ntable th {\n  border: 0px solid black;\n  background-color: grey;\n  color: white;\n}\n</style>\n\n\n<table id=\"table\" border=\"0\"  class=\"vertical\">\n <tbody>\n <tr ng-repeat=\"row in msg.payload.icons\">\n    <td><i class=\"{{row.forecast}}\"></i></td>\n </tr>\n </tbody>\n</table>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":180,"wires":[[]]},{"id":"681b4548.6f136c","type":"ui_template","z":"a24ec06e.62ad9","group":"109b0b40.54c0b5","name":"Line Chart","order":4,"width":"14","height":"6","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1170,"y":300,"wires":[[]]},{"id":"b2151ac9.de1728","type":"function","z":"a24ec06e.62ad9","name":"create data","func":"\nconst days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];\nconst now = Date.now(); \n\nvar temperatures = [];\nvar precipitations = [];\nvar windSpeeds = [];\nvar lables = [];\nvar icons = [];\n\nvar lastDay = -1;\nfor (const item of msg.payload) \n{\n    const itemTimestamp = item.dt * 1000;\n    \n    // only measurements in the future\n    //if (itemTimestamp >= now) // NO FOR THE EXAMPLE DATA\n    {\n        // temperature\n        const temperature = item.main.temp;\n        temperatures.push({\"x\":itemTimestamp, \"y\":temperature});\n        // precipitation        \n        var precipitation = 0;\n        if (typeof item.rain !== \"undefined\") \n        {        \n            precipitation = item.rain['3h'];\n        }\n        precipitations.push(precipitation);\n        // windSpeed\n        const windSpeed = item.wind.speed;\n        windSpeeds.push(windSpeed);\n        \n        // label\n        const itemDate = new Date(itemTimestamp);\n        var timeString = '';\n        if (itemDate.getDay() !== lastDay)\n        {\n            timeString += days[itemDate.getDay()] + ', ';\n            lastDay = itemDate.getDay();\n        }\n        timeString += itemDate.getHours() + ' Uhr';\n        lables.push(timeString);\n        \n        // icon\n        const forecast = 'wi wi-owm-' + item.weather[0].icon + ' wi-2x';\n\n        const icon = {'forecast':forecast};\n        icons.push(icon);\n    }\n    \n    // 48 hours forecast, measurements every 3 hours\n    if (temperatures.length >= 48/3)\n    {\n        break;\n    }\n}\n\nmsg = {};\nmsg.payload = {};\nmsg.payload.temperature = JSON.stringify(temperatures);\nmsg.payload.precipitation = JSON.stringify(precipitations);\nmsg.payload.windSpeed = JSON.stringify(windSpeeds);\nmsg.payload.labels = JSON.stringify(lables);\nmsg.payload.icons = icons;\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":790,"y":300,"wires":[["22b1f9f2.5ce4a6","d5948620.7414f8"]]},{"id":"22b1f9f2.5ce4a6","type":"template","z":"a24ec06e.62ad9","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =250></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#00A2E8']\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx, {\n    // The type of chart we want to create\n    type: 'bar',\n\n    // The data for our dataset\n    data: {\n        labels: {{{payload.labels}}},\n        datasets: [\n            {\n                type:'line',\n                label: 'Temperatur [°C]',\n                backgroundColor: linecolors[0],\n                borderColor: linecolors[0],\n                data: {{{payload.temperature}}},\n                yAxisID: 'left-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            },\n            {\n                type:'bar',\n                label: 'Niederschlag [mm/m²]',\n                backgroundColor: '#00A2E850',\n                borderColor: linecolors[1],\n                borderWidth: 2,\n                data: {{{payload.precipitation}}},\n                yAxisID: 'right-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            }\n        ]\n    },\n\n    // Configuration options go here\n    options: {\n        legend:{\n            display: true,\n            position: 'bottom',\n            align: 'end',\n            labels: {\n                fontColor: 'rgb(100, 100, 100)'\n            }\n        },\n        scales: {\n            yAxes: [\n                {\n                    gridLines :{display:false},\n                    id: 'left-y-axis',\n                    type: 'linear',\n                    position: 'left',\n                    ticks: {\n                        fontColor: linecolors[0],\n                        suggestedMin: 0,\n                        suggestedMax: 20\n                    }\n                },\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    id: 'right-y-axis',\n                    type: 'linear',\n                    position: 'right',\n                    ticks: {\n                        fontColor:linecolors[1],\n                        suggestedMin: 0,\n                        suggestedMax: 10\n                    }\n                }\n            ],\n            xAxes: [\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    \n                    ticks: {\n                        fontColor:textcolor\n                    }\n                }\n            ]\n        }\n    }\n});\n</script>\n","output":"str","x":980,"y":300,"wires":[["681b4548.6f136c"]]},{"id":"999818b.c2c2ee8","type":"function","z":"a24ec06e.62ad9","name":"Example output from OWM","func":"return {\n   \"_msgid\":\"25626a3f.e98956\",\n   \"payload\":[\n      {\n         \"dt\":1605538800,\n         \"main\":{\n            \"temp\":10.26,\n            \"feels_like\":6.03,\n            \"temp_min\":10.26,\n            \"temp_max\":10.41,\n            \"pressure\":1010,\n            \"sea_level\":1010,\n            \"grnd_level\":1009,\n            \"humidity\":88,\n            \"temp_kf\":-0.15\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":87\n         },\n         \"wind\":{\n            \"speed\":5.5,\n            \"deg\":228\n         },\n         \"visibility\":10000,\n         \"pop\":0.88,\n         \"rain\":{\n            \"3h\":1.01\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-16 15:00:00\"\n      },\n      {\n         \"dt\":1605549600,\n         \"main\":{\n            \"temp\":10.27,\n            \"feels_like\":5.8,\n            \"temp_min\":10.27,\n            \"temp_max\":10.32,\n            \"pressure\":1012,\n            \"sea_level\":1012,\n            \"grnd_level\":1012,\n            \"humidity\":89,\n            \"temp_kf\":-0.05\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":94\n         },\n         \"wind\":{\n            \"speed\":5.91,\n            \"deg\":246\n         },\n         \"visibility\":10000,\n         \"pop\":0.97,\n         \"rain\":{\n            \"3h\":0.77\n         },\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-16 18:00:00\"\n      },\n      {\n         \"dt\":1605560400,\n         \"main\":{\n            \"temp\":8.7,\n            \"feels_like\":4.75,\n            \"temp_min\":8.6,\n            \"temp_max\":8.7,\n            \"pressure\":1015,\n            \"sea_level\":1015,\n            \"grnd_level\":1014,\n            \"humidity\":93,\n            \"temp_kf\":0.1\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":54\n         },\n         \"wind\":{\n            \"speed\":4.86,\n            \"deg\":242\n         },\n         \"visibility\":10000,\n         \"pop\":0.24,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-16 21:00:00\"\n      },\n      {\n         \"dt\":1605571200,\n         \"main\":{\n            \"temp\":7.72,\n            \"feels_like\":3.65,\n            \"temp_min\":7.7,\n            \"temp_max\":7.72,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1016,\n            \"humidity\":93,\n            \"temp_kf\":0.02\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":56\n         },\n         \"wind\":{\n            \"speed\":4.71,\n            \"deg\":230\n         },\n         \"visibility\":10000,\n         \"pop\":0.18,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 00:00:00\"\n      },\n      {\n         \"dt\":1605582000,\n         \"main\":{\n            \"temp\":6.84,\n            \"feels_like\":2.59,\n            \"temp_min\":6.84,\n            \"temp_max\":6.84,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1017,\n            \"humidity\":91,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":84\n         },\n         \"wind\":{\n            \"speed\":4.6,\n            \"deg\":224\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 03:00:00\"\n      },\n      {\n         \"dt\":1605592800,\n         \"main\":{\n            \"temp\":7.93,\n            \"feels_like\":3.3,\n            \"temp_min\":7.93,\n            \"temp_max\":7.93,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1017,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":92\n         },\n         \"wind\":{\n            \"speed\":5.37,\n            \"deg\":211\n         },\n         \"visibility\":10000,\n         \"pop\":0.2,\n         \"rain\":{\n            \"3h\":0.16\n         },\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 06:00:00\"\n      },\n      {\n         \"dt\":1605603600,\n         \"main\":{\n            \"temp\":9.62,\n            \"feels_like\":4.64,\n            \"temp_min\":9.62,\n            \"temp_max\":9.62,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1017,\n            \"humidity\":92,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.59,\n            \"deg\":222\n         },\n         \"visibility\":10000,\n         \"pop\":0.83,\n         \"rain\":{\n            \"3h\":0.5\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 09:00:00\"\n      },\n      {\n         \"dt\":1605614400,\n         \"main\":{\n            \"temp\":11.25,\n            \"feels_like\":6.86,\n            \"temp_min\":11.25,\n            \"temp_max\":11.25,\n            \"pressure\":1020,\n            \"sea_level\":1020,\n            \"grnd_level\":1018,\n            \"humidity\":91,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.27,\n            \"deg\":235\n         },\n         \"visibility\":10000,\n         \"pop\":0.74,\n         \"rain\":{\n            \"3h\":0.12\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 12:00:00\"\n      },\n      {\n         \"dt\":1605625200,\n         \"main\":{\n            \"temp\":11.38,\n            \"feels_like\":7.16,\n            \"temp_min\":11.38,\n            \"temp_max\":11.38,\n            \"pressure\":1021,\n            \"sea_level\":1021,\n            \"grnd_level\":1019,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":5.95,\n            \"deg\":232\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 15:00:00\"\n      },\n      {\n         \"dt\":1605636000,\n         \"main\":{\n            \"temp\":11.31,\n            \"feels_like\":7.17,\n            \"temp_min\":11.31,\n            \"temp_max\":11.31,\n            \"pressure\":1022,\n            \"sea_level\":1022,\n            \"grnd_level\":1020,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":5.81,\n            \"deg\":231\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 18:00:00\"\n      },\n      {\n         \"dt\":1605646800,\n         \"main\":{\n            \"temp\":11.25,\n            \"feels_like\":6.76,\n            \"temp_min\":11.25,\n            \"temp_max\":11.25,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1021,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.23,\n            \"deg\":235\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 21:00:00\"\n      },\n      {\n         \"dt\":1605657600,\n         \"main\":{\n            \"temp\":10.41,\n            \"feels_like\":6.27,\n            \"temp_min\":10.41,\n            \"temp_max\":10.41,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":98\n         },\n         \"wind\":{\n            \"speed\":5.48,\n            \"deg\":236\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 00:00:00\"\n      },\n      {\n         \"dt\":1605668400,\n         \"main\":{\n            \"temp\":10.34,\n            \"feels_like\":6.61,\n            \"temp_min\":10.34,\n            \"temp_max\":10.34,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":97\n         },\n         \"wind\":{\n            \"speed\":4.82,\n            \"deg\":226\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 03:00:00\"\n      },\n      {\n         \"dt\":1605679200,\n         \"main\":{\n            \"temp\":9.63,\n            \"feels_like\":5.49,\n            \"temp_min\":9.63,\n            \"temp_max\":9.63,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":87,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":97\n         },\n         \"wind\":{\n            \"speed\":5.1,\n            \"deg\":219\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 06:00:00\"\n      },\n      {\n         \"dt\":1605690000,\n         \"main\":{\n            \"temp\":9.53,\n            \"feels_like\":5.3,\n            \"temp_min\":9.53,\n            \"temp_max\":9.53,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1021,\n            \"humidity\":84,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":40\n         },\n         \"wind\":{\n            \"speed\":5.04,\n            \"deg\":211\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 09:00:00\"\n      },\n      {\n         \"dt\":1605700800,\n         \"main\":{\n            \"temp\":11.17,\n            \"feels_like\":7.28,\n            \"temp_min\":11.17,\n            \"temp_max\":11.17,\n            \"pressure\":1022,\n            \"sea_level\":1022,\n            \"grnd_level\":1020,\n            \"humidity\":78,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":65\n         },\n         \"wind\":{\n            \"speed\":4.72,\n            \"deg\":206\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 12:00:00\"\n      },\n      {\n         \"dt\":1605711600,\n         \"main\":{\n            \"temp\":9.51,\n            \"feels_like\":5.95,\n            \"temp_min\":9.51,\n            \"temp_max\":9.51,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1018,\n            \"humidity\":84,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":33\n         },\n         \"wind\":{\n            \"speed\":4.07,\n            \"deg\":186\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 15:00:00\"\n      },\n      {\n         \"dt\":1605722400,\n         \"main\":{\n            \"temp\":8.52,\n            \"feels_like\":4.62,\n            \"temp_min\":8.52,\n            \"temp_max\":8.52,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1016,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":31\n         },\n         \"wind\":{\n            \"speed\":4.46,\n            \"deg\":186\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 18:00:00\"\n      },\n      {\n         \"dt\":1605733200,\n         \"main\":{\n            \"temp\":8.94,\n            \"feels_like\":4.58,\n            \"temp_min\":8.94,\n            \"temp_max\":8.94,\n            \"pressure\":1016,\n            \"sea_level\":1016,\n            \"grnd_level\":1014,\n            \"humidity\":83,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":99\n         },\n         \"wind\":{\n            \"speed\":4.98,\n            \"deg\":191\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 21:00:00\"\n      }\n   ],\n   \"title\":\"5 day Forecast\"\n};\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":300,"wires":[["b2151ac9.de1728","69d10999.817a08"]]},{"id":"3359bc92.3c8104","type":"inject","z":"a24ec06e.62ad9","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":290,"y":300,"wires":[["999818b.c2c2ee8"]]},{"id":"440f4f48.bf9ff","type":"function","z":"a24ec06e.62ad9","name":"convert time","func":"\nif (!msg.timestamp) \n{\n    msg.timestamp = Math.round(+new Date());\n}\n\nconst now = new Date(msg.timestamp);\nconst days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];\nconst months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];\nconst day = days[now.getDay()];\nconst month = months[now.getMonth()];\n\nvar timeString = \"\";\ntimeString += day + \", \"\ntimeString += now.getDate() + \". \"\ntimeString += month + \" - \"\ntimeString += now.toLocaleTimeString(\"de-DE\", { hour12: false});\ntimeString = timeString.substring(0, timeString.length - 3);\n\nmsg.payload = timeString;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":80,"wires":[["334cc979.4f0876"]]},{"id":"c8b509de.5e9658","type":"inject","z":"a24ec06e.62ad9","name":"every minute","repeat":"60","crontab":"","once":true,"onceDelay":"","topic":"","payload":"","payloadType":"date","x":200,"y":80,"wires":[["440f4f48.bf9ff"]]},{"id":"334cc979.4f0876","type":"ui_text","z":"a24ec06e.62ad9","group":"757348f7.d61688","order":1,"width":"13","height":"1","name":"Date & Time","label":"","format":"{{msg.payload}}","layout":"row-center","x":570,"y":80,"wires":[]},{"id":"3bf5efad.2c2d9","type":"ui_button","z":"a24ec06e.62ad9","name":"","group":"757348f7.d61688","order":2,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-refresh","payload":"true","payloadType":"bool","topic":"","x":290,"y":180,"wires":[["999818b.c2c2ee8"]]},{"id":"5c041c1c.6ff2e4","type":"comment","z":"a24ec06e.62ad9","name":"Refresh","info":"","x":170,"y":180,"wires":[]},{"id":"328a37d4.5720d8","type":"comment","z":"a24ec06e.62ad9","name":"chartjs.org","info":"https://www.chartjs.org/samples/latest/charts/line/basic.html","x":980,"y":340,"wires":[]},{"id":"69d10999.817a08","type":"debug","z":"a24ec06e.62ad9","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":780,"y":440,"wires":[]},{"id":"109b0b40.54c0b5","type":"ui_group","name":"body","tab":"1e27f94b.6bbde7","order":2,"disp":false,"width":"14","collapse":false},{"id":"757348f7.d61688","type":"ui_group","name":"header","tab":"1e27f94b.6bbde7","order":1,"disp":false,"width":"14","collapse":false},{"id":"1e27f94b.6bbde7","type":"ui_tab","name":"Vorhersage","icon":"fa-line-chart","order":5,"disabled":false,"hidden":false}]

As I was already playing with charts ...

It is possible but it takes a lot of work to get something nice from it.
And you can't use weather-icons. Must be image.

Here's the quick one ..

[{"id":"96fc179d.3f6728","type":"ui_template","z":"fdcebe88.8ee74","group":"4552fe72.fdfa5","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":610,"y":160,"wires":[[]]},{"id":"7544e262.beb0cc","type":"inject","z":"fdcebe88.8ee74","name":"","repeat":"","crontab":"","once":true,"onceDelay":"0.62","topic":"","payload":"","payloadType":"date","x":130,"y":160,"wires":[["98fedcf6.f3b2b"]]},{"id":"98fedcf6.f3b2b","type":"function","z":"fdcebe88.8ee74","name":"","func":"\nvar m_first = []\nvar m_second = []\nvar m_labels = []\nvar m_pics = []\nvar a\nvar startTime = 1577836800000\nfor(x=1;x<=25;x++){\n    a = {x: new Date(startTime), y: Math.random() * 300}\n    m_first.push(a)\n    var r = (Math.random() > .5) ? 0 : 1;\n    m_pics.push(r)\n    m_labels.push(\"label_\"+x)\n    startTime += 86400000\n}\n\n\nmsg.payload = {}\nmsg.payload.data = JSON.stringify(m_first)\nmsg.payload.pics = JSON.stringify(m_pics)\nmsg.payload.labels = JSON.stringify(m_labels)\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":280,"y":160,"wires":[["c237afe.55c765"]]},{"id":"ea6d6a0f.c3d758","type":"debug","z":"fdcebe88.8ee74","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":590,"y":200,"wires":[]},{"id":"c237afe.55c765","type":"template","z":"fdcebe88.8ee74","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#889900']\nvar sun = new Image();\nsun.src = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEiklEQVR4Xu2bTYwUVRDHf9UgavBjGjwYE4MhMd5cme69eDFe1MU9bUwwYowo6klFojc/FvGmBtSbrosRMXjYeBBQPHHy4HwQPHIgEhPCQbYXskZF6Ge6p2fsnelhul+/YWbt7mQu06/qVf27qrpeVbVQ8EsKrj8lAKOyAKWwvCZbg/3tKsdE8Echy8gsYLHBtCi+C5RWML3B5WihAPBqzCK8Eyqt2GNPMlsCMAIERuYCpQWULlDGgNUXBH/7iZtvWcdOBRdsh8N53t0mX4NhTtHgSYGNy5eZu/tB/kwbTzMFQa/Oy8DH0avrQMVlpy4IkdBTYSLk8H0ePkt15hB2REq/Yrt8MhQAFus8JXCow1yYr1R5QVf4tEL2WxeA2KV8kFRt3+DydVremSwgaUPg84rDi9cbhFCWJp+heK6jrCKzVWYCIEzaElBPA8L5U6y/8QqP4jONxWYUd0H4C65zCOfwOYPFkb/XcvzOCf645pPvVl7TGjMD0AGhV4AdtsMX3UJ7TSa4yttK2CpwUxrTVPCXKI6xhnftKqd6eDZ4FsWB2P/aVqgFQAeEBp8Cz4eCCLO2w562UF6TTVzlPYTt4V29S6E4xBretKuc7fCOJ1EwV3F4SdcFdQVrvQhafvgMsAmLj+wtLAX/L9aYEuEwcJue3j1Ul3xh20aHH4I73kkq+LwKnK1U+VJX+dZzM3gphSw1eA14H7AMsg5YBfWCNyoO+0SCYG/mMgqAV2c38KEZ0fpwUey2J9lnag9jAERmf2QIT75bV98XHm+7Q14gjAAQBjyfXwz6/CC9LmFxfzwwDiLod98MADUOIjytK4QWnXDQdsIAnOvKDYD3Mw9g0TQdUFNopbDYkpQnpKDtLMkPQI0FhJksmxpbKyzYDk/k4ZcLgCC9XfcPv6fN8PIImkQbZIyXb+COa6XNg/bMBYDXYAbFwqBNhnpfmLEdvtXdIx8ANeZj53BdGfLRCfO2E6XjGpzyAdDgBIqHNPY1SXLCdnlYl+EKANrtKvFxE33Ooh5vY3l1TgP36m5uiO607XJfwCur/AHNCgDidbp+wsXbWF6dZWC9IUV02SzbLrcGxFnlLwHotoB2oVIUk4kuINTiBcyxdIEGU2nl77GArDbo/d+CYGYAytdgwROhwqfCgct4RT4MhQAEZW+fk4U9DkdWUNyCSGQF17skdhGLibEpiYVpaKsXUMyiaDt/KHRZPDqNyVKdXQgfDKE87qN4veKyf2waI53WmM89rGV/uzV2ocFjluIbg2Xyi5aw7XaH42HMCVpjV9iFxa8ja42Fyg9qjir2osJyuW7hRSF8hfDWWDVHE4cTBLPtceEowt6xa4/3GZAY2KKOBiQeAaZRbI6GI/4bkGgNSZyBcEDix4EDEnHra51rtcZ1Mpmm7nRI1lNmmvUjGZHpGZIa0XxQG6AkEIY6JLViTE7T5OLCm/heIMEqhzcmV/hByTS+mXZNOS1eTouX0+Krb1o8rX+nWVfGgKLHAJPfC6SxuH5rMqXCeTbqpjX1vUBemUYGQF7BTdGXAJhCcrXy+RdQtUtfuFGmaAAAAABJRU5ErkJggg==\"\n\nvar cloud = new Image();\ncloud.src = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAJMElEQVR4Xu1ZeVBV1xn/zrlv4bE68HgLu08UA6I+QUriECU6ChNrRSOgMS5prU3FZNROnDG0k7FtFieZxHRxmWpsFGuqE5uaNJVajSKRLSASQFZRlvcuj0Vkeds953SuqRl1FN8FJGF49z943/l9v+93ft9Z7kUwzh80zusHtwBuB4xzBdwtMM4N4F4E3S3gboFxroC7Bca5Ady7gLsF3C0wzhVwt8A4N8D3twvExICCdQfFOIhzFkUsGCGkZIB7EeAaoDS/gec7AIA+7gka9RaYqNFoAbEsALIKI87woAIJgBMjdp5htP9aq+UEALDHJcSoCjBJr95ICfwOY6QWC8IYm8LCDa2hESFE5ekFt7q7ob6uwaODN00BjFW3i6YkDxTciw0tlvrHIcJoCYAjtZq9DLENYhEBas3lHdm/9khOSZmq8lSBXK4ASikwxoBSArzZbNvzh90Vx3OOhlFKtEDhJlGizKbm9tMjLcJIC4AjIiIUXv39Mg9B4JwKhTDA84KgC9jDAV7PEOnftGlL7UtbtxlVqm8neLCnufnGwIuZGZXXGhtmMyoMYMw9W2/u+PJR46T8PiICxAF4dus1KUBpGmMwGzMWDhxWAoUeBqSCURIHcqXwwf4DlsWLF0+SQtBmtcKazPSC0qLCRMqI2cPDZ1b19esmKRiDxQ5bAEOQdgET6C6MwfhdIkqtDJCVYOQrA5CJ/8/eubNi3YZfxA6FuM1mg/lzEsr4NrMRAxyrM1tWDgXnQWOGJUBEUMCrjOLfi0UqOHnTkozn2jNWrQ6fOClSK5fJoa+3Vygs+qqRCIKQtjwjejika2uudqUmJykRQ54MsYRGU0fJcPDujB2yAAZd4HYE8BYAkNTUxcWv79qVEKBW45Eg9cCtkRBYn5ZWlF9wCRFqvy5TqI4SU/sXTQC24eQckgBRwbpkGyG5MgD8y6xXyl/Zvt3IyW47/bE+ubm5pvVrV6uVFL4RW05grEQBLKuO7ywcamLJAsQAKPq0/vkyxMXPmz//0t4PP3pSJpcPNb/kccUFBW1HDh5o+fzzU6FAqZ4xYQBzisz6Nv6UZDAA6UfhSL1+EWPCvznMmS+UlgVotbrRq/6uCtt53v6z5zPKqyqrEigS+hHDyY3mzmKpIkh2wEStZh9G7OfPLJxfsO/Q0USEJEO4xNFut4PT4QARH2MMCqUSOI67Z6zdZoMVaUuKqi5fTnACLcLmzrlS1wRJ7MULjNWizkMYJezes7f+2aXLIl2qxsUg8TSYf+H8tffeetNSXVWlsTqtao4Axylwn1YX1JqxZg1s2LhpplLp8R1iZ4dFmGOc2SYIzjBAaFmDqf2ki+luh0kSYLpW69XHaA3CEJybX9BvMBi8pCQbLLa7q8u6Ki2tsqamSosYugaAJgMGLwSMMAKAMNQAEE+Vylf10YkTKmNcXMgdvNde3Vb88eHDswlDR5v49uelcJIkQFBQkKdSsDdhjAPzS8sdWr1eISXZ3bHi4UYQBMAIQXdnZ1/K3Lkmq7W/jSKYtjAltW5j1ssTp0RFaUVXdHV39h0+cKDmyMFDahuxN8sQN/nAkZz+uc/Mv32bLL50ybRy2U/0CFil4OEd39TU5PLWKEmAkJAQlcLhKEOYRR07+U9zfGKiTqoA1RUV5p2vZzeVl14OtNptGpGAF+DqAeKweftM0B46fiLQaDT6348rCsHzJuf69MyyhtoaGWCsO1dc7B0SEurLm03CHOMMGaXU4lSowltaWqyu8pIkAABwBp36JAL04w2bXi7dnp09y9VE4k1vy0sbCz779KSBElSFKI1AIOhEb1MZMsnlcsWZi4V+oWHh3oNh3urpgdTkp0v5NlPv1GkxXp+dORffUF9za1FSki+j0OqNcNQVnu93lZdUAWCKRr2NYPROQGBAWV5JuVGhcK0L1qanF3yVd9aHMs4/PiGhefOWrfpYozGUMgoVVypuGAwGv5DQUD9XiJeXlXWsSE2tZ4wp0lZnkLDwcNX7b749TXx30NDelSyeTl3BkbwIigOi1OoghwxVYwDftz/4Y+3yFelTHpXsk+PHKn+1ebMvh5nyrXfev7k0Y+WU+7e0R2Hc/bu4dix4+qnStrpGJSBqcXIyQIiEYSbLaTC3/0YKlmQHiOCT9IG/BQbZnIxr/jT3jO/UJ2IeOnMOux0Sp8dW3uq+OZD+wgvojXffjZdC8GGxvT09zoN/2V97eP+f4WZPv40QpuGUynUNra1npeAPSYDpAF69GvVpjNEcpYdH3d9OfjIhdkZc4IMORY319d0L5iQKMrmc5ZWUBWp1uiHlfFhRPG9m61c8V1JbdzUcAFWEmjtSvgQQXBVhyGQiIgJ1uI+dRjI0HTHUk7Yi/erWHTtm+E2Y4KGQy+HO5ejjnJzK7K1b7MHh4ZB7MX+Wq2uGqwWIcTzP25PiZvZQQjSYgLHOYrns6vghCyAmiPT39xUU3IccwDLxb4Zov1YXUhNuiHD4efkBcACmlhb7lfLLA09Ex6j/cfrM7MchABEEWL54UeE35RU/okCzrpk7/zQqAvw/CY4M0i4GQrMEBPM4gHsuR4xADcXU4e/vjy4UlU7z8h50l3OV9z1x4hnhp6tWFeSdP5vIMXitlre84SrQsBxwd5J5ADJLYKDaLsezEaERFIMfQ0iGOSSnTvIkAZT0r//8tyt6WqzGVXKuxlkHBiAlOamk9UZzPBC6rsHS+VdXx46YAIMlnKQJPAQY1uqDg7/+4tyFOG8fH1f5uRRXePEin7ls6QSOUcbkENVo6r7h0kCplyFXQe+Pi9brwxzMUcwAawyRhqJ9h3Jig0JCVEqlcqiQt8eJp8uK8vKulWlLOu0222TMyP46vmujFNBRcYBIaGqQ5imHQE8hjPyBQfeMmbNqY6fHYqW3D/r2y5eUz4Ac2Pr6WGV1JSn9uiQaM+bLCCumXt4Lm5qabv4gBRBJRQWpo6yU7ZYDXiSF5CNiGSLk7xzDG2o6Onql4o6aA+4iJp8YrIlGTpiPMJrIEFFhJu21EiXAsJw5gKBmOSc/Xd3WVjbUD6jfhwAPmiSpr9Ol9MugpvihCCDVuSMW7xZgxKQco0BuB4zRiRsx2m4HjJiUYxTI7YAxOnEjRtvtgBGTcowCuR0wRiduxGj/D4rPmm7CVCyTAAAAAElFTkSuQmCC\"\n\nvar images = [sun,cloud]\nvar pics = []\nvar picsindex = {{{payload.pics}}}\npicsindex.forEach(idx => pics.push(images[idx]));\nconsole.log(pics)\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx, {\n    // The type of chart we want to create\n    type: 'bar',\n\n    // The data for our dataset\n    data: {\n        labels: {{{payload.labels}}},\n        datasets: [\n            {\n                type:'line',\n                label: 'First',\n                backgroundColor: linecolors[0],\n                borderColor: linecolors[0],\n                data: {{{payload.data}}},\n                steppedLine: false,\n                pointStyle:pics,\n                fill: false,\n                borderWidth: 1\n            }\n        ]\n    },\n\n    // Configuration options go here\n    options: {\n        scales: {\n            yAxes: [\n                {\n                    gridLines :{display:false},\n                    \n                    type: 'linear',\n                    position: 'left',\n                    ticks: {\n                        fontColor: linecolors[0]\n                    }\n                }\n            ],\n            xAxes: [\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    \n                    ticks: {\n                        fontColor:textcolor\n                    }\n                }\n            ]\n        }\n    }\n});\n</script>\n","output":"str","x":420,"y":160,"wires":[["96fc179d.3f6728","ea6d6a0f.c3d758"]]},{"id":"4552fe72.fdfa5","type":"ui_group","name":"Chart","tab":"2ecb90e3.af7a5","order":3,"disp":true,"width":"15","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","name":"DASH","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
3 Likes

Tried to show images with your flow.

Using openweathermap png icons. They have really bad choice of colors, i can't see any background color for such to let them stand out. So pretty unusable icons.

Also it takes to have separate dataset created for icons to rise them above the temperature line. This can be avoided by creating custom icons (png-s) which are created with vertical offset. Then the icons can be shown as part of temperature dataset.

The icons with separate dataset also create entry for tooltip and legend and there is no way in to filter out any dataset to be not shown.

But overall it is highly possible to create such stuff. :slight_smile:

[{"id":"d5948620.7414f8","type":"ui_template","z":"a24ec06e.62ad9","d":true,"group":"109b0b40.54c0b5","name":"Table","order":3,"width":"14","height":"1","format":"<style>\n/* Need a transposed table:  Headings on left, data horizontally to the right.  However, if the table has a caption, we need it to remain above the entire table.  Do this by creating a grid for the caption, head, and body.  Then within the head and body, use flex-box to orientate the cells.\n*/\n\n/* IE-10/11 Grid */\n.vertical {\n  display: -ms-grid;\n  -ms-grid-rows: auto auto;\n  -ms-grid-columns: auto auto;\n}\n.vertical thead {\n  -ms-grid-row: 2;\n  -ms-grid-column: 1;\n}\n.vertical tbody {\n  -ms-grid-row: 2;\n  -ms-grid-column: 2;\n}\n.vertical caption {\n  -ms-grid-row: 1;\n  -ms-grid-column: 1;\n  -ms-grid-column-span: 2;\n}\n\n/* Everyone Else's Grid */\n@supports (display: grid) {\n   .vertical {\n     display: grid;\n     grid-template-columns: min-content min-content;\n     grid-template-rows: auto auto;\n     grid-template-areas:\n       \"caption caption\"\n       \"head body\";\n   }\n   .vertical thead {\n     grid-area: head;\n   }\n   .vertical tbody {\n     grid-area: body;\n   }\n   .vertical caption {\n     grid-area: caption; \n   }\n}\n\n/* Flex - Cross Browser CSS */\n.vertical thead {\n  display: flex;\n  flex-shrink: 0;\n  min-width: min-content;\n}\n.vertical tbody {\n    display: flex;\n}\n.vertical tr {\n  display: flex;\n  flex-direction: column;\n  min-width: min-content;\n  flex-shrink: 0;\n}\n.vertical td, .vertical th {\n  display: block;\n}\n.vertical caption {\n  display: block;\n}\n\n/* Visual styling */\ntable { border-collapse: collapse; }\ntable td {\n  border: 0px solid black; \n   text-align:center;\n   width: 39px;\n}\ntable th {\n  border: 0px solid black;\n  background-color: grey;\n  color: white;\n}\n</style>\n\n\n<table id=\"table\" border=\"0\"  class=\"vertical\">\n <tbody>\n <tr ng-repeat=\"row in msg.payload.icons\">\n    <td><i class=\"{{row.forecast}}\"></i></td>\n </tr>\n </tbody>\n</table>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":180,"wires":[[]]},{"id":"681b4548.6f136c","type":"ui_template","z":"a24ec06e.62ad9","group":"109b0b40.54c0b5","name":"Line Chart","order":4,"width":"14","height":"6","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1170,"y":300,"wires":[[]]},{"id":"b2151ac9.de1728","type":"function","z":"a24ec06e.62ad9","name":"create data","func":"\nconst days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];\nconst now = Date.now(); \n\nvar temperatures = [];\nvar precipitations = [];\nvar windSpeeds = [];\nvar lables = [];\nvar icons = [];\nvar iconline = [];//create line for icons to be above the temperature line\n\nvar lastDay = -1;\nfor (const item of msg.payload) \n{\n    const itemTimestamp = item.dt * 1000;\n    \n    // only measurements in the future\n    //if (itemTimestamp >= now) // NO FOR THE EXAMPLE DATA\n    {\n        // temperature\n        const temperature = item.main.temp;\n        temperatures.push({\"x\":itemTimestamp, \"y\":temperature});\n        \n        iconline.push({\"x\":itemTimestamp, \"y\":temperature+2.5})//higher a bit \n        \n        // precipitation        \n        var precipitation = 0;\n        if (typeof item.rain !== \"undefined\") \n        {        \n            precipitation = item.rain['3h'];\n        }\n        precipitations.push(precipitation);\n        // windSpeed\n        const windSpeed = item.wind.speed;\n        windSpeeds.push(windSpeed);\n        \n        // label\n        const itemDate = new Date(itemTimestamp);\n        var timeString = '';\n        if (itemDate.getDay() !== lastDay)\n        {\n            timeString += days[itemDate.getDay()] + ', ';\n            lastDay = itemDate.getDay();\n        }\n        timeString += itemDate.getHours() + ' Uhr';\n        lables.push(timeString);\n        \n        // icon\n        //const forecast = 'wi wi-owm-' + item.weather[0].icon + ' wi-2x';\n        //const icon = {'forecast':forecast};\n        \n        icons.push(item.weather[0].icon);// use owm icon info directly\n    }\n    \n    // 48 hours forecast, measurements every 3 hours\n    if (temperatures.length >= 48/3)\n    {\n        break;\n    }\n}\n\nmsg = {};\nmsg.payload = {};\nmsg.payload.temperature = JSON.stringify(temperatures);\nmsg.payload.precipitation = JSON.stringify(precipitations);\nmsg.payload.windSpeed = JSON.stringify(windSpeeds);\nmsg.payload.labels = JSON.stringify(lables);\nmsg.payload.icons = JSON.stringify(icons);\nmsg.payload.iconline = JSON.stringify(iconline);\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":790,"y":300,"wires":[["22b1f9f2.5ce4a6","69d10999.817a08"]]},{"id":"22b1f9f2.5ce4a6","type":"template","z":"a24ec06e.62ad9","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =250></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#00A2E8','#D6D4C0']\n\n// chart can render Images as points\nvar iconimages = []\nvar iconchoice = {{{payload.icons}}}\nvar iconcount = iconchoice.length\nvar loadedcount = 0\n\n//create all images\niconchoice.forEach(icon => createImages(icon));\n\nfunction createImages(icon){\n  var img = new Image()\n  img.src = \"http://openweathermap.org/img/wn/\"+icon+'.png';\n  img.onload = onImageLoaded \n  iconimages.push(img);\n}\n\n// images should be preloaded before feeding them into chart\nfunction onImageLoaded(){\n    loadedcount ++\n    if(iconcount == loadedcount){\n        createChart()\n    }\n}\n\n\n\n// createChart()\nfunction createChart(){\n    var ctx = document.getElementById('myChart').getContext('2d');\n    var chart = new Chart(ctx, {\n    \n    // The type of chart we want to create\n    type: 'bar',\n\n    // The data for our dataset\n    data: {\n        labels: {{{payload.labels}}},\n        datasets: [\n            {\n                type:'line',\n                label: 'Temperatur [°C]',\n                backgroundColor: linecolors[0],\n                borderColor: linecolors[0],\n                data: {{{payload.temperature}}},\n                yAxisID: 'left-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            },\n            {\n                type:'bar',\n                label: 'Niederschlag [mm/m²]',\n                backgroundColor: 'rgba(0,162,232,0.5)',\n                borderColor: linecolors[1],\n                borderWidth: 2,\n                data: {{{payload.precipitation}}},\n                yAxisID: 'right-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            },\n            {\n                type:'line',\n                label: 'Icons',\n                backgroundColor: linecolors[2],\n                borderColor: linecolors[2],\n                data: {{{payload.iconline}}},\n                yAxisID: 'left-y-axis',\n                pointStyle:iconimages,\n                showLine: false, // hide the line\n                borderWidth: 1\n            }\n        ]\n    },\n\n    // Configuration options go here\n    options: {\n        \n        legend:{\n            display: true,\n            position: 'bottom',\n            align: 'end',\n            labels: {\n                fontColor: 'rgb(100, 100, 100)'\n            }\n        },\n        scales: {\n            yAxes: [\n                {\n                    gridLines :{display:false},\n                    id: 'left-y-axis',\n                    type: 'linear',\n                    position: 'left',\n                    ticks: {\n                        fontColor: linecolors[0],\n                        suggestedMin: 0,\n                        suggestedMax: 20\n                    }\n                },\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    id: 'right-y-axis',\n                    type: 'linear',\n                    position: 'right',\n                    ticks: {\n                        fontColor:linecolors[1],\n                        suggestedMin: 0,\n                        suggestedMax: 10\n                    }\n                }\n            ],\n            xAxes: [\n                    {\n                        gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                        \n                        ticks: {\n                            fontColor:textcolor\n                        }\n                    }\n                ]\n            }\n        }\n    });\n}\n\n\n</script>\n","output":"str","x":980,"y":300,"wires":[["681b4548.6f136c"]]},{"id":"999818b.c2c2ee8","type":"function","z":"a24ec06e.62ad9","name":"Example output from OWM","func":"return {\n   \"_msgid\":\"25626a3f.e98956\",\n   \"payload\":[\n      {\n         \"dt\":1605538800,\n         \"main\":{\n            \"temp\":10.26,\n            \"feels_like\":6.03,\n            \"temp_min\":10.26,\n            \"temp_max\":10.41,\n            \"pressure\":1010,\n            \"sea_level\":1010,\n            \"grnd_level\":1009,\n            \"humidity\":88,\n            \"temp_kf\":-0.15\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":87\n         },\n         \"wind\":{\n            \"speed\":5.5,\n            \"deg\":228\n         },\n         \"visibility\":10000,\n         \"pop\":0.88,\n         \"rain\":{\n            \"3h\":1.01\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-16 15:00:00\"\n      },\n      {\n         \"dt\":1605549600,\n         \"main\":{\n            \"temp\":10.27,\n            \"feels_like\":5.8,\n            \"temp_min\":10.27,\n            \"temp_max\":10.32,\n            \"pressure\":1012,\n            \"sea_level\":1012,\n            \"grnd_level\":1012,\n            \"humidity\":89,\n            \"temp_kf\":-0.05\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":94\n         },\n         \"wind\":{\n            \"speed\":5.91,\n            \"deg\":246\n         },\n         \"visibility\":10000,\n         \"pop\":0.97,\n         \"rain\":{\n            \"3h\":0.77\n         },\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-16 18:00:00\"\n      },\n      {\n         \"dt\":1605560400,\n         \"main\":{\n            \"temp\":8.7,\n            \"feels_like\":4.75,\n            \"temp_min\":8.6,\n            \"temp_max\":8.7,\n            \"pressure\":1015,\n            \"sea_level\":1015,\n            \"grnd_level\":1014,\n            \"humidity\":93,\n            \"temp_kf\":0.1\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":54\n         },\n         \"wind\":{\n            \"speed\":4.86,\n            \"deg\":242\n         },\n         \"visibility\":10000,\n         \"pop\":0.24,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-16 21:00:00\"\n      },\n      {\n         \"dt\":1605571200,\n         \"main\":{\n            \"temp\":7.72,\n            \"feels_like\":3.65,\n            \"temp_min\":7.7,\n            \"temp_max\":7.72,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1016,\n            \"humidity\":93,\n            \"temp_kf\":0.02\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":56\n         },\n         \"wind\":{\n            \"speed\":4.71,\n            \"deg\":230\n         },\n         \"visibility\":10000,\n         \"pop\":0.18,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 00:00:00\"\n      },\n      {\n         \"dt\":1605582000,\n         \"main\":{\n            \"temp\":6.84,\n            \"feels_like\":2.59,\n            \"temp_min\":6.84,\n            \"temp_max\":6.84,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1017,\n            \"humidity\":91,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":84\n         },\n         \"wind\":{\n            \"speed\":4.6,\n            \"deg\":224\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 03:00:00\"\n      },\n      {\n         \"dt\":1605592800,\n         \"main\":{\n            \"temp\":7.93,\n            \"feels_like\":3.3,\n            \"temp_min\":7.93,\n            \"temp_max\":7.93,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1017,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":92\n         },\n         \"wind\":{\n            \"speed\":5.37,\n            \"deg\":211\n         },\n         \"visibility\":10000,\n         \"pop\":0.2,\n         \"rain\":{\n            \"3h\":0.16\n         },\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 06:00:00\"\n      },\n      {\n         \"dt\":1605603600,\n         \"main\":{\n            \"temp\":9.62,\n            \"feels_like\":4.64,\n            \"temp_min\":9.62,\n            \"temp_max\":9.62,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1017,\n            \"humidity\":92,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.59,\n            \"deg\":222\n         },\n         \"visibility\":10000,\n         \"pop\":0.83,\n         \"rain\":{\n            \"3h\":0.5\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 09:00:00\"\n      },\n      {\n         \"dt\":1605614400,\n         \"main\":{\n            \"temp\":11.25,\n            \"feels_like\":6.86,\n            \"temp_min\":11.25,\n            \"temp_max\":11.25,\n            \"pressure\":1020,\n            \"sea_level\":1020,\n            \"grnd_level\":1018,\n            \"humidity\":91,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.27,\n            \"deg\":235\n         },\n         \"visibility\":10000,\n         \"pop\":0.74,\n         \"rain\":{\n            \"3h\":0.12\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 12:00:00\"\n      },\n      {\n         \"dt\":1605625200,\n         \"main\":{\n            \"temp\":11.38,\n            \"feels_like\":7.16,\n            \"temp_min\":11.38,\n            \"temp_max\":11.38,\n            \"pressure\":1021,\n            \"sea_level\":1021,\n            \"grnd_level\":1019,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":5.95,\n            \"deg\":232\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 15:00:00\"\n      },\n      {\n         \"dt\":1605636000,\n         \"main\":{\n            \"temp\":11.31,\n            \"feels_like\":7.17,\n            \"temp_min\":11.31,\n            \"temp_max\":11.31,\n            \"pressure\":1022,\n            \"sea_level\":1022,\n            \"grnd_level\":1020,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":5.81,\n            \"deg\":231\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 18:00:00\"\n      },\n      {\n         \"dt\":1605646800,\n         \"main\":{\n            \"temp\":11.25,\n            \"feels_like\":6.76,\n            \"temp_min\":11.25,\n            \"temp_max\":11.25,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1021,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.23,\n            \"deg\":235\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 21:00:00\"\n      },\n      {\n         \"dt\":1605657600,\n         \"main\":{\n            \"temp\":10.41,\n            \"feels_like\":6.27,\n            \"temp_min\":10.41,\n            \"temp_max\":10.41,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":98\n         },\n         \"wind\":{\n            \"speed\":5.48,\n            \"deg\":236\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 00:00:00\"\n      },\n      {\n         \"dt\":1605668400,\n         \"main\":{\n            \"temp\":10.34,\n            \"feels_like\":6.61,\n            \"temp_min\":10.34,\n            \"temp_max\":10.34,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":97\n         },\n         \"wind\":{\n            \"speed\":4.82,\n            \"deg\":226\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 03:00:00\"\n      },\n      {\n         \"dt\":1605679200,\n         \"main\":{\n            \"temp\":9.63,\n            \"feels_like\":5.49,\n            \"temp_min\":9.63,\n            \"temp_max\":9.63,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":87,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":97\n         },\n         \"wind\":{\n            \"speed\":5.1,\n            \"deg\":219\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 06:00:00\"\n      },\n      {\n         \"dt\":1605690000,\n         \"main\":{\n            \"temp\":9.53,\n            \"feels_like\":5.3,\n            \"temp_min\":9.53,\n            \"temp_max\":9.53,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1021,\n            \"humidity\":84,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":40\n         },\n         \"wind\":{\n            \"speed\":5.04,\n            \"deg\":211\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 09:00:00\"\n      },\n      {\n         \"dt\":1605700800,\n         \"main\":{\n            \"temp\":11.17,\n            \"feels_like\":7.28,\n            \"temp_min\":11.17,\n            \"temp_max\":11.17,\n            \"pressure\":1022,\n            \"sea_level\":1022,\n            \"grnd_level\":1020,\n            \"humidity\":78,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":65\n         },\n         \"wind\":{\n            \"speed\":4.72,\n            \"deg\":206\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 12:00:00\"\n      },\n      {\n         \"dt\":1605711600,\n         \"main\":{\n            \"temp\":9.51,\n            \"feels_like\":5.95,\n            \"temp_min\":9.51,\n            \"temp_max\":9.51,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1018,\n            \"humidity\":84,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":33\n         },\n         \"wind\":{\n            \"speed\":4.07,\n            \"deg\":186\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 15:00:00\"\n      },\n      {\n         \"dt\":1605722400,\n         \"main\":{\n            \"temp\":8.52,\n            \"feels_like\":4.62,\n            \"temp_min\":8.52,\n            \"temp_max\":8.52,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1016,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":31\n         },\n         \"wind\":{\n            \"speed\":4.46,\n            \"deg\":186\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 18:00:00\"\n      },\n      {\n         \"dt\":1605733200,\n         \"main\":{\n            \"temp\":8.94,\n            \"feels_like\":4.58,\n            \"temp_min\":8.94,\n            \"temp_max\":8.94,\n            \"pressure\":1016,\n            \"sea_level\":1016,\n            \"grnd_level\":1014,\n            \"humidity\":83,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":99\n         },\n         \"wind\":{\n            \"speed\":4.98,\n            \"deg\":191\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 21:00:00\"\n      }\n   ],\n   \"title\":\"5 day Forecast\"\n};\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":300,"wires":[["b2151ac9.de1728"]]},{"id":"3359bc92.3c8104","type":"inject","z":"a24ec06e.62ad9","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":290,"y":300,"wires":[["999818b.c2c2ee8"]]},{"id":"440f4f48.bf9ff","type":"function","z":"a24ec06e.62ad9","name":"convert time","func":"\nif (!msg.timestamp) \n{\n    msg.timestamp = Math.round(+new Date());\n}\n\nconst now = new Date(msg.timestamp);\nconst days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];\nconst months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];\nconst day = days[now.getDay()];\nconst month = months[now.getMonth()];\n\nvar timeString = \"\";\ntimeString += day + \", \"\ntimeString += now.getDate() + \". \"\ntimeString += month + \" - \"\ntimeString += now.toLocaleTimeString(\"de-DE\", { hour12: false});\ntimeString = timeString.substring(0, timeString.length - 3);\n\nmsg.payload = timeString;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":80,"wires":[["334cc979.4f0876"]]},{"id":"c8b509de.5e9658","type":"inject","z":"a24ec06e.62ad9","name":"every minute","repeat":"60","crontab":"","once":true,"onceDelay":"","topic":"","payload":"","payloadType":"date","x":200,"y":80,"wires":[["440f4f48.bf9ff"]]},{"id":"334cc979.4f0876","type":"ui_text","z":"a24ec06e.62ad9","group":"757348f7.d61688","order":1,"width":"13","height":"1","name":"Date & Time","label":"","format":"{{msg.payload}}","layout":"row-center","x":570,"y":80,"wires":[]},{"id":"3bf5efad.2c2d9","type":"ui_button","z":"a24ec06e.62ad9","name":"","group":"757348f7.d61688","order":2,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-refresh","payload":"true","payloadType":"bool","topic":"","x":290,"y":180,"wires":[["999818b.c2c2ee8"]]},{"id":"5c041c1c.6ff2e4","type":"comment","z":"a24ec06e.62ad9","name":"Refresh","info":"","x":170,"y":180,"wires":[]},{"id":"328a37d4.5720d8","type":"comment","z":"a24ec06e.62ad9","name":"chartjs.org","info":"https://www.chartjs.org/samples/latest/charts/line/basic.html","x":980,"y":340,"wires":[]},{"id":"69d10999.817a08","type":"debug","z":"a24ec06e.62ad9","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":810,"y":420,"wires":[]},{"id":"a723be2d.019a2","type":"ui_template","z":"a24ec06e.62ad9","group":"109b0b40.54c0b5","name":"Title","order":3,"width":"14","height":"1","format":"<style>\n    #charttitle{\n        text-align:center;\n    }\n</style>\n<div id='charttitle'>CHART TITLE</div>\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1110,"y":260,"wires":[[]]},{"id":"109b0b40.54c0b5","type":"ui_group","name":"body","tab":"1e27f94b.6bbde7","order":2,"disp":false,"width":"14","collapse":false},{"id":"757348f7.d61688","type":"ui_group","name":"header","tab":"1e27f94b.6bbde7","order":1,"disp":false,"width":"14","collapse":false},{"id":"1e27f94b.6bbde7","type":"ui_tab","name":"Vorhersage","icon":"fa-line-chart","order":5,"disabled":false,"hidden":false}]

EDIT:
Just discovered that there is another set of icons , slightly better but still not may cup of tea :stuck_out_tongue:

 img.src = "http://openweathermap.org/img/w/"+icon+".png";

7 Likes

Amazing! It is a pleasure to learn from you!
(I had hoped you would hear my call :grin:)

1 Like

The light has been shown and the Iconify icons are that easy to use, the result can be near to perfect :slight_smile:

[{"id":"60d3096.ce897f8","type":"ui_template","z":"f1c3712a.51632","group":"a605595c.ac6378","name":"","order":1,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":620,"y":380,"wires":[[]]},{"id":"639096c5.76e7a8","type":"ui_template","z":"f1c3712a.51632","group":"109b0b40.54c0b5","name":"Line Chart","order":4,"width":"14","height":"6","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1050,"y":460,"wires":[[]]},{"id":"b6bfcb33.c51c98","type":"function","z":"f1c3712a.51632","name":"create data","func":"\nconst days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];\nconst now = Date.now(); \n\nvar temperatures = [];\nvar precipitations = [];\nvar windSpeeds = [];\nvar lables = [];\nvar icons = [];\nvar iconline = [];//create line for icons to be above the temperature line\n\nvar lastDay = -1;\nfor (const item of msg.payload) \n{\n    const itemTimestamp = item.dt * 1000;\n    \n    // only measurements in the future\n    //if (itemTimestamp >= now) // NO FOR THE EXAMPLE DATA\n    {\n        // temperature\n        const temperature = item.main.temp;\n        temperatures.push({\"x\":itemTimestamp, \"y\":temperature});\n        \n        iconline.push({\"x\":itemTimestamp, \"y\":temperature+2.5})//higher a bit \n        \n        // precipitation        \n        var precipitation = 0;\n        if (typeof item.rain !== \"undefined\") \n        {        \n            precipitation = item.rain['3h'];\n        }\n        precipitations.push(precipitation);\n        // windSpeed\n        const windSpeed = item.wind.speed;\n        windSpeeds.push(windSpeed);\n        \n        // label\n        const itemDate = new Date(itemTimestamp);\n        var timeString = '';\n        if (itemDate.getDay() !== lastDay)\n        {\n            timeString += days[itemDate.getDay()] + ', ';\n            lastDay = itemDate.getDay();\n        }\n        timeString += itemDate.getHours() + ' Uhr';\n        lables.push(timeString);\n        \n        // icon\n        //const forecast = 'wi wi-owm-' + item.weather[0].icon + ' wi-2x';\n        //const icon = {'forecast':forecast};\n        \n        icons.push(item.weather[0].id);// use owm icon from Iconify\n    }\n    \n    // 48 hours forecast, measurements every 3 hours\n    if (temperatures.length >= 48/3)\n    {\n        break;\n    }\n}\n\nmsg = {};\nmsg.payload = {};\nmsg.payload.temperature = JSON.stringify(temperatures);\nmsg.payload.precipitation = JSON.stringify(precipitations);\nmsg.payload.windSpeed = JSON.stringify(windSpeeds);\nmsg.payload.labels = JSON.stringify(lables);\nmsg.payload.icons = JSON.stringify(icons);\nmsg.payload.iconline = JSON.stringify(iconline);\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":630,"y":460,"wires":[["7bf30f5e.3c7d1","6b642f61.e2107"]]},{"id":"7bf30f5e.3c7d1","type":"template","z":"f1c3712a.51632","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =250></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#00A2E8','#D6D4C0']\n\n// chart can render Images as points\nvar iconimages = []\nvar iconchoice = {{{payload.icons}}}\nvar iconcount = iconchoice.length\nvar loadedcount = 0\n\n//create all images\niconchoice.forEach(icon => createImages(icon));\n\nfunction createImages(icon){\n  var img = new Image()\n  img.src = \"https://api.iconify.design/wi:owm-\"+icon+\".svg?height=24&color=%23E9E9DE\";\n  img.onload = onImageLoaded \n  iconimages.push(img);\n}\n\n// images should be preloaded before feeding them into chart\nfunction onImageLoaded(){\n    loadedcount ++\n    if(iconcount == loadedcount){\n        createChart()\n    }\n}\n\n\n\n// createChart()\nfunction createChart(){\n    var ctx = document.getElementById('myChart').getContext('2d');\n    var chart = new Chart(ctx, {\n    \n    // The type of chart we want to create\n    type: 'bar',\n\n    // The data for our dataset\n    data: {\n        labels: {{{payload.labels}}},\n        datasets: [\n            {\n                type:'line',\n                label: 'Temperatur [°C]',\n                backgroundColor: linecolors[0],\n                borderColor: linecolors[0],\n                data: {{{payload.temperature}}},\n                yAxisID: 'left-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            },\n            {\n                type:'bar',\n                label: 'Niederschlag [mm/m²]',\n                backgroundColor: 'rgba(0,162,232,0.5)',\n                borderColor: linecolors[1],\n                borderWidth: 2,\n                data: {{{payload.precipitation}}},\n                yAxisID: 'right-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            },\n            {\n                type:'line',\n                label: 'Icons',\n                backgroundColor: linecolors[2],\n                borderColor: linecolors[2],\n                data: {{{payload.iconline}}},\n                yAxisID: 'left-y-axis',\n                pointStyle:iconimages,\n                showLine: false, // hide the line\n                borderWidth: 1\n            }\n        ]\n    },\n\n    // Configuration options go here\n    options: {\n        \n        legend:{\n            display: true,\n            position: 'bottom',\n            align: 'end',\n            labels: {\n                fontColor: 'rgb(100, 100, 100)'\n            }\n        },\n        scales: {\n            yAxes: [\n                {\n                    gridLines :{display:false},\n                    id: 'left-y-axis',\n                    type: 'linear',\n                    position: 'left',\n                    ticks: {\n                        fontColor: linecolors[0],\n                        suggestedMin: 0,\n                        suggestedMax: 20\n                    }\n                },\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    id: 'right-y-axis',\n                    type: 'linear',\n                    position: 'right',\n                    ticks: {\n                        fontColor:linecolors[1],\n                        suggestedMin: 0,\n                        suggestedMax: 10\n                    }\n                }\n            ],\n            xAxes: [\n                    {\n                        gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                        \n                        ticks: {\n                            fontColor:textcolor\n                        }\n                    }\n                ]\n            }\n        }\n    });\n}\n\n\n</script>\n","output":"str","x":840,"y":460,"wires":[["639096c5.76e7a8"]]},{"id":"8d77a080.e88d","type":"function","z":"f1c3712a.51632","name":"Example output from OWM","func":"return {\n   \"_msgid\":\"25626a3f.e98956\",\n   \"payload\":[\n      {\n         \"dt\":1605538800,\n         \"main\":{\n            \"temp\":10.26,\n            \"feels_like\":6.03,\n            \"temp_min\":10.26,\n            \"temp_max\":10.41,\n            \"pressure\":1010,\n            \"sea_level\":1010,\n            \"grnd_level\":1009,\n            \"humidity\":88,\n            \"temp_kf\":-0.15\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":87\n         },\n         \"wind\":{\n            \"speed\":5.5,\n            \"deg\":228\n         },\n         \"visibility\":10000,\n         \"pop\":0.88,\n         \"rain\":{\n            \"3h\":1.01\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-16 15:00:00\"\n      },\n      {\n         \"dt\":1605549600,\n         \"main\":{\n            \"temp\":10.27,\n            \"feels_like\":5.8,\n            \"temp_min\":10.27,\n            \"temp_max\":10.32,\n            \"pressure\":1012,\n            \"sea_level\":1012,\n            \"grnd_level\":1012,\n            \"humidity\":89,\n            \"temp_kf\":-0.05\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":94\n         },\n         \"wind\":{\n            \"speed\":5.91,\n            \"deg\":246\n         },\n         \"visibility\":10000,\n         \"pop\":0.97,\n         \"rain\":{\n            \"3h\":0.77\n         },\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-16 18:00:00\"\n      },\n      {\n         \"dt\":1605560400,\n         \"main\":{\n            \"temp\":8.7,\n            \"feels_like\":4.75,\n            \"temp_min\":8.6,\n            \"temp_max\":8.7,\n            \"pressure\":1015,\n            \"sea_level\":1015,\n            \"grnd_level\":1014,\n            \"humidity\":93,\n            \"temp_kf\":0.1\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":54\n         },\n         \"wind\":{\n            \"speed\":4.86,\n            \"deg\":242\n         },\n         \"visibility\":10000,\n         \"pop\":0.24,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-16 21:00:00\"\n      },\n      {\n         \"dt\":1605571200,\n         \"main\":{\n            \"temp\":7.72,\n            \"feels_like\":3.65,\n            \"temp_min\":7.7,\n            \"temp_max\":7.72,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1016,\n            \"humidity\":93,\n            \"temp_kf\":0.02\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":56\n         },\n         \"wind\":{\n            \"speed\":4.71,\n            \"deg\":230\n         },\n         \"visibility\":10000,\n         \"pop\":0.18,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 00:00:00\"\n      },\n      {\n         \"dt\":1605582000,\n         \"main\":{\n            \"temp\":6.84,\n            \"feels_like\":2.59,\n            \"temp_min\":6.84,\n            \"temp_max\":6.84,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1017,\n            \"humidity\":91,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":84\n         },\n         \"wind\":{\n            \"speed\":4.6,\n            \"deg\":224\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 03:00:00\"\n      },\n      {\n         \"dt\":1605592800,\n         \"main\":{\n            \"temp\":7.93,\n            \"feels_like\":3.3,\n            \"temp_min\":7.93,\n            \"temp_max\":7.93,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1017,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":92\n         },\n         \"wind\":{\n            \"speed\":5.37,\n            \"deg\":211\n         },\n         \"visibility\":10000,\n         \"pop\":0.2,\n         \"rain\":{\n            \"3h\":0.16\n         },\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 06:00:00\"\n      },\n      {\n         \"dt\":1605603600,\n         \"main\":{\n            \"temp\":9.62,\n            \"feels_like\":4.64,\n            \"temp_min\":9.62,\n            \"temp_max\":9.62,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1017,\n            \"humidity\":92,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.59,\n            \"deg\":222\n         },\n         \"visibility\":10000,\n         \"pop\":0.83,\n         \"rain\":{\n            \"3h\":0.5\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 09:00:00\"\n      },\n      {\n         \"dt\":1605614400,\n         \"main\":{\n            \"temp\":11.25,\n            \"feels_like\":6.86,\n            \"temp_min\":11.25,\n            \"temp_max\":11.25,\n            \"pressure\":1020,\n            \"sea_level\":1020,\n            \"grnd_level\":1018,\n            \"humidity\":91,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":500,\n               \"main\":\"Rain\",\n               \"description\":\"Leichter Regen\",\n               \"icon\":\"10d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.27,\n            \"deg\":235\n         },\n         \"visibility\":10000,\n         \"pop\":0.74,\n         \"rain\":{\n            \"3h\":0.12\n         },\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 12:00:00\"\n      },\n      {\n         \"dt\":1605625200,\n         \"main\":{\n            \"temp\":11.38,\n            \"feels_like\":7.16,\n            \"temp_min\":11.38,\n            \"temp_max\":11.38,\n            \"pressure\":1021,\n            \"sea_level\":1021,\n            \"grnd_level\":1019,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":5.95,\n            \"deg\":232\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-17 15:00:00\"\n      },\n      {\n         \"dt\":1605636000,\n         \"main\":{\n            \"temp\":11.31,\n            \"feels_like\":7.17,\n            \"temp_min\":11.31,\n            \"temp_max\":11.31,\n            \"pressure\":1022,\n            \"sea_level\":1022,\n            \"grnd_level\":1020,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":5.81,\n            \"deg\":231\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 18:00:00\"\n      },\n      {\n         \"dt\":1605646800,\n         \"main\":{\n            \"temp\":11.25,\n            \"feels_like\":6.76,\n            \"temp_min\":11.25,\n            \"temp_max\":11.25,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1021,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":100\n         },\n         \"wind\":{\n            \"speed\":6.23,\n            \"deg\":235\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-17 21:00:00\"\n      },\n      {\n         \"dt\":1605657600,\n         \"main\":{\n            \"temp\":10.41,\n            \"feels_like\":6.27,\n            \"temp_min\":10.41,\n            \"temp_max\":10.41,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":89,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":98\n         },\n         \"wind\":{\n            \"speed\":5.48,\n            \"deg\":236\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 00:00:00\"\n      },\n      {\n         \"dt\":1605668400,\n         \"main\":{\n            \"temp\":10.34,\n            \"feels_like\":6.61,\n            \"temp_min\":10.34,\n            \"temp_max\":10.34,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":97\n         },\n         \"wind\":{\n            \"speed\":4.82,\n            \"deg\":226\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 03:00:00\"\n      },\n      {\n         \"dt\":1605679200,\n         \"main\":{\n            \"temp\":9.63,\n            \"feels_like\":5.49,\n            \"temp_min\":9.63,\n            \"temp_max\":9.63,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1022,\n            \"humidity\":87,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":97\n         },\n         \"wind\":{\n            \"speed\":5.1,\n            \"deg\":219\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 06:00:00\"\n      },\n      {\n         \"dt\":1605690000,\n         \"main\":{\n            \"temp\":9.53,\n            \"feels_like\":5.3,\n            \"temp_min\":9.53,\n            \"temp_max\":9.53,\n            \"pressure\":1023,\n            \"sea_level\":1023,\n            \"grnd_level\":1021,\n            \"humidity\":84,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":40\n         },\n         \"wind\":{\n            \"speed\":5.04,\n            \"deg\":211\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 09:00:00\"\n      },\n      {\n         \"dt\":1605700800,\n         \"main\":{\n            \"temp\":11.17,\n            \"feels_like\":7.28,\n            \"temp_min\":11.17,\n            \"temp_max\":11.17,\n            \"pressure\":1022,\n            \"sea_level\":1022,\n            \"grnd_level\":1020,\n            \"humidity\":78,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":803,\n               \"main\":\"Clouds\",\n               \"description\":\"Überwiegend bewölkt\",\n               \"icon\":\"04d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":65\n         },\n         \"wind\":{\n            \"speed\":4.72,\n            \"deg\":206\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 12:00:00\"\n      },\n      {\n         \"dt\":1605711600,\n         \"main\":{\n            \"temp\":9.51,\n            \"feels_like\":5.95,\n            \"temp_min\":9.51,\n            \"temp_max\":9.51,\n            \"pressure\":1019,\n            \"sea_level\":1019,\n            \"grnd_level\":1018,\n            \"humidity\":84,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03d\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":33\n         },\n         \"wind\":{\n            \"speed\":4.07,\n            \"deg\":186\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"d\"\n         },\n         \"dt_txt\":\"2020-11-18 15:00:00\"\n      },\n      {\n         \"dt\":1605722400,\n         \"main\":{\n            \"temp\":8.52,\n            \"feels_like\":4.62,\n            \"temp_min\":8.52,\n            \"temp_max\":8.52,\n            \"pressure\":1018,\n            \"sea_level\":1018,\n            \"grnd_level\":1016,\n            \"humidity\":88,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":802,\n               \"main\":\"Clouds\",\n               \"description\":\"Mäßig bewölkt\",\n               \"icon\":\"03n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":31\n         },\n         \"wind\":{\n            \"speed\":4.46,\n            \"deg\":186\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 18:00:00\"\n      },\n      {\n         \"dt\":1605733200,\n         \"main\":{\n            \"temp\":8.94,\n            \"feels_like\":4.58,\n            \"temp_min\":8.94,\n            \"temp_max\":8.94,\n            \"pressure\":1016,\n            \"sea_level\":1016,\n            \"grnd_level\":1014,\n            \"humidity\":83,\n            \"temp_kf\":0\n         },\n         \"weather\":[\n            {\n               \"id\":804,\n               \"main\":\"Clouds\",\n               \"description\":\"Bedeckt\",\n               \"icon\":\"04n\"\n            }\n         ],\n         \"clouds\":{\n            \"all\":99\n         },\n         \"wind\":{\n            \"speed\":4.98,\n            \"deg\":191\n         },\n         \"visibility\":10000,\n         \"pop\":0,\n         \"sys\":{\n            \"pod\":\"n\"\n         },\n         \"dt_txt\":\"2020-11-18 21:00:00\"\n      }\n   ],\n   \"title\":\"5 day Forecast\"\n};\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":460,"wires":[["b6bfcb33.c51c98"]]},{"id":"1cddf5d5.9564da","type":"inject","z":"f1c3712a.51632","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":170,"y":460,"wires":[["8d77a080.e88d"]]},{"id":"4f0921bd.f76f5","type":"function","z":"f1c3712a.51632","name":"convert time","func":"\nif (!msg.timestamp) \n{\n    msg.timestamp = Math.round(+new Date());\n}\n\nconst now = new Date(msg.timestamp);\nconst days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];\nconst months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];\nconst day = days[now.getDay()];\nconst month = months[now.getMonth()];\n\nvar timeString = \"\";\ntimeString += day + \", \"\ntimeString += now.getDate() + \". \"\ntimeString += month + \" - \"\ntimeString += now.toLocaleTimeString(\"de-DE\", { hour12: false});\ntimeString = timeString.substring(0, timeString.length - 3);\n\nmsg.payload = timeString;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":240,"wires":[["dc614f67.6b925"]]},{"id":"20cba0e7.1def4","type":"inject","z":"f1c3712a.51632","name":"every minute","repeat":"60","crontab":"","once":true,"onceDelay":"","topic":"","payload":"","payloadType":"date","x":140,"y":240,"wires":[["4f0921bd.f76f5"]]},{"id":"dc614f67.6b925","type":"ui_text","z":"f1c3712a.51632","group":"109b0b40.54c0b5","order":1,"width":"13","height":"1","name":"Date & Time","label":"","format":"{{msg.payload}}","layout":"row-center","x":490,"y":240,"wires":[]},{"id":"cfe72466.cb83d8","type":"ui_button","z":"f1c3712a.51632","name":"","group":"109b0b40.54c0b5","order":2,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-refresh","payload":"true","payloadType":"bool","topic":"","x":230,"y":340,"wires":[["8d77a080.e88d"]]},{"id":"2792f669.01963a","type":"comment","z":"f1c3712a.51632","name":"Refresh","info":"","x":110,"y":340,"wires":[]},{"id":"aece168d.c89348","type":"comment","z":"f1c3712a.51632","name":"chartjs.org","info":"https://www.chartjs.org/samples/latest/charts/line/basic.html","x":860,"y":500,"wires":[]},{"id":"6b642f61.e2107","type":"debug","z":"f1c3712a.51632","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":690,"y":540,"wires":[]},{"id":"ab4d4b5e.528e18","type":"ui_template","z":"f1c3712a.51632","group":"109b0b40.54c0b5","name":"Title","order":3,"width":"14","height":"1","format":"<style>\n    #charttitle{\n        text-align:center;\n    }\n</style>\n<div id='charttitle'>CHART TITLE</div>\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":420,"wires":[[]]},{"id":"a605595c.ac6378","type":"ui_group","name":"Default","tab":"2ecb90e3.af7a5","order":1,"disp":true,"width":"6","collapse":false},{"id":"109b0b40.54c0b5","type":"ui_group","name":"body","tab":"24b8f2c0.76ab8e","order":2,"disp":false,"width":"14","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","name":"DASH","icon":"iconify-mdi:car-battery 4em","order":1,"disabled":false,"hidden":false},{"id":"24b8f2c0.76ab8e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

1 Like

api.iconify.design ... looks great!

I was just playing with some colors ... for my little daughter :smiling_face_with_three_hearts:
(rain + sun = rainbow :grin:)

2 Likes

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