Widget Scripts: Reorder Elements

Here are a few ready-to-use widget scripts to reorder or remove elements in your widget.

Replace the variables highlighted in bold with the appropriate values for your use case.

• Reorder date columns from newer to older
• Reorder the legend in 'Break by' charts
• Reorder bars or columns in charts
• Group smallest values in a column/bar called "Others"

Reorder date columns from newer to older

widget.on("buildquery", function(se,ev) {
ev.query.metadata[1].jaql["sort"]="desc";
})

Reorder the legend in 'Break by' charts

This will also reorder the columns themselves.

If you simply want to display the legend in reverse order, you can use this script:

widget.on("processresult",(se,ev)=>{ev.result.legend.reversed=true});

If you want to display the legend in a custom order, you can use the below script.

const breakby = ['category name 2', 'category name 3', 'category name 1']; //Specify the category names
widget.on('processresult', function(se, ev) {
ev.result.series.sort(function(a, b) {
if (breakby.indexOf(a.name) < breakby.indexOf(b.name)) {
return -1;
} else if (breakby.indexOf(a.name) > breakby.indexOf(b.name)) {
return 1;
}
return 0;
});
ev.result.legend.reversed = false;
});

Reorder bars or columns in charts

Replace the "category name " variables by the names of your bar categories.

var categories= ['category name 2', 'category name 3', 'category name 1']; //Specify the category names
widget.on('queryend',function(se,ev){
ev.rawResult.values.sort(function(a, b){
var aIndex = categories.indexOf(a[0].data);
var bIndex = categories.indexOf(b[0].data);
if (aIndex < bIndex)
return -1;
if (aIndex > bIndex)
return 1;
return 0;
})
})

Group smallest values in a column/bar called "Others"

Pie charts have an option to display top n slices and group the rest of the slices to a single slice called 'Others'. This script does the same for Column/Bar charts.

widget.on('processresult', function(widget, result) {
//specify the number of columns to keep, the rest will aggregate in "Others"
   var topN = 5;    
   var othersLabel = 'Others';
   var newValues = [];
   var othersValue = 0;

     var categories = result.result.series[0].data.map((point, index) => {
       return {
           name: result.result.xAxis.categories[index],
           y: point.y,
           color: point.color
       };
   });

      categories.sort((a, b) => b.y - a.y);
   var topItems = categories.slice(0, topN);
   var othersItems = categories.slice(topN);

     othersItems.forEach(item => {
       othersValue += item.y;
   });

    topItems.sort((a, b) => a.name.localeCompare(b.name));

     if (othersValue > 0) {
       topItems.push({
           name: othersLabel,
           y: othersValue,
           color: '#cccccc'
       });
   }

     result.result.series[0].data = topItems;
   result.result.xAxis.categories = topItems.map(item => item.name);
}); 

Related articles

• How to Customize Advanced Analytics Reports with Widget Scripts
• Customize visual styles
• Add Textual Elements
• Remove Elements