I'm having some sort of problems regarding on how to sort your data highest to lowest using chart.js? I was using laravel and I used chart.js to display my data, However I don't have any idea how to make an operation to sort my highest value to lowest value (data) in chart.js
My code
var ctx_1 = document.getElementById('non_200_pages').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ["Total","301 Redirect","Broken Pages (4xx Errors)","Uncategorised HTTP Response Codes","5xx Errors","Unauthorised Pages","Non-301 Redirects"],
datasets: [{
data: [ {{ $array_non_200_pages[0] }}, {{ $array_non_200_pages[1] }}, {{ $array_non_200_pages[2] }}, {{ $array_non_200_pages[3] }}, {{ $array_non_200_pages[4] }}, {{ $array_non_200_pages[5] }}, {{ $array_non_200_pages[6]}} ],
backgroundColor: [
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize:5,
display: false
},
gridLines: {
drawBorder: false,
}
}],
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: Math.round
}
}
}
});
My Output
My Expected Output
Base on the picture I want my total just like that and have a value of {{$array_non_200_pages[0] }} Now the problem is I need to sort the following data to make it highest to lowest. How can I do that? Is there someone can help me or guide me the best way to resolve my problem? Sorry for my bad English. Thank you so much
I'm having some sort of problems regarding on how to sort your data highest to lowest using chart.js? I was using laravel and I used chart.js to display my data, However I don't have any idea how to make an operation to sort my highest value to lowest value (data) in chart.js
My code
var ctx_1 = document.getElementById('non_200_pages').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ["Total","301 Redirect","Broken Pages (4xx Errors)","Uncategorised HTTP Response Codes","5xx Errors","Unauthorised Pages","Non-301 Redirects"],
datasets: [{
data: [ {{ $array_non_200_pages[0] }}, {{ $array_non_200_pages[1] }}, {{ $array_non_200_pages[2] }}, {{ $array_non_200_pages[3] }}, {{ $array_non_200_pages[4] }}, {{ $array_non_200_pages[5] }}, {{ $array_non_200_pages[6]}} ],
backgroundColor: [
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize:5,
display: false
},
gridLines: {
drawBorder: false,
}
}],
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: Math.round
}
}
}
});
My Output
My Expected Output
Base on the picture I want my total just like that and have a value of {{$array_non_200_pages[0] }} Now the problem is I need to sort the following data to make it highest to lowest. How can I do that? Is there someone can help me or guide me the best way to resolve my problem? Sorry for my bad English. Thank you so much
1 Answer
Reset to default 14Here is how you can merge and sort data and labels together.
first sort them then assign newArrayData to data property and newArrayLabel to labels property of your config object.
arrayLabel = ["Total", "301 Redirect", "Broken Pages (4xx Errors)", "Uncategorised HTTP Response Codes", "5xx Errors", "Unauthorised Pages", "Non-301 Redirects"]
arrayData = [16, 1, 14, 0, 0, 0, 1];
arrayOfObj = arrayLabel.map(function(d, i) {
return {
label: d,
data: arrayData[i] || 0
};
});
sortedArrayOfObj = arrayOfObj.sort(function(a, b) {
return b.data>a.data;
});
newArrayLabel = [];
newArrayData = [];
sortedArrayOfObj.forEach(function(d){
newArrayLabel.push(d.label);
newArrayData.push(d.data);
});
console.log(newArrayLabel);
console.log(newArrayData);