How to use boxplot buckets for plotly?

[Emporea]

I want to create a boxplot graph using plotly.js and elasticsearch.

Elasticsearch has an inbuild boxplot aggregation that returns this for each trace:

{
 "aggregations": {
    "load_time_boxplot": {
      "min": 0.0,
      "max": 990.0,
      "q1": 165.0,
      "q2": 445.0,
      "q3": 725.0,
      "lower": 0.0,
      "upper": 990.0
    }
  }
}

Plotly has the following arguments for box plots. Some are obvious, but I dont know how to match up all of the elasticsearch boxplot aggregations into the plotly object.

 q1
Parent: data[type=box]
Type: data array
Sets the Quartile 1 values. There should be as many items as the number of boxes desired.

median
Parent: data[type=box]
Type: data array
Sets the median values. There should be as many items as the number of boxes desired.

q3
Parent: data[type=box]
Type: data array
Sets the Quartile 3 values. There should be as many items as the number of boxes desired.

lowerfence
Parent: data[type=box]
Type: data array
Sets the lower fence values. There should be as many items as the number of boxes desired. This attribute has effect only under the q1/median/q3 signature. If `lowerfence` is not provided but a sample (in `y` or `x`) is set, we compute the lower as the last sample point below 1.5 times the IQR.

upperfence
Parent: data[type=box]
Type: data array
Sets the upper fence values. There should be as many items as the number of boxes desired. This attribute has effect only under the q1/median/q3 signature. If `upperfence` is not provided but a sample (in `y` or `x`) is set, we compute the lower as the last sample point above 1.5 times the IQR.

notchspan
Parent: data[type=box]
Type: data array
Sets the notch span from the boxes' `median` values. There should be as many items as the number of boxes desired. This attribute has effect only under the q1/median/q3 signature. If `notchspan` is not provided but a sample (in `y` or `x`) is set, we compute it as 1.57 " IQR / sqrt(N), where N is the sample size.

mean
Parent: data[type=box]
Type: data array
Sets the mean values. There should be as many items as the number of boxes desired. This attribute has effect only under the q1/median/q3 signature. If `mean` is not provided but a sample (in `y` or `x`) is set, we compute the mean for each box using the sample values.

sd
Parent: data[type=box]
Type: data array
Sets the standard deviation values. There should be as many items as the number of boxes desired. This attribute has effect only under the q1/median/q3 signature. If `sd` is not provided but a sample (in `y` or `x`) is set, we compute the standard deviation for each box using the sample values.

let polarityBuckets = i.aggregations.publisher.buckets;
let traces = {
  sd: ???,
  notchspan: ???,
  mean: ???,
  q1: polarityBuckets.map((e) => e.polarity["q1"]),
  median: ???
  q3: polarityBuckets.map((e) => e.polarity["q3"]),
  lowerfence: polarityBuckets.map((e) => e.polarity["lower"]),
  upperfence: polarityBuckets.map((e) => e.polarity["upper"]),
  name: "test",
  type: "box",
};

I dont even know if max and min exist. The plotly boxplot config doesnt show min or max options.

Maybe some of you know what i want and know the answer.
Thank you

[Emporea]

I copied this question into ChatGPT and it gave this response:

Anyone can confirm what it said?

---

You can match the Elasticsearch boxplot aggregations to the Plotly boxplot arguments as follows:

javascript

let polarityBuckets = i.aggregations.publisher.buckets;
let traces = {
  q1: polarityBuckets.map((e) => e.polarity["q1"]),
  median: polarityBuckets.map((e) => e.polarity["q2"]),
  q3: polarityBuckets.map((e) => e.polarity["q3"]),
  lowerfence: polarityBuckets.map((e) => e.polarity["lower"]),
  upperfence: polarityBuckets.map((e) => e.polarity["upper"]),
  name: "test",
  type: "box",
};

Note that you don't need to set the mean, sd, or notchspan attributes, since they are only used in the q1/median/q3 signature, which you are already using. The min and max values are not used in the Plotly boxplot arguments, but you can use them for setting the range of the y-axis, for example:

javascript

let yaxisRange = [
  Math.min(...polarityBuckets.map((e) => e.polarity["min"])),
  Math.max(...polarityBuckets.map((e) => e.polarity["max"]))
];

let layout = {
  yaxis: {
    range: yaxisRange
  }
};

Plotly.newPlot("myDiv", [traces], layout);