How To Order The"Break By" Alphabetically In Widgets
Introduction
Let's say you are using the “Break By” option in a widget, and you need to order the values by alphabetic order. For example, the break by is a ticket severity, and you want the critical tickets to be on top, then the high, medium and finally the low.
To order the “Break By” alphabetically, use the following procedure:
Steps
-
Verify your “Break By” field is sorted alphabetically in the way you want. You can add a custom field within the ElastiCube and add a numeric prefix using the “Case” function:
CASE WHEN Severity='Critical' THEN '1. Critical' WHEN Severity='High' THEN '2. High' WHEN Severity='Medium' THEN '3. Medium' WHEN Severity='Low' THEN '4. Low' END Severity_Numeric,
-
Create your widget and place the desired field in the “Break By” area.
-
Go to “Edit Script:
-
Insert the following code to the widget script and click “Save”
widget.on('processresult',function(se,ev){
ev.result.series.sort(function(a,b){return a.name.localeCompare(b.name); });
})
-
Refresh the widget and click “Apply”:
-
In order to set the bar chart legend to be in order of the values, use the following code snippet:
widget.on('processresult',function(se,ev){
var series = ev.result.series;
var numberOfSeries = ev.result.series.length;
for(var i=0;i < numberOfSeries;i++){
series[i].legendIndex = numberOfSeries - i;
}
}) -
To reverse the order that the series are graphed in use this:
widget.on('processresult',function(se,ev) {
var series = ev.result.series;
series.reverse();
})If you want to do it without modifying the order of the legend, add Hila's code:
widget.on('processresult',function(se,ev) {
var series = ev.result.series;
series.reverse();var numberOfSeries = ev.result.series.length;
for(var i=0;i < numberOfSeries;i++){
series[i].legendIndex = numberOfSeries - i;})
If you want to further modify the order, research javascript arrays. You should be able to move the series around within the ev.result.series array and get the results you want.
-
Reviving this thread... I used the snippet
widget.on('processresult',function(se,ev){
var series = ev.result.series;
var numberOfSeries = ev.result.series.length;
for(var i=0;i < numberOfSeries;i++){
series[i].legendIndex = numberOfSeries - i;
}
})but, this did not sort descending / ascending when the "Break By" feature is enabled on a column chart. It is still sorted in alphabetical order. I'm just curious - why would you disable the sort descending / ascending functionality when break by is enabled? It is like the chart in 5. in the original post above - but with more variance - it makes sense to have the option to sort descending.
-
As an alternative, if you do not want to modify anything in the ElastiCube, you can do the entire thing in the widget's script. Paste in the following code, and edit the "categories" array as explained in the comments.
------- COPY FROM BELOW THIS LINE ------
// Edit the list of categories below.// The order in which the items appear is the order// in which they will display in the stack.var categories = [ 'Apples', 'Oranges', 'Kiwis', 'Watermelon'];// ---------- DO NOT EDIT BELOW THIS LINE ----------var findIndex = function(txt) {return categories.indexOf(txt);};widget.on('processresult',function(se,ev){ev.result.series.sort(function(a,b){return -1return 1}return 0;});});------- DO NOT COPY THIS LINE ------
-
I agree with Troy and Simon. I need to sort each column by value, so that the largest values are at the bottom of each column, and each segment gets smaller and smaller as you go up the column. Is there a way to adjust the above code snippets to accomplish this?
I've been searching far and wide in the forums for an answer to this, and have yet to find it. Who can solve this mystery??
-
Andrew,
A little late to the game here, but I figured out the following code for doing the same thing on pie charts (variation on Aryeh's code above):
// Edit the list of categories below.
// The order in which the items appear is the order
// in which they will display in the stack.
var categories = [ 'Apples','Oranges','Kiwis','Watermelon'];
// ---------- DO NOT EDIT BELOW THIS LINE ---------- //
var findIndex = function(txt) {
return categories.indexOf(txt);
};
widget.on('processresult',function(se,ev){
ev.result.series[0].data.sort(function(a,b){
if (findIndex(a.name) < findIndex(b.name)) {
return -1
} else if (findIndex(a.name) > findIndex(b.name)) {
return 1
}
return 0;
});
});Hope that helps,
Nick
-
With 7.02, It seems Arye's script is no longer working correctly.
When the dashboard is first loaded, the break-by sections are not sorted.
But then if you change anything on any dashboard filter - then the sections become sorted correctly.
After reloading the dashboard - the sorting is ignored again until a change is made in one of the dashboard filters.
Does anyone have a fix for this?
Please sign in to leave a comment.
Comments
17 comments