Home / Questions / 304223
Accepted
John Doe
Asked: 2020-10-29 09:17:07 +0800 CST 2020-10-29 09:17:07 +0800 CST

How to sort from highest to lowest value stacked bar chart using Chart.js?

  • 772

I have a stacked bar chart that I built using the Chart.js library JavaScript, and I would like it to be ordered as follows: elements with the highest value at the top of the bar, elements with the lowest value at the bottom of the bar. bottom, that is, in descending order.

I guess it can be done using some of the plugins Chart.js, but I still can't figure it out.

The following is the graph that I am generating and it is generated out of order:

The following is the code fragment with which I am building the graph:

myNewChart = new Chart(ctx, {
    type: 'horizontalBar',           
    data: { labels, datasets },
    options: {
        maintainAspectRatio: false,
        showAllTooltips: true,
        scales: {
            xAxes: [
                {
                    stacked: true,
                    display: true,
                    ticks: {
                        beginAtZero: true,
                    }
                }
            ],
            yAxes: [
                {
                    stacked: true,
                    display: true,    
                    reverse: false,
                    ticks: { }
                }
            ]
        },
        legend: {
            position: 'bottom',
            padding: 5,
            labels: {
                pointStyle: 'circle',
                usePointStyle: true
            }
        },
        plugins: {
            datalabels: {
                color: "#333333",
                font: {
                    weight: 'bold',
                    size: 16,                          
                }
            }
        },
    },
});

Version: Chart.js v2.8.0

Update:

I add objects datasetsanddatasetsObject

const datasetsObject = data.DashboardTicketList.reduce((obj, item) => {
    obj[item.TicketsClasificationType] = obj[item.TicketsClasificationType] || {};
    obj[item.TicketsClasificationType][item.TicketsAsignedTo] = item.TicketsCount;
    return obj;
}, {});

const datasets = Object.keys(datasetsObject).map((name) => ({
    label: name,
    backgroundColor: colors[name],
    data: labels.map((l) => datasetsObject[name][l])
}));

Update 2:

The values ​​of thedatasets

const colors = {
    "ABIERTO": "#F76363",
    "ASIGNADO": "#F7A65C",
    "EN PROCESO": "#F2CB5F",
    "EN ESPERA USUARIO": "#B283ED",
    "TERMINADO": "#4285f4",
    "CERRADO": "#6CE5CE",                
};

Update 3:

When executing the ordering algorithm sortas indicated in one of the answers, it no longer represents any data in the graph

const datasets = Object.keys(datasetsObject).map((name) => ({
    label: name,
    backgroundColor: colors[name],
    data: labels.map((l) => datasetsObject[name][l]).sort
}));

enter image description here

javascript

3 Answers

  1. Best Answer

    I see you're using the logic I gave you a while back to generate the datasetsand labels. Well, taking the same snippet that I gave you at the time, I am going to vary it to order them labelsfrom highest to lowest, taking into account the sum of their values. To do so, one of the solutions is that instead of generating them in the previous way, an object could be generated with the totals by label, create a arraywith said object, organize that arrayfrom highest to lowest and then extract those labelsfrom that arrayand thus they will be ordered from highest to lowest taking into account the sum of all its values. I'll explain it step by step:

    Given the following arraywith the query:

    const consulta = [
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 3, TicketsAsignedTo: "C", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 2, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 3"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 4"},
    {TicketsCount: 6, TicketsAsignedTo: "E", TicketsClasificationType: "Dataset 5"}
];

    1 - Create a totals object by label:

    const totales = consulta.reduce((obj, row) => {
    obj[row.TicketsAsignedTo] = obj[row.TicketsAsignedTo] || 0;
    obj[row.TicketsAsignedTo] += row.TicketsCount;
    return obj;
}, {});

    The above will return an object like the following:

    {A: 4, B: 2, C: 3, D: 5, E: 6}

    2 - Create an array of labelsy totals:

    const labelsArray = Object.keys(totales).map(prop => ({
    label: prop,
    value: totales[prop]
}));

    Which will return a arraylike the following:

    [
    {label: "A", value: 4},
    {label: "B", value: 2},
    {label: "C", value: 3},
    {label: "D", value: 5},
    {label: "E", value: 6}  
]

    3 - Order the arrayfrom highest to lowest taking into account the property value:

    labelsArray.sort((a, b) => b.value - a.value);

    Which will return the arrayordered as follows:

    [
    {label: "E", value: 6},
    {label: "D", value: 5},
    {label: "A", value: 4},
    {label: "C", value: 3},
    {label: "B", value: 2}
]

    4 - Extract those labelsfrom the arrayordered:

    const labels = labelsArray.map(l => l.label);

    What it will return:

    ["E", "D", "A", "C", "B"]

    5 - Use this arrayfrom labelsto generate the chart:

    const consulta = [
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 3, TicketsAsignedTo: "C", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 2, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 3"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 4"},
    {TicketsCount: 6, TicketsAsignedTo: "E", TicketsClasificationType: "Dataset 5"}
];

