Estoy armando una página con NODEJS + MYSQL + EJS. Estoy obteniendo el resultado de una consulta desde MYSQL, lo paso a la vista EJS y quiero utilizar los valores para generar un gráfico. (Soy nuevo y recién comienzo a aprender muchos conceptos tales JSON y tipos de datos)
Este es mi index.js
var queryString = "SELECT * FROM VALORES";
app.get('/', (req, res) => {
connection.query(queryString, function (err, rows, fields) {
if (err) throw err;
res.render("index", {
rows: rows, //<---aca le paso el resultado de la consulta
});
});
El resultado de mi consulta en formato de tabla:
ID DIA VALOR
1 LUNES 10
2 MARTES 20
3 MIERCOLES 30
4 JUEVES 40
Mi archio index.ejs contiene:
<body>
<H1>Bienvenido</H1>
<p id="element">GetElementById</p>
<div style="border:tan; border-style: solid; width: 200px; height: 100px">
<canvas id="myChart" width="200px" height="100px"></canvas>
</div>
</body>
<script>
var rowlocal = <%-JSON.stringify(rows)%>;
document.getElementById("element").innerHTML = (JSON.stringify(rowlocal));
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: rowlocal[0][1],
backgroundColor: 'rgb(255, 19, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [10, 210, 45, 52, 620, 730, 5],
}]
},
options: {}
})
</script>
</html>
Como podrán ver he asignado var rowlocal = <%-JSON.stringify(rows)%>;
y solo para probar que contenía se la paso al elemento "p" de mi html <p id="element">GetElementById</p>
con este código document.getElementById("element").innerHTML = (JSON.stringify(rowlocal));
dandome como resultado en mi obtengo en mi navegador web esto:
Al probar con este configuración (queriendo conocer que valores tengo) document.getElementById("element").innerHTML = rowlocal;
obtengo en mi navegador web:
Mi problema surge en que no encuentro la forma de pasar los valores de las columnas DIA (lunes, martes...) y VALOR (10, 20...) a las etiquetas "labels" y "data" para generar el gráfico.
Debería recorrer el arreglo o el string e ir guardando los valores en una variable? como trabajo con eso?
Gracias de antemano!