# How to use boxplot buckets for plotly?

**URL:** <https://discuss.elastic.co/t/how-to-use-boxplot-buckets-for-plotly/325148>\
**Category:** Elasticsearch\
**Created:** [February 9, 2023, 1:53pm UTC](https://discuss.elastic.co/t/how-to-use-boxplot-buckets-for-plotly/325148 "2023-02-09T13:53:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emporea](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/emporea/32/101071_2.png) [@Emporea](https://discuss.elastic.co/u/Emporea)\
**Post date:** [February 9, 2023, 1:53pm UTC](https://discuss.elastic.co/t/how-to-use-boxplot-buckets-for-plotly/325148/1 "2023-02-09T13:53:27Z")

</div>

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

Elasticsearch has an [inbuild boxplot aggregation](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-metrics-boxplot-aggregation.html) that returns this for each trace:

```auto
{
 "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.](https://plotly.com/javascript/reference/box/#box) Some are obvious, but I dont know how to match up all of the elasticsearch boxplot aggregations into the plotly object.

```auto
 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.

```

```auto
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

---

<div class="post-metadata">

**Author:** ![Emporea](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/emporea/32/101071_2.png) [@Emporea](https://discuss.elastic.co/u/Emporea)\
**Post date:** [February 9, 2023, 2:16pm UTC](https://discuss.elastic.co/t/how-to-use-boxplot-buckets-for-plotly/325148/2 "2023-02-09T14:16:02Z")

</div>

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

```auto
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

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 9, 2023, 2:16pm UTC](https://discuss.elastic.co/t/how-to-use-boxplot-buckets-for-plotly/325148/3 "2023-03-09T14:16:38Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.