Highcharts boxplot is currently malfunctioning by presenting inaccurate values for the high and median

Question

Highcharts boxplot is currently malfunctioning by presenting inaccurate values for the high and median

I am currently working on generating a box plot based on a basic set of data:

    var box_plot = Highcharts.chart(container, {

        chart: {
            type: 'boxplot'
        },

        title: {
            text: chart_title
        },

        legend: {
            enabled: false
        },
        series: [{
            name: 'Observations',
            data: [
                [1,2,3,4,5,6,7,8,9,10,11,12,13]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }]      
    });
    return box_plot;

However, upon generating the box plot, it displays the high as 6 and median as 4 instead of the actual values in the dataset where the high is 13 and median is 6.

I would appreciate if someone could point out what I might be doing wrong. Attached are screenshots of the code and the box plot for reference.

Thank You

https://i.sstatic.net/pxyQo.png

javascript highcharts statistics

Answer 1

Answer №1

There are two ways to provide data to boxplot series:

One way is to use an array of arrays with 6 or 5 values. The first value represents x, low, q1, median, q3, and high respectively. If the first value is a string, it will be used as the point's name and the x value will be inferred. You can also omit the x value, in which case the inner arrays should have a length of 5. Highcharts will automatically calculate the x value, starting at 0 and incrementing by 1, or based on the pointStart and pointInterval specified in the series options.
```
data: [
  [0, 3, 0, 10, 3, 5],
  [1, 7, 8, 7, 2, 9],
  [2, 6, 9, 5, 1, 3]
]
```
Another way is to use an array of objects with named values. If the total number of data points exceeds the series' turboThreshold, this option is not available. See the example below for how to structure the data:
```
data: [{
  x: 1,
  low: 4,
  q1: 9,
  median: 9,
  q3: 1,
  high: 10,
  name: "Point2",
  color: "#00FF00"
}, {
  x: 1,
  low: 5,
  q1: 7,
  median: 3,
  q3: 6,
  high: 2,
  name: "Point1",
  color: "#FF00FF"
}]
```

If you need to perform any data calculation procedures, Highcharts does not handle this automatically. You must prepare the required data structure yourself. Here is an example:

const data = [
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
];

const processedData = data.map((dataEl, index) => ({
  x: index,
  low: Math.min(...dataEl),
  median: dataEl[(dataEl.length - 1) / 2],
  high: Math.max(...dataEl),
  ...
}));

Check out the live demo here: http://jsfiddle.net/BlackLabel/eqz4851x/

For more information, refer to the API Reference: https://api.highcharts.com/highcharts/series.boxplot.data

Answer 2

There are two ways to provide data to boxplot series:

One way is to use an array of arrays with 6 or 5 values. The first value represents x, low, q1, median, q3, and high respectively. If the first value is a string, it will be used as the point's name and the x value will be inferred. You can also omit the x value, in which case the inner arrays should have a length of 5. Highcharts will automatically calculate the x value, starting at 0 and incrementing by 1, or based on the pointStart and pointInterval specified in the series options.
```
data: [
  [0, 3, 0, 10, 3, 5],
  [1, 7, 8, 7, 2, 9],
  [2, 6, 9, 5, 1, 3]
]
```
Another way is to use an array of objects with named values. If the total number of data points exceeds the series' turboThreshold, this option is not available. See the example below for how to structure the data:
```
data: [{
  x: 1,
  low: 4,
  q1: 9,
  median: 9,
  q3: 1,
  high: 10,
  name: "Point2",
  color: "#00FF00"
}, {
  x: 1,
  low: 5,
  q1: 7,
  median: 3,
  q3: 6,
  high: 2,
  name: "Point1",
  color: "#FF00FF"
}]
```

If you need to perform any data calculation procedures, Highcharts does not handle this automatically. You must prepare the required data structure yourself. Here is an example:

const data = [
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
];

const processedData = data.map((dataEl, index) => ({
  x: index,
  low: Math.min(...dataEl),
  median: dataEl[(dataEl.length - 1) / 2],
  high: Math.max(...dataEl),
  ...
}));

Check out the live demo here: http://jsfiddle.net/BlackLabel/eqz4851x/

For more information, refer to the API Reference: https://api.highcharts.com/highcharts/series.boxplot.data

Highcharts boxplot is currently malfunctioning by presenting inaccurate values for the high and median

Answer №1

Similar questions

The functionality of $state.go within $stateChangeStart in the app.run is not functioning properly in AngularJS

Circular JQuery carousel tracking

Obtain a particular value from a JSON file using JavaScript

Data is not being saved in the database through Ajax requests

What is the best way to arrange the elements of a dropdown list in reverse order?

Rearrange DIV elements by clicking a button that redirects you to a different webpage

Submit form information and navigate to a different webpage without using AJAX

Tips for utilizing onsubmit following an ajax validation check

Using Three.js for 3D modeling in web development, the JSONLoader coupled

Executing a JavaScript function after making changes to a table using PHP

The initial call to AJAX GET may result in undefined, but it successfully retrieves data on the subsequent attempt

What issue is being encountered with this JavaScript generated by PHP?

Is there a way to ensure that a statement will not execute until the completion of a preceding function?

Navigating the data returned by an AJAX call can be quite perplexing

Ensuring validity using dynamic context objects within Joi

What could be the reason for the text not showing up?

Tips on effectively organizing information retrieved from an XML file?

When using `defineModel` in Vue, the returned value can be either an object or

Retrieve the $http data from a function that is external to it

"Uh oh! Encountered an error while trying to extend an unrecognized button type: copyHtml5. Here's a guide on utilizing datatables.net-buttons-bs4