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(data, 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wind', data: [2,2,1,2,2,2,2,1,2,2,2,2,2,2,1,1,2,2,2,4,4,4,3,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,2,1,2,2,2,2,1,2,2,2,2,2,2,1,1,2,2,2,4,4,4,3,2], 0, 6), 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wind', data: [4,4,2,6,6,4,4,2,4,6,4,4,4,4,2,2,4,6,6,12,12,12,10,6], 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([4,4,2,6,6,4,4,2,4,6,4,4,4,4,2,2,4,6,6,12,12,12,10,6], 0, 14), 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wind', data: [7.2,7.2,3.6,10.8,10.8,7.2,7.2,3.6,7.2,10.8,7.2,7.2,7.2,7.2,3.6,3.6,7.2,10.8,10.8,21.6,21.6,21.6,18,10.8], 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([7.2,7.2,3.6,10.8,10.8,7.2,7.2,3.6,7.2,10.8,7.2,7.2,7.2,7.2,3.6,3.6,7.2,10.8,10.8,21.6,21.6,21.6,18,10.8], 0, 23.6), 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wind', data: [2,2,1,3,3,2,2,1,2,3,2,2,2,2,1,1,2,3,3,6,6,6,5,3], 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,2,1,3,3,2,2,1,2,3,2,2,2,2,1,1,2,3,3,6,6,6,5,3], 0, 8), 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'luchtdruk', data: [1003.9,1004.5,1004.5,1004.8,1005.4,1005.7,1005.7,1005.7,1005.5,1005.4,1005.3,1005.3,1005.4,1005.4,1005.2,1004.9,1004.7,1004.3,1003.6,1002.9,1002.8,1002.4,1003.1,1003.3], 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.9,1004.5,1004.5,1004.8,1005.4,1005.7,1005.7,1005.7,1005.5,1005.4,1005.3,1005.3,1005.4,1005.4,1005.2,1004.9,1004.7,1004.3,1003.6,1002.9,1002.8,1002.4,1003.1,1003.3], 997, 1011), 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'temperatuur', data: [28,25,23,22,21,20,19,18,18,18,18,18,18,19,20,21,22,24,25,26,24,22,20,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([28,25,23,22,21,20,19,18,18,18,18,18,18,19,20,21,22,24,25,26,24,22,20,19], 17, 30), 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wolken', data: [0,0,0,100,98,0,0,0,0,0,0,0,0,0,0,0,1,96,55,0,0,100,8,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 mwolkenChart = new Chart(mwolken, { type: 'bar', data: { labels: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wolken', data: [100,90,0,0,0,0,0,0,0,0,0,99,100,75,99,0,1,7,0,98,100,100,90,100], 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'wolken', data: [100,100,100,100,2,0,0,0,98,100,100,100,100,72,91,0,0,0,5,100,100,100,100,100], 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'neerslag', data: [0,1.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.4,5.4,7,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 + ' 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'Global radiation', data: [67,21,13,3,0,0,0,0,0,0,0,0,4,19,49,114,217,243,215,229,107,8,2,28], 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 + ' 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: ["16","17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"], datasets: [{ label: 'zicht', data: [30998,8756,8343,8216,6867,5790,4520,3195,2653,3662,4260,5220,6436,7000,10893,15085,18608,20554,23107,15026,3348,2749,17225,8328], 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'; } } } } } });