Problem not showing proper datasets in dropdown list function

Question

please help me with my issue regarding the code, when I clicked the dropdown list, it should show the datas per datasets but when i click other elements. It shows wrong value, the value should be 200 not 2.5. Thank you.

    dataObjects.forEach(o => {
                const opt = document.createElement('option');
                opt.value = o.name;
                opt.appendChild(document.createTextNode(o.name));
                document.getElementById('operator').appendChild(opt);
                console.log(opt)
            });
        function refreshChart(name) {
            firstChart.data.labels = [name];
            if (name == 'All') {
                firstChart.data.labels = dataObjects.map(o => o.name),
                    firstChart.data.datasets[0].data = dataObjects.map(o => o.rate_per_liters);
            } else {
                firstChart.data.labels = [name];
                    firstChart.data.datasets[0].data = dataObjects.find(o => o.name == name).rate_per_liters;
                    // firstChart.data.datasets[0].data = dataObjects.get(o => o.name == name).push(rate_per_liters);
            }
            console.log(name)
            firstChart.update();
            firstChart.render();
        }

here is my chart code

    dataObjects = [
            { name: '10', rate_per_liters: '200'},
            { name: '20', rate_per_liters: '200'},
            { name: '30', rate_per_liters: '200'},
            { name: '40', rate_per_liters: '200'},
            { name: '50', rate_per_liters: '200'},
            { name: '60', rate_per_liters: '200'}
        ];
        
        // Data1 setup
        var ctx = document.getElementById('firstChart');
        
        const firstChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: dataObjects.map(o => o.name),
                datasets: [{
                    fill: false,
                    label: 'System Requirements per L/s',
                    data: dataObjects.map(o => o.rate_per_liters),
                    backgroundColor: 'orange',
                    borderColor: 'orange',
                    borderWidth: 1,
                    yAxisID: 'kPa',
                    xAxisID: 'Lits',
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        id: "kPa",
                        ticks: {
                            beginAtZero: true,  
                            stepSize: 50
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'kPa'
                        }
                    }],
                    xAxes: [{
                        id: "Lits",
                        scaleLabel: {
                            display: true,
                            labelString: 'Liter per seconds'
                        }

                    }]
                        },
                    title: {
                        display: false,
                        text: "SAMPLE!"
                        },
                        legend: {
                        display: false,
                        position: 'bottom',
                        labels: {
                            fontColor: "#17202A",
                        },
                    }
                }
        });

And also i will attach a screenshot of my issue. Here > SCREENSHOT 1 SCREENSHOT 2 WITH THE ISSUE Thanks!

Answer 1

I changed the whole code and throw this codes for HTML

<div class="selectBox" onchange="eventTracker()"><label>SYSTEM REQUIREMENTS</label>
        <select id="idSample">
            <option value="0, 0, 0, 0, 0, 0"></option>
            <option value="200, 0, 0, 0, 0, 0">10</option>
            <option value="0, 200, 0, 0, 0, 0">20</option>
            <option value="0, 0, 200, 0, 0, 0">30</option>
            <option value="0, 0, 0, 200, 0, 0">40</option>
            <option value="0, 0, 0, 0, 200, 0">50</option>
            <option value="0, 0, 0, 0, 0, 200">60</option>
        </select> L/s @ A MINIMUM OF 200 kPa <div class="palette purle">
        </div>

and this is for the function

function eventTracker() {
    firstChart.data.datasets[0].data = idSample.value.split(',');
    firstChart.update();
    firstChart.render();
}

this is for my Chart

var ctx = document.getElementById('firstChart');
const firstChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['10', '20', '30', '40', '50', '60'],
        datasets: [{
            fill: false,
            label: 'System Requirements per L/s',
            data: ['0', '0', '0', '0', '0', '0'],
            backgroundColor: 'orange',
            borderColor: 'orange',
            borderWidth: 1,
            yAxisID: 'kPa',
            xAxisID: 'Lits',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                id: "kPa",
                ticks: {
                    beginAtZero: true,
                    stepSize: 50
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Pressure (kPa)'
                }
            }],
            xAxes: [{
                id: "Lits",
                scaleLabel: {
                    display: true,
                    labelString: 'Flow Rate (L/s)'
                }

            }]
        },
        title: {
            display: false,
            text: "SAMPLE!"
        },
        legend: {
            display: false,
            position: 'bottom',
            labels: {
                fontColor: "#17202A",
            },
        }
    }
});