0

Hola nunca habia trabajado con un json, y estoy recibiendo este dato de estatus. El json me devuelve meses y dentro de ellos deverian venir 3 estatus(Avtivo, bloquedo y cerrado), pero en unos meses solo me llega cerrado o cerrado y bloqueado. pero al usarlo en el chart no quedan los parametros en los meses que deviera y me los pone corrido. Este es mi json:

    "monthStatusReport": [
    {
        "year": 2022,
        "month": 1,
        "status": "CLOSED",
        "total": 1973
    },
    {
        "year": 2022,
        "month": 2,
        "status": "CLOSED",
        "total": 4044
    },
    {
        "year": 2022,
        "month": 2,
        "status": "ACTIVE",
        "total": 1
    },
    {
        "year": 2022,
        "month": 3,
        "status": "CLOSED",
        "total": 7627
    },
    {
        "year": 2022,
        "month": 3,
        "status": "ACTIVE",
        "total": 1
    },
    {
        "year": 2022,
        "month": 4,
        "status": "CLOSED",
        "total": 7408
    },
    {
        "year": 2022,
        "month": 5,
        "status": "CLOSED",
        "total": 11658
    },
    {
        "year": 2022,
        "month": 5,
        "status": "BLOCKED",
        "total": 263
    },
    {
        "year": 2022,
        "month": 6,
        "status": "CLOSED",
        "total": 11799
    },
    {
        "year": 2022,
        "month": 6,
        "status": "BLOCKED",
        "total": 201
    },
    {
        "year": 2022,
        "month": 7,
        "status": "CLOSED",
        "total": 13150
    },
    {
        "year": 2022,
        "month": 7,
        "status": "BLOCKED",
        "total": 368
    },
    {
        "year": 2022,
        "month": 8,
        "status": "CLOSED",
        "total": 13977
    },
    {
        "year": 2022,
        "month": 8,
        "status": "BLOCKED",
        "total": 288
    },
    {
        "year": 2022,
        "month": 8,
        "status": "ACTIVE",
        "total": 3
    },
    {
        "year": 2022,
        "month": 9,
        "status": "CLOSED",
        "total": 5547
    },
    {
        "year": 2022,
        "month": 9,
        "status": "BLOCKED",
        "total": 279
    },
    {
        "year": 2022,
        "month": 9,
        "status": "ACTIVE",
        "total": 823
    }
]

Hice un arreglo para mostrar los meses en texto pero al querer pasar los datos al chart no puedo hacer que los valores se muestren en el mes que le corresponde :

    var all = dataJson.map(function (item) {
                    switch (item.month) {
                        case 1:
                            return [{ mes: 'Enero', total: item.total, Estatus: item.status}]
                        case 2:
                            return [{ mes: 'Febrero', total: item.total, Estatus: item.status }]
                        case 3:
                            return [{ mes: 'Marzo', total: item.total, Estatus: item.status }]
                        case 4:
                            return [{ mes: 'Abril', total: item.total, Estatus: item.status }]
                        case 5:
                            return [{ mes: 'Mayo', total: item.total, Estatus: item.status }]
                        case 6:
                            return [{ mes: 'Junio', total: item.total, Estatus: item.status }]
                        case 7:
                            return [{ mes: 'Julio', total: item.total, Estatus: item.status }]
                        case 8:
                            return [{ mes: 'Agosto', total: item.total, Estatus: item.status}]
                        case 9:
                            return [{ mes: 'Septiembre', total: item.total, Estatus: item.status }]
                        case 10:
                            return [{ mes: 'Octubre', total: item.total, Estatus: item.status }]
                        case 11:
                            return [{ mes: 'Noviembre', total: item.total, Estatus: item.status }]
                        case 12:
                            return [{ mes: 'Diciembre', total: item.total, Estatus: item.status }]
                    }
                })
                
                console.log(all)

                const valuesActive = abiertos.map(function(subAbi){return subAbi.map(function(itemAct){return itemAct.total})})
                const valuesBlocked = bloqueados.map(function(subBlo){return subBlo.map(function(itemBlo){return itemBlo.total})})
                const valuesClosed = cerrados.map(function(subClo){return subClo.map(function(itemClo){return itemClo.total})})
                

                const data = {
                    labels: valueMes,
                    datasets: [
                        {
                            label: 'Tareas Cerradas',
                            data: valuesClosed,
                            borderColor: 'rgb(255, 99, 132)',
                            backgroundColor: 'rgb(255, 99, 132, 0.5)',
                            borderWidth: 2,
                            borderRadius: 5,
                            borderSkipped: false,
                        },
                        {
                            label: 'Tareas Bloqueadas',
                            data: valuesBlocked,
                            borderColor: 'rgb(54, 162, 235)',
                            backgroundColor: 'rgb(54, 162, 235, 0.5)',
                            borderWidth: 2,
                            borderRadius: 5,
                            borderSkipped: false,
                        },
                        {
                            label: 'Tareas Abiertas',
                            data: valuesActive,
                            borderColor: 'rgb(75, 192, 192)',
                            backgroundColor: 'rgb(75, 192, 192, 0.5)',
                            borderWidth: 2,
                            borderSkipped: false,
                        },
                    ]
                };

