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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wind', data: [2,3,2,2,2,3,3,3,3,3,3,3,3,3,2,3,3,2,3,3,3,3,3,3,4,4], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wind', data: [6,10,6,6,6,8,8,8,8,8,10,10,10,10,6,10,10,6,8,8,10,8,8,10,14,12], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wind', data: [10.8,18,10.8,10.8,10.8,14.4,14.4,14.4,14.4,14.4,18,18,18,18,10.8,18,18,10.8,14.4,14.4,18,14.4,14.4,18,25.2,21.6], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wind', data: [3,5,3,3,3,4,4,4,4,4,5,5,5,5,3,5,5,3,4,4,5,4,4,5,7,6], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'luchtdruk', data: [1017.3,1017.7,1017.7,1017.8,1017.8,1017.8,1018,1018.2,1018.3,1018.4,1018.2,1017.9,1017.6,1017.3,1017.2,1017.2,1017.1,1016.9,1016.6,1016.5,1016.4,1016.2,1015.7,1015,1014.2,1013.4], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 1008, max: 1023, 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'temperatuur', data: [19,19,19,18,18,18,19,20,21,22,23,23,24,24,23,22,22,21,21,20,20,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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wolken', data: [3,10,1,54,5,0,0,0,7,48,16,1,0,0,0,0,0,0,0,0,0,5,2,0,0,5], 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wolken', data: [100,100,90,5,99,1,100,83,20,27,78,61,73,100,5,60,100,45,100,68,88,69,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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'wolken', data: [0,0,0,0,0,0,0,0,0,0,0,0,1,4,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: 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'Global radiation', data: [0,0,0,1,19,41,101,111,217,227,234,268,225,194,73,157,79,44,32,2,0,0,0,0,0,0], backgroundColor: gradient, borderColor: gradient, borderWidth: 1 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: false, min: 0, max: 273, 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: ["02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03"], datasets: [{ label: 'zicht', data: [23144,24370,27360,25763,21889,22936,26123,26598,32798,35339,36624,38277,38726,39061,31766,31120,34774,30838,31447,29670,28303,28272,26679,26533,27473,24547], 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'; } } }, } });