Thanks so much @GrantSmith. how does this need to be applied? the documentation doesnt give any examples so not sure how to get it to work. I tried this but when using the filter it says NaN on the chart.

var domo = window.domo;
var datasets = window.datasets;

// pass in dataset0
domo.get(data/v1/${datasets[0]})
.then(function (data) {
// Function to calculate the sum of an array of objects' property
function calculateSumOfProperty(arrayOfObjects, property) {
return arrayOfObjects.reduce((acc, curr) => acc + curr[property], 0);
}

// Calculate the sum of "On Time"
const sumOnTime = calculateSumOfProperty(data, "On Time");

// Calculate the sum of "Planned"
const sumPlanned = calculateSumOfProperty(data, "Planned");

// Calculate the ratio of "On Time" to "Planned"
const punctuality = sumOnTime / sumPlanned;

// Set the punctuality value to the gauge chart
const gaugeValueElement = document.getElementById("gaugeValue");
const gaugeFillElement = document.getElementById("gaugeFill");
const percentage = Math.min(Math.max(punctuality * 100, 0), 100);

gaugeValueElement.textContent = `${percentage.toFixed(1)}%`;
gaugeFillElement.style.transform = `rotate(${1.8 * percentage}deg)`;

// Set the color of gaugeFillElement based on the percentage value
if (percentage >= 92) {
  gaugeFillElement.style.backgroundColor = "#008B00";
} else if (percentage >= 87) {
  gaugeFillElement.style.backgroundColor = "#FFA500";
} else {
  gaugeFillElement.style.backgroundColor = "#FF0000";
}

// Set the "On Time / Planned" text below the gauge chart
const onTimePlannedTextElement = document.getElementById("onTimePlannedText");
onTimePlannedTextElement.textContent = `${sumOnTime} / ${sumPlanned}`;

// Function to update the filter
function updateDataWithFilter(data) {
  const filteredData = data.filter((item) => {

    const filterValue = data.filters.find((filter) => filter.column === "SERVICE_DATE");

    return item.SERVICE_DATE === filterValue.value;
  });

  // Recalculate the sum of "On Time" and "Planned" for the filtered data
  const sumOnTimeFiltered = calculateSumOfProperty(filteredData, "On Time");
  const sumPlannedFiltered = calculateSumOfProperty(filteredData, "Planned");

  // Calculate the ratio of "On Time" to "Planned" for the filtered data
  const punctualityFiltered = sumOnTimeFiltered / sumPlannedFiltered;

  // Update the gauge chart with the filtered data
  const percentageFiltered = Math.min(Math.max(punctualityFiltered * 100, 0), 100);
  gaugeValueElement.textContent = `${percentageFiltered.toFixed(1)}%`;
  gaugeFillElement.style.transform = `rotate(${1.8 * percentageFiltered}deg)`;

  // Set the color of gaugeFillElement based on the percentage value of the filtered data
  if (percentageFiltered >= 92) {
    gaugeFillElement.style.backgroundColor = "#008B00";
  } else if (percentageFiltered >= 87) {
    gaugeFillElement.style.backgroundColor = "#FFA500";
  } else {
    gaugeFillElement.style.backgroundColor = "#FF0000";
  }

  // Set the "On Time / Planned" text below the gauge chart for the filtered data
  onTimePlannedTextElement.textContent = `${sumOnTimeFiltered} / ${sumPlannedFiltered}`;
}

// Attach the filter update event handler
domo.onFiltersUpdate(function (data) {
  // Call the function to update data with the filter
  updateDataWithFilter(data);
});

});