I have a little problem with my code. I hope someone can help me because the chart is every time different. I think i'ts because javsscript is ascync and it's not waiting in the for loop for the loadJSON to finish at the bottom of the code. And before someone says that I have different json files. It's not true! Sorry for my bad English. Thanks for everything!
var path = "../Get_Data/Data/";
var D = new Date();
var date;
averageData = new Array;
Finished = new Array;
var average;
var wait;
var config = {
type: 'line',
data: {
labels: [D.getDate()-5, D.getDate()-4, D.getDate()-3, D.getDate()-2, 'Gestern', 'Heute'],
datasets: [{
label: 'Temperatur',
backgroundColor: window.chartColors.yellow,
borderColor: window.chartColors.yellow,
data: Finished,
fill: false,
}],
},
options: {
responsive: true,
title: {
display: true,
text: 'Temperatur'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Tag'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'C'
},
ticks: {
suggestedMin: -30,
suggestedMax: 30,
beginAtZero: true
}
}]
}
}
};
function getDaysofMonth(month) {
if (month == 0) {
return 31;
} else if (month == 1) {
return 28;
} else if (month == 2) {
return 31;
} else if (month == 3) {
return 30;
} else if (month == 4) {
return 31;
} else if (month == 5) {
return 30;
} else if (month == 6) {
return 31;
} else if (month == 7) {
return 31;
} else if (month == 8) {
return 30;
} else if (month == 9) {
return 31;
} else if (month == 10) {
return 30;
} else if (month == 11) {
return 31;
}
}
function GetFileName(i) {
date = D.getDate()-i + '_' + int(D.getMonth() + 1) + '_' + D.getFullYear();
if (D.getDate()-i <= 9) {
date = '0' + date;
}
if (D.getDate() - i <= 0) {
date = getDaysofMonth(D.getMonth()-1) - (i - D.getDate()) + '_' + D.getMonth() + '_' + D.getFullYear();
}
if (D.getDate() - i <= 0 & D.getMonth() == 0) {
date = getDaysofMonth(D.getMonth()-1) - (i - D.getDate()) + '_' + 11 + '_' + (D.getFullYear()-1);
}
return(date)
};
function workwithit(Data) {
for (key in Data) {
if (key != 'druck' & key != 'feucht') {
if (key == 'temp') {
averageData.push(Data[key]);
} else {
averageData.push(Data[key]['temp']);
}
}
}
for (i = 0;i < averageData.length;i++) {
average = average + eval(averageData[i]);
}
average = average / averageData.length;
Finished.push(int(average));
if (wait == 5) {
Finished.reverse();
console.log('reversed');
}
if (wait == 0) {
document.getElementById("h1").innerHTML = 'Jetzt: ' + daten['temp'] + ' C°';
}
averageData = new Array;
average = 0;
wait++;
window.myLine.update();
};
function setup() {
for (x = 0;x <= 5;x++) {
loadJSON(path + GetFileName(x) + '.json', workwithit);
}
console.log(Finished);
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
Here are all files. You have to run it on a localhost. When I run it, is the chart every time diffrent!
https://www.mediafire.com/file/yshm7uxvkksm4sb/Data.zip/file
PS: You have to update the json files in Get_Data/Data to your dates. And loadJSON is from p5.js and the chart from chart.js.
Comments
Post a Comment