Dynamically setting chart positions based on measure values

[JBARLOW]

  The 4 KPIs (numeric point charts) are dynamically positioned left to right based on the measure value they contain.
  Highest on the left , lowest at the far right.

Setup overview
1. Script variable: 'charts'   type: chart    array: true

2. Onitialisation Script

// populate the dropdown with members of the sales manager dimension
var mem=Chart_1.getDataSource().getMembers("Sales_Manager__5w3m5d06b5");
Dropdown_1.addItem('All');
for (var i=0;i<mem.length;i++)
	{Dropdown_1.addItem(mem[i].id,mem[i].description);}
Dropdown_1.setSelectedKey('All');

//populate the charts script variable with all charts in the story
charts=Application.getWidgets({type:WidgetType.Chart});

3. Dropdown_1 onSelect Script

var key=this.getSelectedKey();
for(var i=0;i<charts.length;i++)	{charts[i].getDataSource().removeDimensionFilter("Sales_Manager__5w3m5d06b5");
	 if(key!=='All') {	 charts[i].getDataSource().setDimensionFilter("Sales_Manager__5w3m5d06b5",key);}}

Timer_1.start(1);

4. Timer_1  onTimeout Script

// re-order charts high to low - left to right

// Step 1: Set up two typed arrays
var chartNames = ArrayUtils.create(Type.Chart);  // chart.getName()
var chartValues = ArrayUtils.create(Type.number); // converted rawValue

// Step 2: Populate both arrays
for (var ia = 0; ia < charts.length; ia++) {
    var name = charts[ia];
    var raw = charts[ia].getDataSource().getResultSet()[0][Alias.MeasureDimension].rawValue;
    var value = ConvertUtils.stringToNumber(raw);

    chartNames.push(name);
    chartValues.push(value);
}

// Step 3: Bubble sort both arrays together — high to low
for (var i = 0; i < chartValues.length - 1; i++) {
    for (var j = 0; j < chartValues.length - i - 1; j++) {
        if (chartValues[j] < chartValues[j + 1]) {
            // Swap values
            var tempVal = chartValues[j];
            chartValues[j] = chartValues[j + 1];
            chartValues[j + 1] = tempVal;

            // Swap corresponding chart names
            var tempName = chartNames[j];
            chartNames[j] = chartNames[j + 1];
            chartNames[j + 1] = tempName;
        }
    }
}

// Define starting position and spacing
var leftPos = 50;         // Starting X position
var spacingGap = 50;      // Gap between charts

// Reposition each chart based on the previous chart's width
for (var iz = 0; iz < chartNames.length; iz++) {
    var chart = chartNames[iz];

    // Set chart left position
    chart.getLayout().setLeft(leftPos);

    // Update leftPos for the next chart
    var chartWidth = chart.getLayout().getWidth().value; // Get current chart width
    leftPos = leftPos + chartWidth + spacingGap;
}

The Chart sorting is placed in a Timer as we need to ensure the data has fully refreshed before trying to retrieve the values and apply the chart sort.