Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

devkon98's avatar

How to get the other values from array in for loop

Hello i have this code that gives labels to a graphic, i get the labels from Json response the code works but i only get 1 value while the Json gives me 5 values. This is my code:

async function outlayGraph(label) {

    const context = document.getElementById('outlayGraph').getContext('2d');

    let data = 0;
    let configuration = 0;
    for(i in label) {
        const item = label[i];
        allCurrency.push(item.name);

        data = {
            labels: created_date,
            datasets: [{
                label: allCurrency[i], //here is the problem if i add a number the value changes but i keep getting the last one only
                borderColor: 'rgb(255, 0, 0)',
                data: albanianLek
            }]
        };

         configuration = {

            type: 'line',

            data,

            options: {
                tooltips: {
                    mode: 'index'
                }
            }
        };
    }
        if (charts) {
            charts.data.labels = created_date;
            charts.data.datasets[0].data = albanianLek;
            charts.data.datasets[1].data = britishPound;
            charts.data.datasets[2].data = americanDollar;
            charts.data.datasets[3].data = euro;
            charts.update();
        } else {
            charts = new Chart(context, configuration);
        }
}

I want to recreate this code but dynamic this one is static:

async function cashReceivedGraph() {

    const ctx = document.getElementById('cashReceivedGraph').getContext('2d');

    const data = {
        labels: cashCreated_date,
        datasets: [{
            label: 'ALL',
            borderColor: 'rgb(255, 0, 0)',
            data: cashAlbanianLek
        },
            {
                label: 'GBP',
                borderColor: 'rgb(255, 0, 255)',
                data: cashBritishPound
            },

            {
                label: 'USD',
                borderColor: 'rgb(0, 153, 0)',
                data: cashAmericanDollar
            },

            {
                label: 'EUR',
                borderColor: 'rgb(0, 0, 255)',
                data: cashEuro
            },

        ]
    };

    const config = {

        type: 'line',

        data,

        options: {
            tooltips: {
                mode: 'index'
            }
        }
    };

    if (chart) {
        chart.data.labels = cashCreated_date;
        chart.data.datasets[0].data = cashAlbanianLek;
        chart.data.datasets[1].data = cashBritishPound;
        chart.data.datasets[2].data = cashAmericanDollar;
        chart.data.datasets[3].data = cashEuro;
        chart.update();
    } else {
        chart = new Chart(ctx, config);
    }
}
0 likes
2 replies
LaryAI's avatar
Level 58

You can use a for loop to iterate through the label array and push each item's name into the allCurrency array. Then, you can use the allCurrency array to set the label property of the datasets object in the data variable.

async function outlayGraph(label) {

    const context = document.getElementById('outlayGraph').getContext('2d');

    let data = 0;
    let configuration = 0;
    let allCurrency = [];
    for(i in label) {
        const item = label[i];
        allCurrency.push(item.name);
    }

    data = {
        labels: created_date,
        datasets: [{
            label: allCurrency[i],
            borderColor: 'rgb(255, 0, 0)',
            data: albanianLek
        }]
    };

     configuration = {

        type: 'line',

        data,

        options: {
            tooltips: {
                mode: 'index'
            }
        }
    };

    if (charts) {
        charts.data.labels = created_date;
        charts.data.datasets[0].data = albanianLek;
        charts.data.datasets[1].data = britishPound;
        charts.data.datasets[2].data = americanDollar;
        charts.data.datasets[3].data = euro;
        charts.update();
    } else {
        charts = new Chart(context, configuration);
    }
}

Please or to participate in this conversation.