DDX Bricks Scatter chart - unable to get the X axis to switch from values to dates, from dropdown

Hello all,

Ive been trying, to build a scatter plot for a set of analytes that lets me trend one analyte vs another. The complication comes in when I want the X axis to display the date tested.
When i select the date tested, the X axis changes from a normal scatter to this.

I have tried using ternary operators, if else, and then some. But I cant get the date to be displayed and trended correctly for the X axis, this is the main issue. The other being that when you mouse over the data point it doesnt show the x analyte but instead will show

yAnalyte:(value)

null:(value) .

But that by far is a secondary issue.

If anyone is willing to give me a hand, and figure out what im missing id be greatful,

Heres the bits, I left out the operators etc:

//CSS//
#dropdownBar{
padding: 20px 20px 0;
}#dropdownBar select{
display: inline-block;
width: 200px;
margin: 0 8px;
}

//HTML//

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@domoinc/domo-phoenix@0.17.0/build/global/domoPhoenix.js" integrity="sha256-APMIhb9qxeiI9OnOJHNzV3s8TG2nu1FUDPtL5c91PHI=" crossorigin="anonymous"></script><div id="dropdownBar">
<span>Trend</span>
<select id="measures" class="form-select"></select>
<span>by</span>
<select id="dimensions" class="form-select"></select>
</div>

<div id="myDiv"></div>

//JS//


var measures = {
None: 'Choose Analyte',

Analyte_1: 'Analyte 1',
Analyte_2: 'Analyte 2',
Analyte_3: 'Analyte 3',
Analyte_4: 'Analyte 4',
Analyte_5: 'Analyte 5',
};
var dimensions = {
Date_Received: 'Date Received',
Analyte_1: 'Analyte 1',
Analyte_2: 'Analyte 2',
Analyte_3: 'Analyte 3',
Analyte_4: 'Analyte 4',
Analyte_5: 'Analyte 5',
};
//Step 2. Style your chart using the following properties
//--------------------------------------------------
// Properties
//--------------------------------------------------

var symbolType = 'Default'; //'Circle', 'Square', 'Diamond', 'Hexagon', 'Pentagon'
var symbolSize = 'Default'; //'XX-Small', X-Small', 'Small', 'Medium', 'Large', 'X-Large', 'XX-Large'
var symbolBorderColor = 'Default'; //'#000000'
var valueFormat = "Default";
var valDecimalPlaces = "Default"; // "None", ".0", ".00", ".000", ".0000", ".00000"
var dataLabelText = "Default";
var symbolTransparencyPercent = 0; //0-100
var chartMargin = 20; //space to leave around chart (in pixels)
var enableFiltering = true; //set to false to disable page filtering (cardbus)

//--------------------------------------------------
// For ultimate flexibility, modify the code below!
//--------------------------------------------------

//Available globals
var domo = window.domo;
var datasets = window.datasets;
var DomoPhoenix = window.DomoPhoenix;
var chartContainer = document.getElementById('myDiv'); //get "myDiv" from the html tab

//Data Column Names
var measureColumnName = Object.keys(measures)[0];
var measureSelector = document.getElementById('measures');
populateSelector(measureSelector, measures, function(value){
measureColumnName = value;
getData();
});

var dimensionColumnName = Object.keys(dimensions)[0];
var dimensionSelector = document.getElementById('dimensions');
populateSelector(dimensionSelector, dimensions, function(value){
dimensionColumnName = value;
getData();
});

getData();
var dataSeriesColumnName = 'Name'
var dataSeriesGroup = 'Lab_ID'
function getData(){
//Form the data query
var fields = [measureColumnName, dimensionColumnName, dataSeriesColumnName];
var groupby = [dataSeriesGroup];
var query = /data/v1/${datasets[0]}?fields=${fields.join()}&groupby=${groupby.join()}&limit=100000;
//var query = /data/v1/${datasets[0]}?fields=${fields.join()}&limit=100000;

//Get the data and chart it
chartContainer.style.visibility = 'hidden';
domo.get(query).then(function(data) {
chartIt(data);
chartContainer.style.visibility = 'visible';
});
}
var chart = null;
var cardBus = new CardBus();
function chartIt(data) {
// Read more about data types and mappings here: https://domoapps.github.io/domo-phoenix/#/domo-phoenix/api
var columns = [

{   type: DomoPhoenix.DATA_TYPE.DATE,       

    name: dimensionColumnName,

    mapping: DomoPhoenix.MAPPING.XTIME

},

{

    type: DomoPhoenix.DATA_TYPE.DOUBLE,

    name: measureColumnName,

    mapping: DomoPhoenix.MAPPING.VALUE

},

{

    type: DomoPhoenix.DATA_TYPE.STRING,

    name: dataSeriesColumnName,

    mapping: DomoPhoenix.MAPPING.SERIES

}

  ];

var propertyOverrides = {
xy_symbol_type: symbolType,
xy_symbol_size: symbolSize,
xy_symbol_border_line_color: symbolBorderColor,
bubble_transparency_percent: symbolTransparencyPercent,
title_x : dimensions[dimensionColumnName],
title_y : measures[measureColumnName],
};

// Set your "Chart Options": https://domoapps.github.io/domo-phoenix/#/domo-phoenix/api
var size = getChartSize();
var options = {
width: size.width,
height: size.height,
properties: propertyOverrides
};

// Create the Phoenix Chart
var phoenixData = {columns: columns, rows: data};
chart = new DomoPhoenix.Chart(DomoPhoenix.CHART_TYPE.BUBBLE, phoenixData, options);

// Remove any previous canvas element
chartContainer.firstChild && chartContainer.removeChild(chartContainer.firstChild);

// Append the canvas element to your div
chartContainer.appendChild(chart.canvas);
chartContainer.style.margin = ${chartMargin}px ${chartMargin}px 0;

// Handle click events
enableFiltering && cardBus.addChart(chart);

// Render the chart when you're ready for the user to see it
chart.render();
}

window.addEventListener && window.addEventListener('resize', function(){
var size = getChartSize();
chart && chart.resize(size.width, size.height);
});

///// Helper Functions /////////////////////
var dropdownBar = document.getElementById('dropdownBar');
function getChartSize(){
var barHeight = dropdownBar.offsetHeight;
return {
width: window.innerWidth - chartMargin * 2,
height: window.innerHeight - barHeight - chartMargin * 2,
}
}

function populateSelector(selector, names, onChange) {
var options = Object.keys(names);
for(i = 0; i < options.length; i++) {
var key = options[i];
var opt = document.createElement('option');
opt.value = key;
opt.innerText = names[key];
selector.appendChild(opt);
}

selector.addEventListener('change', function() {
onChange(this.value);
});
}

function CardBus() {
var charts = [];

function triggerBus(srcChart, ev){
charts.forEach(chart => {
if(srcChart == chart){
var isHighlightEvent = ev.highlight !== undefined;
var isDrillEvent = ev.applyfilters !== undefined;
if(isHighlightEvent){
var filters = ev.highlight;
chart.highlight(filters);
}
if(isDrillEvent){
var filters = ev.applyfilters;
console && console.log("Drill event", filters);
if (filters != null){
for (var i=0; i < filters.length; i++){
filters[i].operator = filters[i].operand;
}
}
domo.filterContainer(filters);
}
}
})
}

function addChart(chart){
charts.push(chart);
chart.addEventListener('cardbus', (ev) => triggerBus(chart, ev));
}

return {
addChart: addChart,
triggerBus: triggerBus,
};
}