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,
};
}
Comments
-
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.
0 - Check your data
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 295 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 608 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.4K Charting
- 709 Beast Mode
- 49 App Studio
- 39 Variables
- 667 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 44 Workflows
- 7 DomoAI
- 33 Predict
- 13 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 115 Manage
- 112 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 103 Community Announcements
- 4.8K Archive