Merge series map in Grafana Echarts plugins

Grafana
, , ,
1

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’,…

2

Can someone help me?

3

Try this instead

1 Like
4

Thanks for solutions. but do u know is there any way to do that by Echarts plugin? Because my purpose is compare 2 box plot like Examples - Apache ECharts

5

I’ve updated my code in Edit