# \[SOLVED\] Combine chart lines and images

**URL:** https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022
**Category:** Dashboard
**Created:** [16 November 2020 19:03 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022 "2020-11-16T19:03:42Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![dfens](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dfens/32/32056_2.png) [@dfens](https://discourse.nodered.org/u/dfens)
#### Post date: [16 November 2020 19:03 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/1 "2020-11-16T19:03:42Z")

</div>

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 ...

 ![avansert_meteogram](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3bcc06354d788ec5938f2e3eebf20db6d71b72be.png)  
(found: [http://www.meteoxativa.es/](http://www.meteoxativa.es/))

The base is [this chart](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/2) from @hotNipi, the weather data comes from OpenWeatherMap and the weather icons from Paul Reed.

```auto
[{"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}]

```

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [16 November 2020 21:24 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/2 "2020-11-16T21:24:54Z")

</div>

As I was already playing with charts ...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c8dd27eb10120cb3dc9d62cde2c88a3839edc53a.png)

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 ..

```auto
[{"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,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\"\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}]

```

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [17 November 2020 09:35 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/3 "2020-11-17T09:35:02Z")

</div>

Tried to show images with your flow.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44931b85ef08a02e421b30706392df1254cf48b2.png)

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. 🙂

```auto
[{"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 😛

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/63990521650384350a9926d558aef948bdcb7e3f.png)

---

<div class="post-metadata">

### Author: ![dfens](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dfens/32/32056_2.png) [@dfens](https://discourse.nodered.org/u/dfens)
#### Post date: [17 November 2020 15:41 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/4 "2020-11-17T15:41:36Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [20 November 2020 12:52 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/5 "2020-11-20T12:52:16Z")

</div>

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

```auto
[{"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}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3bc8123307befcd85f4845738c770f22f9f781d3.png)

---

<div class="post-metadata">

### Author: ![dfens](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dfens/32/32056_2.png) [@dfens](https://discourse.nodered.org/u/dfens)
#### Post date: [20 November 2020 13:27 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/6 "2020-11-20T13:27:49Z")

</div>

api.iconify.design ... looks great!

I was just playing with some colors ... for my little daughter 🥰  
(rain + sun = rainbow 😁)

 ![color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/2664072491c2144aa8eb7d5d055525233749a48b.png)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 December 2020 13:27 UTC](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/7 "2020-12-04T13:27:51Z")

</div>

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