The value of your hidden input is a string.
You are creating an array with a single element containing that string.
You need to split the string first, delimiting by the , character.
Trimming whitespace is also helpful too.
See below.
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
<canvas height="100px" id="myChart"></canvas>
<input type="hidden" id="0" value="10, 12">
<script>
obj = document.getElementById('0').value.replace(" ", "").split(',')
console.log(obj);
const labels = ['Type 1', 'Type 2'];
const data = {
labels: labels,
datasets: [
{
backgroundColor: 'rgb(0, 255, 0)',
data: obj,
barThickness: 50
}]
};
const config = {
type: 'bar',
data: data
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
The line obj = [document.getElementById('0').value]; will result in an array with the string “10, 12” as value. To convert the string to an array try split method: obj = document.getElementById('0').value.split(",");.
Now you have an array with the string values “10” and ” 12″. Not sure if chat.js can handle this, if not you can use the map funtion to iterate over the vales and covert the to numbers
I have a hidden input
<input type="hidden" id="0" value="10, 12">
and I am using
obj = [document.getElementById('0').value];
in a script tag to retrieve and use the value of the hidden input as the data array in the setting of Chart.js
const data = {
labels: labels,
datasets: [
{
backgroundColor: 'rgb(0, 255, 0)',
data: obj,
barThickness: 50
}]
};
I have read Chart.js unable to display data and Treat getElementById return value as array but both those questions answers suggest converting the object to an array which I have done and it still doesn’t work.
Not able to pass array of data to chart.js in React Was a react problem and I tried adapting it but it didn’t work either.
The desired output I want can be seen in this code snippet here:
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
<canvas height="100px" id="myChart"></canvas>
<input type="hidden" id="0" value="10, 12">
<script>
obj = [document.getElementById('0').value];
console.log(Array.isArray(obj), obj);
const labels = ['Type 1', 'Type 2'];
const data = {
labels: labels,
datasets: [
{
backgroundColor: 'rgb(0, 255, 0)',
data: [10,12],
barThickness: 50
}]
};
const config = {
type: 'bar',
data: data
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
How can I achieve the same solution by somehow selecting the hidden input and passing that array as the data?
I have used console.log(); to confirm that the object is an array and that it has the correct value.
Attempts:
- I’ve tried surrounding the object with [] like so
data: [obj], but then nothing gets displayed (probably because it’s already an array?)
- I’ve tried converting the array to a list as suggested here: Turn Array Into List With JavaScript but still nothing gets displayed.
- I’ve tried changing the values of the hidden input to be
value="'10', '12'" but still nothing gets displayed.
This seems like a promising answer, I’m testing it now thank you for the answer.
Its worth noting that if you have control over the value of the hidden input you should omit the whitespace so it becomes
Perfect this works, thank you so much @cam. I do have control over the value of the hidden input and will omit the whitespace. I’m accepting this answer because it is more readable and provides a code snippet however anfalt’s answer also works.
Thank you @anfalt, that also works but I’ve accepted cam’s answer as it’s more readable and provides a code snippet. I would accept both answers if I could. Thanks for the help.
