var windv = document.getElementById('windc').getContext('2d'); var windkmh = document.getElementById('windkmh').getContext('2d'); var windms = document.getElementById('windms').getContext('2d'); var windknp = document.getElementById('windknp').getContext('2d'); var luchtdruk = document.getElementById('luchtdruk').getContext('2d'); var temperatuur = document.getElementById('temperatuur').getContext('2d'); var wolken = document.getElementById('bewolking').getContext('2d'); var mwolken = document.getElementById('mbewolking').getContext('2d'); var hwolken = document.getElementById('hbewolking').getContext('2d'); var neerslag = document.getElementById('neerslag').getContext('2d'); var straling = document.getElementById('straling').getContext('2d'); var zicht = document.getElementById('zicht').getContext('2d'); // $("#windr").html("test"); document.getElementById("windr").innerHTML=""; var gradient = windv.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(0,111,174,0.8)'); gradient.addColorStop(1, 'rgba(21,31,38,0.5)'); // Functie om min/max waarden te berekenen met 25% marge function calculateYAxisRange(minValue, maxValue) { const range = maxValue - minValue; const margin = range * 0.25; return { min: Math.max(0, minValue - margin), // Nooit onder nul max: maxValue + margin }; } var windChart = new Chart(windv, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wind', data: [5,5,5,5,4,4,4,4,4,4,4,4,5,4,4,4,4,4,4,4,4,4,4,4,4,4], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(2, 7), ticks: { callback: function(value, index, ticks) { return value + ' bft'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' bft'; } } } } } }); var windknpChart = new Chart(windknp, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wind', data: [16,16,16,16,14,14,14,14,14,14,14,14,16,14,14,14,14,14,12,14,14,14,14,14,14,14], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(2, 18), ticks: { callback: function(value, index, ticks) { return value + ' knp'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' knp'; } } } } } }); var windkmhChart = new Chart(windkmh, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wind', data: [28.8,28.8,28.8,28.8,25.2,25.2,25.2,25.2,25.2,25.2,25.2,25.2,28.8,25.2,25.2,25.2,25.2,25.2,21.6,25.2,25.2,25.2,25.2,25.2,25.2,25.2], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(2, 30.8), ticks: { callback: function(value, index, ticks) { return value + ' km/h'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' km/h'; } } } } } }); var windmsChart = new Chart(windms, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wind', data: [8,8,8,8,7,7,7,7,7,7,7,7,8,7,7,7,7,7,6,7,7,7,7,7,7,7], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(2, 10), ticks: { callback: function(value, index, ticks) { return value + ' m/s'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' m/s'; } } } } } }); var luchtdChart = new Chart(luchtdruk, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'luchtdruk', data: [1007.5,1007.8,1008.1,1008.3,1008.5,1008.8,1009.3,1009.7,1010,1010.2,1010.3,1010.1,1009.9,1009.8,1009.8,1010,1010.1,1010.3,1010.5,1010.8,1011,1011.1,1011.2,1011.2,1011.1,1011.1], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(1003, 1016), ticks: { callback: function(value, index, ticks) { return value + ' hPa'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' hPa'; } } } } } }); var tempChart = new Chart(temperatuur, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'temperatuur', data: [20,20,20,20,20,19,19,19,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,19,19,19], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(17, 22), ticks: { callback: function(value, index, ticks) { return value + ' ºC'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' ºC'; } } } } } }); var wolkenChart = new Chart(wolken, { type: 'bar', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wolken', data: [43,17,98,36,91,100,100,70,96,100,100,100,100,100,100,100,63,1,36,100,92,100,92,100,73,42], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1 }] }, options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value, index, ticks) { return value + ' %'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' %'; } } } } } }); var mwolkenChart = new Chart(mwolken, { type: 'bar', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wolken', data: [0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,91,45,0,0,0,0], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1 }] }, options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value, index, ticks) { return value + ' %'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' %'; } } } } } }); var hwolkenChart = new Chart(hwolken, { type: 'bar', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'wolken', data: [0,0,0,0,0,0,0,57,25,17,56,0,0,13,88,43,86,95,26,0,0,0,0,10,2,11], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1 }] }, options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value, index, ticks) { return value + ' %'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' %'; } } } } } }); var neerslagChart = new Chart(neerslag, { type: 'bar', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'neerslag', data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1 }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(0, 2), ticks: { callback: function(value, index, ticks) { return value + ' mm'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' mm'; } } } } } }); var stralingChart = new Chart(straling, { type: 'bar', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'Global radiation', data: [181,86,117,86,78,23,1,0,0,0,0,0,0,0,0,4,51,100,155,174,77,101,82,218,81,209], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1 }] }, options: { plugins: { legend: { display: false } }, scales: { y: { ...calculateYAxisRange(0, 223), ticks: { callback: function(value, index, ticks) { return value + ' W/m2'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' W/m2'; } } } } } }); var zichtChart = new Chart(zicht, { type: 'line', data: { labels: ["15","16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"], datasets: [{ label: 'zicht', data: [35989,31129,30759,31492,32969,32197,28422,27282,26380,24171,28749,31810,34097,32717,35923,39101,41580,41917,47124,42055,35143,32623,36966,43023,43315,41915], backgroundColor: 'rgba(0,111,174,0.8)', borderColor: 'rgba(0,111,174,1)', borderWidth: 1, fill: true }] }, options: { plugins: { legend: { display: false } }, scales: { y: { min: 0, max: 55000, ticks: { callback: function(value, index, ticks) { return value + ' m'; } } } }, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, callbacks: { title: function(tooltipItems) { return tooltipItems[0].label + ' uur'; }, label: function(tooltipItem) { return tooltipItem.raw + ' m'; } } } } } });