CODEWITHSUNDEEP
javascriptjqueryplothighchartsboxplot
QuestionEverything
QuestionEverything

Reputation: 5137

Hicharts.js Boxplots with a mean line

I am trying to simulate a graph like the following:

enter image description here

But so far I have found code for a graph that looks like: enter image description here

this was generated from the following code: 

Highcharts.chart('container', {

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: [
        [760, 801, 848, 895, 965],
        [733, 853, 939, 980, 1080],
        [714, 762, 817, 870, 918],
        [724, 802, 806, 871, 950],
        [834, 836, 864, 882, 910]
    ]
}]

});

How do I add a another line like in the first plot in this one? Thanks?

Upvotes: 0

Views: 181

Answers (1)

ewolden
ewolden

Reputation: 5803

The example you have based your code on seems to be this one: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/box-plot/

In addition to that you need to add a series of type line to plot the line, like this: 

, {
    name: 'Here is a line',
    type: 'line',
    data: [ // x, y positions where 0 is the first category
        [0, 1000],
        [1, 718],
        [2, 951],
        [3, 969],
        [4, 969]
    ]
}

Type is set to line and values can be given either like above [[x,y], [x1, y1], ...] or like this [y, y1, ...] (where y is mapped to x = 0, y1 mapped to x = 1 etc.)

There is also a mean line plotted, which is done by this part: 

plotLines: [{
        value: 932,
        color: 'red',
        width: 1,
        label: {
            text: 'Theoretical mean: 932',
            align: 'center',
            style: {
                color: 'gray'
            }
        }
    }]

This is just a line at a constant value.

Working example: http://jsfiddle.net/y08gyoy1/

Upvotes: 1

Related Questions