Creating bell curves/normal distributions?

Nick Ochoski

unread,

Aug 22, 2013, 5:45:04 PM8/22/13

to google-visua...@googlegroups.com

Is it possible to create bell curves in Google Charts line graphs? Is there a way to provide a value and standard deviation and plot the distribution?

Thank you,

Nick

asgallant

unread,

Aug 22, 2013, 6:24:28 PM8/22/13

to google-visua...@googlegroups.com

The API won't do the calculations for you, but if you calculate the values of the points on the curve, you can draw a chart with them.

David Wilkinson

unread,

Nov 6, 2015, 10:12:12 AM11/6/15

to Google Visualization API

Yes, it is possible. Here is an example:

This is the code:

<!DOCTYPE html>

<html>

<head>

<title>http://exceluser.com/downloads/examples/post_900_102/index.htmlt</title>

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('number', 'X Value');

data.addColumn('number', 'Y Value');

function NormalDensityZx(x, Mean, StdDev) {

var a = x - Mean;

return Math.exp(-(a * a) / (2 * StdDev * StdDev)) / (Math.sqrt(2 * Math.PI) * StdDev);

}

var chartData = new Array([]);

var index = 0;

for (var i = -3; i < 3.1; i += 0.1) {

chartData[index] = new Array(2);

chartData[index][0] = i;

chartData[index][1] = NormalDensityZx(i, 0, 1);

index++;

}

data.addRows(chartData);

options = { height: 500, width: 800, legend: 'none' };

options.hAxis = {};

options.hAxis.minorGridlines = {};

options.hAxis.minorGridlines.count = 12;

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

google.load('visualization', '1', { packages: ['corechart'], callback: drawChart });

</script>

</head>

</body>

</html>

Best regards

David Wilkinson

Reply all

Reply to author

Forward