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

Dey · March 10

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//

//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 = [

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 addChart(chart){
charts.push(chart);
chart.addEventListener('cardbus', (ev) => triggerBus(chart, ev));
}

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

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

Categories