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)'); var windChart = new Chart(windv, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wind', data: [3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,3], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 1, max: 6, callback: function(label, index, labels) { return label+' bft'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' bft'; } } }, } }); var windknpChart = new Chart(windknp, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wind', data: [10,10,8,8,8,8,8,8,10,10,10,10,8,10,12,12,14,12,12,12,12,12,14,12,12,10], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 1, max: 16, callback: function(label, index, labels) { return label+' knp'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' knp'; } } }, } }); var windkmhChart = new Chart(windkmh, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wind', data: [18,18,14.4,14.4,14.4,14.4,14.4,14.4,18,18,18,18,14.4,18,21.6,21.6,25.2,21.6,21.6,21.6,21.6,21.6,25.2,21.6,21.6,18], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 1, max: 27.2, callback: function(label, index, labels) { return label+' km/h'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' km/h'; } } }, } }); var windmsChart = new Chart(windms, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wind', data: [5,5,4,4,4,4,4,4,5,5,5,5,4,5,6,6,7,6,6,6,6,6,7,6,6,5], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 1, max: 9, callback: function(label, index, labels) { return label+' m/s'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' m/s'; } } }, } }); var luchtdChart = new Chart(luchtdruk, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'luchtdruk', data: [1025.4,1024.9,1024.3,1023.8,1023.3,1022.9,1022.4,1021.9,1021.4,1020.8,1020.3,1019.9,1019.2,1018.5,1018,1017.7,1017.5,1017.4,1017.2,1017.1,1017,1016.7,1016.3,1015.9,1015.6,1015.2], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 1010, max: 1030, callback: function(label, index, labels) { return label+' hPa'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' hPa'; } } }, } }); var tempChart = new Chart(temperatuur, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'temperatuur', data: [24,24,23,22,21,20,19,19,19,19,19,18,18,18,18,19,20,20,20,19,19,19,19,19,19,18], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 17, max: 26, callback: function(label, index, labels) { return label+' ºC'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' ºC'; } } }, } }); var wolkenChart = new Chart(wolken, { type: 'bar', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wolken', data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,83,100,100,100,100,100,100,100,100], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(label, index, labels) { return label+' %'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' %'; } } }, } }); var mwolkenChart = new Chart(mwolken, { type: 'bar', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wolken', data: [0,0,0,0,0,0,0,0,0,0,8,35,70,3,62,3,100,100,100,100,100,100,100,100,100,100], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(label, index, labels) { return label+' %'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' %'; } } }, } }); var hwolkenChart = new Chart(hwolken, { type: 'bar', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'wolken', data: [0,0,0,0,0,87,100,100,100,100,100,100,100,99,100,83,47,0,0,0,0,3,100,100,100,100], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(label, index, labels) { return label+' %'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' %'; } } }, } }); var neerslagChart = new Chart(neerslag, { type: 'bar', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], 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: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, max: 2, callback: function(label, index, labels) { return label+' mm'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' mm'; } } }, } }); var stralingChart = new Chart(straling, { type: 'bar', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'Global radiation', data: [214,161,105,52,12,0,0,0,0,0,0,0,1,20,34,88,149,60,73,14,10,16,23,12,7,5], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, max: 219, callback: function(label, index, labels) { return label+' W/m2'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' W/m2'; } } }, } }); var zichtChart = new Chart(zicht, { type: 'line', data: { labels: ["17","18","19","20","21","22","23","00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18"], datasets: [{ label: 'zicht', data: [38937,37406,35365,34595,30423,24015,20828,22962,28103,30995,29141,27156,22220,19560,50000,23248,28310,27423,23506,18380,15715,16356,15909,17144,14586,11086], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, max: 55000, callback: function(label, index, labels) { return label+' m'; } } }] }, tooltips: { enabled: true, mode: 'single', callbacks: { title: function(tooltipItems, data) { return tooltipItems[0].xLabel + ' uur'; }, label: function(tooltipItems, data) { return tooltipItems.yLabel + ' m'; } } }, } });