0

I am trying to create bell curve using django and highcharts but its not looking like i expected,
Here is the image what exactly i wantenter image description here

currently I'm working on this 

var data = [ 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8];

Highcharts.chart('container', {

title: {
    text: 'Bell curve'
},

xAxis: [{
    title: { text: 'Data' }
}, {
    title: { text: 'Bell curve' },
    opposite: true
}],

yAxis: [{
    title: { text: 'Data' }
}, {
    title: { text: 'Bell curve' },
    opposite: true
}],

series: [{
    name: 'Bell curve',
    type: 'bellcurve',
    xAxis: 1,
    yAxis: 1,
    baseSeries: 1,
    zIndex: -1
}, {
    name: 'Data',
    type: 'scatter',
    data: data,
    marker: {
        radius: 1.5
    }
   }]
 });

Click here to see

the problem which I'm facing are following:
1. How to remove scatter 
2. How to display average point on curve.
3. How to display gradient like given in image.
Magnotta
  • 933
  • 11
  • 34

1 Answers1

2

To answer your questions is simple after reading the API docs for Highcharts. 1. To remove the scatter series from view you do set its visible and showInLegend properties to false:

{
    name: 'Data',
    type: 'scatter',
    data: data,
    marker: {
      radius: 1.5
    },
    visible: false,
    showInLegend: false
  }

  1. How to display average point on curve is a bit more complex. First you need to get the average. This you can do via javascript (taken from this really neat code):

    var sum = data.reduce(function(a, b) { return a + b; }); var avg = sum / data.length;

Then you need to show this on the actual chart. There are many options but a scatter point or Highstock flag is probably the best option.

  1. To display a gradient is really simple. You use the color property of the series and set the gradient options and set the colors to your liking:

    { name: 'Bell curve', type: 'bellcurve', xAxis: 1, yAxis: 1, baseSeries: 1, zIndex: -1, color: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(200, 200, 255)'] ] } }

wergeld
  • 14,332
  • 8
  • 51
  • 81
  • thanks for the help now only problem which i'm facing is with plag placement,can you help me to put place flag on bell curve. [Link]https://jsfiddle.net/8q1t3mwb/4/ – Magnotta Dec 02 '17 at 14:44
  • As it's specified in **docs**: *[...] there is one point at the top which is the mean of the bell curve.* (https://www.highcharts.com/docs/chart-and-series-types/bell-curve-series). Its **x** position is saved in `mean` property of the series object. **Demo:** https://jsfiddle.net/kkulig/h5zdjtbh/ – Kamil Kulig Dec 19 '17 at 16:19