CODEWITHSUNDEEP
javascriptinputhighchartsvisualizationboxplot
QuestionEverything
QuestionEverything

Reputation: 5097

Highchart.js variable length input doesn't work

This input would work well with highcharts:

data1 = [[2, 3, 3.5, 4], [1, 1.5, 2, 3]]

But this won't:

data2 = [[2, 3, 3.5, 4, 4.5], [1, 1.5, 2, 3]]

Here the only difference is that in the first item, there is one more data point. Why would highchart fail to make a boxplot from it? I think all it needs to generate a boxplots like median, quartiles and minimum and maximum are all there in the second dataset too.

This is my code: 

dt = [
  [760, 801, 848, 895, 930],
  [733, 853, 939, 980, 1080],
  [714, 762, 817, 870, 918],
  [724, 802, 806, 871, 950],
  [834, 836, 864, 882, 910]
];


Highcharts.chart('boxcontainer', {

  chart: {
    type: 'boxplot'
  },

  title: {
    text: 'Highcharts box plot styling'
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
      text: 'Experiment No.'
    }
  },

  yAxis: {
    title: {
      text: 'Observations'
    }
  },

  plotOptions: {
    boxplot: {
      fillColor: '#F0F0E0',
      lineWidth: 2,
      medianColor: '#0C5DA5',
      medianWidth: 3,
      stemColor: '#A63400',
      stemDashStyle: 'dot',
      stemWidth: 1,
      whiskerColor: '#3D9200',
      whiskerLength: '20%',
      whiskerWidth: 3
    }
  },

  series: [{
    name: 'Observations',
    data: dt
  }]

});

How can I solve this problem?

Upvotes: 0

Views: 55

Answers (1)

Strikers
Strikers

Reputation: 4776

Highcharts accepts input data in two formats

  1. Array of numbers
  2. array of objects

Especially when it comes to graphs like boxplot which need multiple values to plot a single point on the graph these approaches will help you achieve what we need.

Here are the 2 ways of doing for Boxplot. 1. An array of arrays with 6 or 5 values. In this case, the values correspond to x,low,q1,median,q3,high

data: [
    [0, 3, 0, 10, 3, 5],
    [1, 7, 8, 7, 2, 9],
    [2, 6, 9, 5, 1, 3]
]

  1. An array of objects with named values.

    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"}]

So in the first approach when an extra value appears in the array is distorted and hence is your graph.

When ever you would like to have extra values in the data that are not needed for plotting but are important, you can go with the second approach.

Here are the links for your ref: API : https://api.highcharts.com/highcharts/series.boxplot.data Exaample: http://jsfiddle.net/fzwu1ods/

Upvotes: 1

Related Questions