Bell Curve with django is not working - django

Question

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 want
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.

Answer 1

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
}
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.
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)']
]
}
}