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

Dey · March 2023

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

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

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

LWalker · April 2023

Hi Dey

I would try this to see if it solves the issue

Check your data
First, make sure that your data is in the correct format. The X-axis (date) should be in a date format that is recognized by Domo, and the Y-axis (analyte values) should be in a numeric format. Also, ensure that there are no missing values or outliers in your data.
Format the date axis
You can format the date axis using Domo Phoenix's "datetime" data type. This data type allows you to specify the date format, such as "YYYY-MM-DD", "MM/DD/YYYY", or "DD/MM/YYYY". You can set the format using the "axis_tick_format" property in the "propertyOverrides" object.
Customize the tooltip
To customize the tooltip that appears when you hover over a data point, you can use the "tooltip_text" property in the "propertyOverrides" object. This property allows you to display any text you want in the tooltip. You can concatenate the X-axis and Y-axis values using a template string, such as "${dimensions[dimensionColumnName]}: ${d.x} ${measures[measureColumnName]}: ${d.y}".

Let me know if this helps.

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

Comments

Categories