Chartjs-Problem not showing proper datasets in dropdown list function

0๐Ÿ‘

โœ…

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",
            },
        }
    }
});

0๐Ÿ‘

I already fixed this issue. I just had errors in the loops.

Leave a comment