const colors = {
    "Dataset 1": "#f7a65c",
    "Dataset 2": "#6ce5ce",
    "Dataset 3": "#f2cb5f",
    "Dataset 4": "#b283ed",
    "Dataset 5": "#f76363"
};

const datasetsObject = consulta.reduce((obj, item) => {
    obj[item.TicketsClasificationType] = obj[item.TicketsClasificationType] || {};
    obj[item.TicketsClasificationType][item.TicketsAsignedTo] = item.TicketsCount;
    return obj;
}, {});

// Generar un objeto con los totales
const totales = consulta.reduce((obj, row) => {
  obj[row.TicketsAsignedTo] = obj[row.TicketsAsignedTo] || 0;
  obj[row.TicketsAsignedTo] += row.TicketsCount;
  return obj;
}, {});

// Crear un array de labels y totales
const labelsArray = Object.keys(totales).map(prop => ({
  label: prop,
  value: totales[prop]
}));

// Organizar los labels teniendo en cuenta su total
labelsArray.sort((a, b) => b.value - a.value);

// Extraer los labels
const labels = labelsArray.map(l => l.label);

const datasets = Object.keys(datasetsObject).map(name => ({
    label: name,
    backgroundColor: colors[name],
    data: labels.map(l => datasetsObject[name][l] || 0)
}));

const context = document.getElementById("barChart").getContext("2d");
const myBarChart = new Chart(context, {
    type: "horizontalBar",
    data: { labels, datasets },
    options: {
        scales: {
            xAxes: [{ stacked: true }],
            yAxes: [{ stacked: true }]
        }
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>

<canvas id="barChart"></canvas>

    • 3

  2. Sort Algorithm
    The sort algorithm: which is implemented in java script arrays, allows you to organize values ​​automatically.

    Example:
    In this case our variables are: 

    let GroupValores = [[2,5,3],[2,1],[10,3,6,2]];
    • Arrange charts by GroupValoressmallest to largest amount of data:
    GroupValores = GroupValores.sort((a,b) => a.length> b.length);

    A:[[2,1],[2,5,3],[10,3,6,2]]

    • Arrange graphs from least to greatest for each value of GroupValores: 
    GroupValores = GroupValores.map(val => val.sort((a,b) => a > b) );

    A: [[2,3,5],[1,2],[2,3,6,10]]

    Now you only have to combine them or invest them for what you want

    • 0

  3. Where you build the dataset you must order the values ​​of each one with the Sort() function of the Javascript Arrays

    const datasets = Object.keys(datasetsObject).map((name) => ({
                label: name,
                backgroundColor: colors[name],
                data: labels.map((l) => datasetsObject[name][l]).Sort()
            }));

    With that the value of the array datashould be sorted from smallest to largest

    • 0