Hi all,
I am plotting box-plot using Echarts plugins:
My sample box-plot is here: Examples - Apache ECharts
And my problem is I can’t import data into echarts plugins:
My code:
data.series.map((s) => {
if (s.refID === 'DATE_FILTERED') {
categories_date =
s.fields.find((f) => f.name === 'date').values.buffer ||
s.fields.find((f) => f.name === 'date').values;
} else if (s.refID === 'VH_CTQ') {
var_20240102 =
s.fields.find((f) => f.name === '2024-01-02').values.buffer ||
s.fields.find((f) => f.name === '2024-01-02').values;
var_20240103 =
s.fields.find((f) => f.name === '2024-01-03').values.buffer ||
s.fields.find((f) => f.name === '2024-01-03').values.buffer;
var_20240104 =
s.fields.find((f) => f.name === '2024-01-04').values.buffer ||
s.fields.find((f) => f.name === '2024-01-04').values.buffer;
}
vh_ctq_data = categories_date.map((id, index) => {
return {
value: [categories_date[index]
, var_20240102[index]
, var_20240103[index]
, var_20240104[index]]
};
});
// return categories_date.map((d, i) => [d, var_20240102[i], var_20240103[i], var_20240104[i]]);
});
My first query table like:
| 2024-01-02 | 2024-01-03 | 2024-01-04 | 2024-01-05 | 2024-01-06 | 2024-01-07 |
|---|---|---|---|---|---|
| 1.122 | 1.118 | 1.125 | 1.122 | 1.118 | 1.128 |
| 1.115 | 1.125 | 1.122 | 1.128 | 1.126 | 1.122 |
| 1.127 | 1.118 | 1.114 | 1.109 | 1.134 | 1.128 |
| NULL | 1.118 | 1.124 | 1.104 | 1.114 | NULL |
| NULL | 1.115 | 1.111 | 1.126 | 1.119 | NULL |
| NULL | 1.127 | NULL | NULL | 1.118 | NULL |
| NULL | NULL | NULL | NULL | 1.106 | NULL |
My second query table like:
| date |
|---|
| 2024-01-02 |
| 2024-01-03 |
| 2024-01-04 |
| 2024-01-05 |
| 2024-01-06 |
| 2024-01-07 |
My question: How can I draw box plot with x-Axis is date column? and if my date column is variable (dynamic) so how can apply that?
Thank you so much
Edit 1: my current code
let categories_date = ['2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'];
// Create an object to store variables dynamically
let variableObject = {};
// Assign values to dynamically created variables with underscores instead of hyphens
categories_date.forEach((date, index) => {
// Replace hyphens with underscores in variable names
let variableName = 'var_' + date.replace(/-/g, '_');
// Generate a random array for each variable
let randomArray = Array.from({ length: 100 }, () => Math.random() * 100);
// Assign the random array to the variable
variableObject[variableName] = randomArray;
});
// // Now you can access and display the variables and their arrays
// for (const variableName in variableObject) {
// console.log(`${variableName}:`, variableObject[variableName]);
// }
// Map the values based on the dynamic variables
let mapArr = categories_date.map(date => variableObject['var_' + date.replace(/-/g, '_')]);
// Clean the array of arrays
const cleanArrayOfArrays = mapArr.map(innerArray => innerArray.filter(element => element !== undefined));
return {
title: {
text: 'Box-Plot Comparison for CTQ Control',
left: 'left'
},
dataset: [
{
source: cleanArrayOfArrays,
dimensions: categories_date.map(date => ({ name: date, type: 'ordinal' }))
},
{
source: cleanArrayOfArrays,
dimensions: categories_date.map(date => ({ name: date, type: 'ordinal' }))
},
{
fromDatasetIndex: 0,
transform: {
type: 'boxplot',
// config: { itemNameFormatter: 'expr {value}' }
}
},
{
fromDatasetIndex: 1,
transform: {
type: 'boxplot'
// config: { itemNameFormatter: 'expr {value}' }
}
}
],
legend: {
top: '10%'
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '5%',
top: '20%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
// data: categories_date,
boundaryGap: true,
nameGap: 30,
splitArea: {
show: true
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name: 'Value',
// min: 1.2,
// max: 1.3,
splitArea: {
show: false
}
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 20
},
{
show: true,
type: 'slider',
top: '90%',
xAxisIndex: [0],
start: 0,
end: 20
}
],
series: [
{
name: 'Vietnam',
type: 'boxplot',
datasetIndex: 2
// datasetId: 2
},
{
name: 'Gumi',
type: 'boxplot',
datasetIndex: 3
// datasetId: 3
}
]
};
But I can’t find the way to mapping categories_date with x-Axis like ‘2024-01-02’, ‘2024-01-03’,…