Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Javscript loadJSON in for loop does crazy things

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