Sorting Your Data

Muze provides powerful sorting capabilities that allow you to control the order of data in your visualizations. Whether you need to apply a custom sort order from your ThoughtSpot worksheet or sort by measure values, Muze's sorting API gives you full control over data presentation.

Understanding Sort Types

Muze supports two primary sorting approaches:

1. Custom Sort Order: Use a predefined list of values to determine order
2. Field-Based Sorting: Sort categories based on measure values (ascending or descending)

Custom Sort Order from Worksheet

When you apply a custom sort order to a column in ThoughtSpot worksheet, you can retrieve and apply that same order in your Muze chart using the getColumnSortInfo helper function.

Complete Example

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Diacount"
 */

const {
    muze,
    getDataFromSearchQuery,
    getColumnSortInfo
} = viz;
  
const data = getDataFromSearchQuery();
const shipModeSortInfo = getColumnSortInfo("Ship Mode");

muze.canvas()
    .rows(["Total Discount"])
    .columns(["Ship Mode"])
    .data(data)
    .config({
        axes: {
            x: {
                ordering: {
                    type: "custom",
                    values: shipModeSortInfo.customOrder
                }
            }
        }
    })
    .mount("#chart");

Sort By Fields

Field-based sorting allows you to order categories based on their associated measure values. This is particularly useful when you want to display data in order of magnitude.

Complete Example

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Discount"
 */

const {
    muze,
    getDataFromSearchQuery,
    getColumnSortInfo
} = viz;
  
const data = getDataFromSearchQuery();
const discountSortInfo = getColumnSortInfo("Total Discount");

muze.canvas()
    .rows(["Total Discount"])
    .columns(["Ship Mode"])
    .data(data)
    .config({
        axes: {
            x: {
                ordering: {
                    type: "field",
                    direction: discountSortInfo.direction || "desc",
                    field: {
                        name: "Total Discount"
                    }
                }
            }
        }
    })
    .mount("#chart");