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.
Source:stackexchange.com