introducir la descripción de la imagen aquí

2
  • Por favor, ¿Puedes agregar el valor de valuesMes?
    – ZeroCool
    el 19 sep. 2022 a las 7:44
  • @mafu const valueMes = cerrados.map(function(subMes){return subMes.map(function(itemMes){return itemMes.mes})}) el 19 sep. 2022 a las 12:25

1 respuesta 1

0

Tu principal problema es que tu json no tiene todos los elementos. Por ejemplo en enero no existe "ACTIVE". Entonces lo que hay que hacer es rellenar esos datos que faltan con ceros, para de esta manera conservar el orden en los 3 casos.

Yo compliqué un poco el código, porque no sé si en un mes pueden repetirse datos, o si puedes tener datos de 2 años diferentes

const json = `{"monthStatusReport": [
    {
        "year": 2022,
        "month": 1,
        "status": "CLOSED",
        "total": 1973
    },
    {
        "year": 2022,
        "month": 2,
        "status": "CLOSED",
        "total": 4044
    },
    {
        "year": 2022,
        "month": 2,
        "status": "ACTIVE",
        "total": 1
    },
    {
        "year": 2022,
        "month": 3,
        "status": "CLOSED",
        "total": 7627
    },
    {
        "year": 2022,
        "month": 3,
        "status": "ACTIVE",
        "total": 1
    },
    {
        "year": 2022,
        "month": 4,
        "status": "CLOSED",
        "total": 7408
    },
    {
        "year": 2022,
        "month": 5,
        "status": "CLOSED",
        "total": 11658
    },
    {
        "year": 2022,
        "month": 5,
        "status": "BLOCKED",
        "total": 263
    },
    {
        "year": 2022,
        "month": 6,
        "status": "CLOSED",
        "total": 11799
    },
    {
        "year": 2022,
        "month": 6,
        "status": "BLOCKED",
        "total": 201
    },
    {
        "year": 2022,
        "month": 7,
        "status": "CLOSED",
        "total": 13150
    },
    {
        "year": 2022,
        "month": 7,
        "status": "BLOCKED",
        "total": 368
    },
    {
        "year": 2022,
        "month": 8,
        "status": "CLOSED",
        "total": 13977
    },
    {
        "year": 2022,
        "month": 8,
        "status": "BLOCKED",
        "total": 288
    },
    {
        "year": 2022,
        "month": 8,
        "status": "ACTIVE",
        "total": 3
    },
    {
        "year": 2022,
        "month": 9,
        "status": "CLOSED",
        "total": 5547
    }]
  }`;

const datos = JSON.parse(json).monthStatusReport;

//Esto entrega un array con todos los meses sin repetirlos
const meses = datos.reduce((a, e, i) => {
    if (!a.some(f => f.getFullYear() == e.year && f.getMonth() == e.month-1)) {
        const date = new Date(e.year,e.month-1,1);
        a.push(date);
    }
    return a
}, []); 

const valuesPorMeses = {
    Blocked:[],
    Active:[],
    Closed:[]
} ;  

//Seteamos todos todos los status de cada mes en cero, para rellenar los que faltan
for (let f of meses) {
    valuesPorMeses.Blocked[`${f.getFullYear()}-${f.getMonth()+1}`] = 0;
    valuesPorMeses.Active[`${f.getFullYear()}-${f.getMonth()+1}`] = 0;
    valuesPorMeses.Closed[`${f.getFullYear()}-${f.getMonth()+1}`] = 0;
}

//ingreamos los valores
for (let d of datos) {
    if (d.status === "CLOSED") {
        valuesPorMeses.Closed[`${d.year}-${d.month}`] += d.total;
    }
    else if (d.status === "ACTIVE") {
        valuesPorMeses.Active[`${d.year}-${d.month}`] += d.total;
    }
    else if (d.status === "BLOCKED") {
        valuesPorMeses.Blocked[`${d.year}-${d.month}`] += d.total;
    }
}

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: meses.map( e => e.toLocaleString('es-ES', { month: 'long' })),
        datasets: [
            {
                label: 'Tareas Cerradas',
                data: Object.values(valuesPorMeses.Closed),
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgb(255, 99, 132, 0.5)',
                borderWidth: 2,
                borderRadius: 5,
                borderSkipped: false,
            },
            {
                label: 'Tareas Bloqueadas',
                data: Object.values(valuesPorMeses.Blocked),
                borderColor: 'rgb(54, 162, 235)',
                backgroundColor: 'rgb(54, 162, 235, 0.5)',
                borderWidth: 2,
                borderRadius: 5,
                borderSkipped: false,
            },
            {
                label: 'Tareas Abiertas',
                data: Object.values(valuesPorMeses.Active),
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgb(75, 192, 192, 0.5)',
                borderWidth: 2,
                borderSkipped: false,
            }],
    }

});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<div style="width:600px;height:400px">
   <canvas id="myChart"></canvas>
</div>

1
  • @Yusseft Muchisimas gracias, justo es lo que necesitaba para poder mostrarlo en el Chart. el 20 sep. 2022 a las 16:52

Tu Respuesta

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

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