How to apply sorting for columns and rows both?

Answered
nipecil asked on January 11, 2023
report: {
dataSource: {
"data": [{
"columns": "Never",
"rows": "Fast Food / Quick-serve restaurant",
"count": 10
},
{
"columns": "A few times per year",
"rows": "Fast Food / Quick-serve restaurant",
"count": 46
},
{
"columns": "A few times per month",
"rows": "Fast Food / Quick-serve restaurant",
"count": 123
},
{
"columns": "1-3 days per week",
"rows": "Fast Food / Quick-serve restaurant",
"count": 80
},
{
"columns": "4-6 days per week",
"rows": "Fast Food / Quick-serve restaurant",
"count": 15
},
{
"columns": "Daily",
"rows": "Fast Food / Quick-serve restaurant",
"count": 8
},
{
"columns": "Never",
"rows": "Fast Casual",
"count": 19
},
{
"columns": "A few times per year",
"rows": "Fast Casual",
"count": 51
},
{
"columns": "A few times per month",
"rows": "Fast Casual",
"count": 141
},
{
"columns": "1-3 days per week",
"rows": "Fast Casual",
"count": 54
},
{
"columns": "4-6 days per week",
"rows": "Fast Casual",
"count": 13
},
{
"columns": "Daily",
"rows": "Fast Casual",
"count": 4
},
{
"columns": "Never",
"rows": "Casual Dining",
"count": 15
},
{
"columns": "A few times per year",
"rows": "Casual Dining",
"count": 124
},
{
"columns": "A few times per month",
"rows": "Casual Dining",
"count": 101
},
{
"columns": "1-3 days per week",
"rows": "Casual Dining",
"count": 25
},
{
"columns": "4-6 days per week",
"rows": "Casual Dining",
"count": 11
},
{
"columns": "Daily",
"rows": "Casual Dining",
"count": 6
},
{
"columns": "Never",
"rows": "Contemporary Casual",
"count": 93
},
{
"columns": "A few times per year",
"rows": "Contemporary Casual",
"count": 106
},
{
"columns": "A few times per month",
"rows": "Contemporary Casual",
"count": 52
},
{
"columns": "1-3 days per week",
"rows": "Contemporary Casual",
"count": 19
},
{
"columns": "4-6 days per week",
"rows": "Contemporary Casual",
"count": 9
},
{
"columns": "Daily",
"rows": "Contemporary Casual",
"count": 3
},
{
"columns": "Never",
"rows": "Cafes",
"count": 31
},
{
"columns": "A few times per year",
"rows": "Cafes",
"count": 44
},
{
"columns": "A few times per month",
"rows": "Cafes",
"count": 97
},
{
"columns": "1-3 days per week",
"rows": "Cafes",
"count": 76
},
{
"columns": "4-6 days per week",
"rows": "Cafes",
"count": 26
},
{
"columns": "Daily",
"rows": "Cafes",
"count": 8
}
]
},
"slice": {
"rows": [{
"uniqueName": "rows",

}],
"columns": [{
"uniqueName": "columns",

}],
"measures": [{
"uniqueName": "count",
"aggregation": "percent"
}],

"expands": {
"expandAll": true
},
"drills": {
"drillAll": false
}
},
"options": {
"grid": {
"type": "compact",
"title": "",
"showFilter": false,
"showHeaders": false,
"showTotals": "on",
"showGrandTotals": "on",
"showHierarchies": true,
"showHierarchyCaptions": true,
"showReportFiltersArea": true
},
"configuratorActive": false,
"configuratorButton": false,
"showAggregations": true,
"showCalculatedValuesButton": true,
"drillThrough": true,
"showDrillThroughConfigurator": true,
"sorting": "true",
"datePattern": "dd/MM/yyyy",
"dateTimePattern": "dd/MM/yyyy HH:mm:ss",
"saveAllFormats": false,
"showDefaultSlice": true
},
"formats": [{
"name": "",
"thousandsSeparator": " ",
"decimalSeparator": ".",
"decimalPlaces": 0,
"maxSymbols": 20,
"currencySymbol": "",
"currencySymbolAlign": "right",
"nullValue": " ",
"infinityValue": "Infinity",
"divideByZeroValue": "Infinity"
}]
}

 
this is my report object, and I want to apply sorting on values for both rows and columns.
My data will be in this format only, the uniqueName will be rows and columns. And I have to sort the data for row in the desc by default and for columns they should be in asc order. Also, I want to change the order dynamically on button clicks.
I am stuck here, I have used the sort key but it sorts it in alphabetical order, I want to sort the values. Also, I have tried the sorting object, and I am not understanding how to do this according to my requirement.
 
Please help me with this.
 

3 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster January 12, 2023

Hello, Nipecil!
 
Thank you for reaching out to us and for providing your sample report.
 
Kindly note that the default sorting by values can be specified using SortingObject as follows:

slice: {
  sorting: {
    row: {
      type: 'desc',
      tuple: ["Fast Casual"],
      measure: {
        uniqueName: "count",
        aggregation: "percent",
      },
    },
    column: {
      type: "asc",
      tuple: ["A few times per month"],
      measure: {
        uniqueName: "count",
        aggregation: "percent",
      },
    },
  },
  // other slice properties
}

 
We have prepared a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/q4zxr8hb/.
In the example, the values are sorted ascending by A few times per month column and descending by Fast Casual row.
 
Regarding your question about changing sorting dynamically on button click, please note that mentioned members have the sorting arrows shown behind the member names. These arrows are shown on hover for other members and can be used to sort by values from the UI.
 
Hope you will find our answer helpful.
Please let us know if the suggested approach works for you.
 
Kind regards,
Solomiia

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster January 19, 2023

Hello!

Hope you are doing well.

Our team is wondering if you had a chance to look through the provided example with value sorting for both rows and columns. Could you please let us know if it works for your case?

Looking forward to hearing from you.

Regards,
Solomiia

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster January 26, 2023

Hello!

Hope you are having a great week.

Just checking in to ask if the suggested sorting example was helpful.

Looking forward to hearing your response.

Regards,
Solomiia

Please login or Register to Submit Answer