Estoy trabajando con Charts y necesito mostrar en un gráfico de torta algunos resultados. Este el código Javascript del Chart puro
var ctxP = document.getElementById("pieChart").getContext('2d');
var myPieChart = new Chart(ctxP, {
type: 'pie',
data: {
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
datasets: [
{
data: [600, 50, 100, 40, 120],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
}
]
},
options: {
responsive: true
}
});
En mi HTML tengo el siguiente código, el cual me llena un input hidden por cada "brand" que yo traiga desde el backend
<div class="col-12 my-5 d-flex justify-content-center">
<input th:each="b : ${brands}" type="hidden" th:value="${b.name}" class="brands">
<canvas id="pieChart" style="max-width: 40%;"></canvas>
</div>
Entonces al renderizar ese codigo y al momento de inspeccionar el codigo de la pagina se puede apreciar (en este caso) lo siguiente.
<input type="hidden" value="Intels" class="brands">
<input type="hidden" value="AMD" class="brands">
<input type="hidden" value="Western Digital" class="brands">
<input type="hidden" value="Intel" class="brands">
<input type="hidden" value="GeForce" class="brands">
<input type="hidden" value="Example" class="brands">
<input type="hidden" value="ExampleBrand" class="brands">
El problema es que, con mi poca experiencia con Javascript, no he podido pasar cada nombre (value) de mis elementos brands a Javascript para asi mostrarlos en el grafico de torta. He intentado de la siguiente forma pero obtengo algunos errores los cuales los pongo como comentarios.
var b = document.getElementsByClassName("brands");
var brands = [];
for (brand in b) {
brands.push(b);
}
console.log(brands.length); //ME DEVUELVE 10 Y NO 7.
for (brand in brands) {
console.log(brand.value); // ME DEVUELVE UNDEFINED 10 VECES.
}
Entonces lo que yo necesito es obtener cada elemento con la clase "brands" y el valor de cada uno guardarlo en esta linea del Chart para que en vez de salir colores me salgan mis "brands". Saludos cordiales.
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"]