1

Llevo días tratando de graficar (lineal) un array de coordenadas mediante chart js, pero no consigo que me lea el formato con el que debería graficar. Si coloco datos manualmente funciona bien (como muestra la linea comentada).

function graficaDiaria(){
    var f1 = $('#fecha').val();
    var f2 = $('#fecha2').val();
    $.ajax({
        type: 'POST',
        url: 'infRecepGrafDiario.php',
        data: {"f1":f1, "f2":f2}
    }).done(function(data){
        var fechas = [];
        var cPaloma = [];           
        var data = JSON.parse(data);

        for (i = 0; i < data.length; i++){
            for (j = 0; j < data[i][0].length; j++) {
                fechas.push(data[i][0][j]);
                cPaloma.push(data[i][1][j]);                                        
            }           
        }
         
        console.table(cPaloma);
        
        var ctx = document.getElementById('totalxdia').getContext('2d');

        var paloma = {
            label: "Paloma",
            data: [cPaloma],
            //data: [{x:'2020-12-11', y:5000},{x:'2020-12-12', y:0},{x:'2020-12-14', y:0},{x:'2020-12-15', y:35000}],
            lineTension: 0,
            fill: false,
            borderColor: 'rgba(255, 99, 132, 1)'
        }
        

        var resultado = {
            labels: fechas,
            datasets: [paloma]
        }

        var lineas = new Chart(ctx, {
            type: 'line',
            data: resultado,
            options: {                  
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        fontColor: 'rgb(0, 0, 0)'
                    }
                },
                title: {
                    display: true,
                    text: 'Totales Cerezas Diario'
                }
             }                          
        });
    });             
}   

En la consola obtengo lo siguiente de mi array cPaloma, pero el gráfico sigue en blanco:

introducir la descripción de la imagen aquí

El grafico:

introducir la descripción de la imagen aquí

Gracias por su ayuda

5
  • Y cómo estás intentando graficar? Sólo vemos una variable inicializada con datos.
    – Alfabravo
    el 4 nov. 2021 a las 19:52
  • Hola, por favor comparte que tipo de chart estas usando y como se muestra tu chart actualmente con el código que compartiste.
    – Ivandez
    el 4 nov. 2021 a las 19:52
  • Ya edité la pregunta.
    – ddiaz
    el 4 nov. 2021 a las 20:17
  • pon un console log de tu objeto cPaloma, para ver si te lo esta detectando como objetos cada ítem, o como un string. el 4 nov. 2021 a las 20:20
  • Y de paso un console.log de lo que te regresa la petición en data el 4 nov. 2021 a las 20:22

1 respuesta 1

1

Esto pasa porque, a simple vista, se nota que la respuesta que obtienes desde infRecepGrafDiario.php está mal formada.

Lo que tú necesitas es un array de objetos:

[{x:'2020-12-11', y:5000},{x:'2020-12-12', y:0},{x:'2020-12-14', y:0},{x:'2020-12-15', y:35000}]

Lo que está siendo retornado desde tu endpoint es un array de strings:

[
   "{x:'2020-12-11',y:5000}",
   "{x:'2020-12-12',y:0}",
   "{x:'2020-12-13',y:0}",
   "{x:'2020-12-14',y:3500}",
]

Por lo que la solución sería convertir dicho array de strings a uno con objetos. La respuesta sería simple, si lo que estuviese dentro de ese string fuese un JSON, pero no lo es, por lo que se complica un poco.

Dado que el formato es homogéneo, es decir, siempre habrá una x:... y un y:..., puedes usar match() para obtener los valores y armes cada objeto manualmente:

const newArray = data.map(item => {
    let pointX = item.match(/(?<=x:)(\'.*?\')/gm);
    let pointY = item.match(/(?<=y:)(.*?)(?=})/gm);
  
    return {
        x: pointX[0].replaceAll("'", ''),
        y: pointY[0]
    };
});

Obviamente, las soluciones pueden variar, esta es sólo una, para entender esta solución necesitas entender cómo funcionan los assertions.

(?<=foo:) => Lookbehind assertion
(?=foo)   => Lookahead assertion

Básicamente, lo que hace la expresión regular es:

(?<=x:) Buscar después de x: y además que esté entre comillas simples (\'.*?\')

Igual para la segunda expresión regular, sólo que esta vez buscará entre y: y }.

Aquí te dejo un JSFiddle.

1
  • Muchas gracias, era lo que buscaba, creo que nunca hubiera podido dar con la solución.
    – ddiaz
    el 5 nov. 2021 a las 12:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.