plot.js

function randomValues(count, min, max) {
    const delta = max - min;
    return Array.from({ length: count }).map(() => Math.random() * delta + min);
}

(async function main() {
    // 1000 buscas

    const promises = [];
    const field_labels = []
    for (let i = 1 ; i <= 100; ++i) {
        promises.push(fetch_medias(`saidas/output${i}`));
        field_labels.push(i*10);
    }

    let dados = await Promise.all(promises);
    
    const means = [];

    console.log(dados);
    for (let i = 0 ; i < 100; ++i) {
        let sum = 0;
        for (let j = 1; j < dados[i].dados.length; ++j) {
            sum += dados[i].dados[j];
        }
        means.push(sum / (dados[i].dados.length - 1)); 
    }

    console.log(means);

    new Chart(document.getElementById('canvas').getContext('2d'), {
        type: 'line',
        data: {
            labels: field_labels,
            datasets: [{
                label: 'Mean of Running Time Measuraments',
                data: means,
                backgroundColor: 'rgba(200, 200, 120, 0.5)'
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Mean of Running Time Measuraments'
            },
            scales: {
                yAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: 'Running Time (ms)'
                        }
                    }
                ],
                xAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: 'Number of fields in shema'
                        }
                    }
                ]
            }
        }  
    })

    const groups = []

    for (let i=0; i<100; i++) {
        if (i % 10 === 0) groups.push([]);
        groups[Math.floor(i / 10)].push(means[i]);
    }

    console.log(groups);

    new Chart(document.getElementById('canvas2').getContext('2d'), {
        type: 'boxplot',
        data: {
            labels: ["10-100", "110-200", "210-300", "310-400", "410-500", "510-600", "610-700", "710-800", "810-900", "910-1000"],
            datasets: [{
                label: 'Box plots of Running times',
                data: groups,
                backgroundColor: 'rgba(10, 70, 220, 0.5)'
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Box plots of Running times'
            },
            scales: {
                yAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: 'Running Time (ms)'
                        }
                    }
                ],
                xAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: 'Number of fields in shema'
                        }
                    }
                ]
            }
        }
    })

}());

async function fetch_medias(fileName) {
    let data = await (fetch(fileName).then(r => r.json()));
    return data;
}

function makeDataSets(dados) {
    let datasets = [];
    let media = [];
    let mediana = [];
    dados.forEach(element => {
        element.dados.forEach(e => {
            media.push(e.mean);
            mediana.push(e.median);
        });
    });
    datasets.push({
        label: 'médias',
        data: media
    });
    datasets.push({
        label: 'medianas',
        data: mediana
    });
    return datasets;
}