queria saber porque razón cuando hago un json de prueba, tipo:
let test = {'Carlos': 1, 'Elias': 2}
Y lo envio a una función para crear un grafico de barras con canvas, que por cierto, seguí exactamente los pasos de este tutoria. Cuando lo hago con los datos de prueba me funciona muy bien, el resultado es algo como el siguiente:
Pero cuando uso los datos de la bd si me retorna los datos, pero cuando envio el json no encuentra las llaves del json, esté es el código con el que agrego los datos:
data.response.forEach(voto => {
Nombre = voto.Nombre.split(" ")[0];
Nombre.toString();
votos[`'${Nombre}'`] = voto.Votos;
console.log(votos);
});
Deduje que el error era porque cuando creo el array de pruebas las llaves están entre comilla, pero no creo que afecte realmente, solo intente hacer algo por probar, elcódigo original solo agregaba el nombre sin las comillas, votos[Nombre] = voto.Votos
El resultado que obtengo de eso es esto, teniendo en cuenta que agregué una condición, si las llaves son menor a 1 dibuja lo siguiente:
Y no logro solucionar el error, en consola me tira:
Uncaught TypeError: myChart.draw is not a function
Que es mi función para hacer todo de la grafica, pero se que es porque directamente, no existe ``` keys.lenght`, la sección que se encarga de eso es esta:
let keys = Object.keys(this.options.data);
Pero me devuelve {}
cuando consigo los datos de la bd, y me devuelve {Carlos: 1, Elias: 2}
cuando es la prueba, finalmente, mi código sql es el siguiente:
SELECT candidatos.Nombre, COUNT(votaciones.Id_Votacion) AS Votos FROM candidatos, votaciones WHERE candidatos.Id_Candidato = votaciones.Id_Candidato GROUP BY candidatos.Id_Candidato
No es la gran cosa, me devuelve un diccionario como este, {'Nombre': 'Carlos Antonio Rodrigez Bazques', 'Votos': 1}
, por cada usuario y luego lo agrego al json en js.
myChar, barChar es identico al de el tutorial que segí:
for (let i = 0; i < Object.keys(votos).length; i++) {
colors.push(randomColor());
}
let myChart = new barChar({
canvas: myCanvas,
data: votos,
padding: 25,
gridScale: 20,
gridColor: "#B9B6B6",
colors: colors
});
Manjo la bd con python, y esté es el código en python:
#Dentro de una lase cru() que maneja las consultas
def mostrar_votos(self):
try:
cursor = self.conn.cursor(dictionary=True)
sql = "SELECT candidatos.Nombre, COUNT(votaciones.Id_Votacion) AS Votos FROM candidatos, votaciones WHERE candidatos.Id_Candidato = votaciones.Id_Candidato GROUP BY candidatos.Id_Candidato"
cursor.execute(sql)
result = cursor.fetchall()
return result
except mysql.connector.Error as err:
return {'status':'error', 'msg': 'No se pudieron encontrar los votos', 'code': str(err), 'votos':{}}
#Dentro de la clase del servidor, en do_GET:
class Handler(SimpleHTTPRequestHandler):
def do_GET(self):
elif self.path == '/mostrar_votos':
response = curd.mostrar_votos()
self.send_response(200)
self.end_headers()
self.wfile.write(json.dumps(dict(response=response)).encode('utf-8'))
Y así llamo al la funcion desde js:
$.get("http://localhost:8000/mostrar_votos", (data)=>{
console.log(data);
data.response.forEach(voto => {
Nombre = voto.Nombre.split(" ")[0];
//Combertir el nombre a string
Nombre.toString();
votos[`'${Nombre}'`] = voto.Votos;
console.log(votos);
});
}, 'json');
#Hice una prueba imprimiendo las llaves, y me devuelve [], y si imprimo solo votos si imprime el json normal.
console.log(Object.keys(votos))
}
Alguna idea de como lo soluciono?
myChart
?Uncaught TypeError: myChart.draw is not a function
se refiere a que estás tratando de hacer.draw()
en un objeto indefinido