Gaussian curve with XYChart
This demo shows how we can calculate a gaussian curve data to draw using LineSeries out of source data.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// all the math taken from:// https://benmccormick.org/2017/05/11/building-normal-curves-highcharts/am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());series.dataFields.valueX = "x";series.dataFields.valueY = "y";series.dataFields.value = "value";series.sequencedInterpolation = true;series.tooltip.pointerOrientation = "vertical";series.tooltipText = "x:{x} y:{y}";
chart.cursor = new am4charts.XYCursor();chart.cursor.snapToSeries = series;
var lowerBound = -100, upperBound = 100;
var normalY = (x, mean, stdDev) => Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
var getMean = (lowerBound, upperBound) => (upperBound + lowerBound) / 2;
var getStdDeviation = (lowerBound, upperBound) => (upperBound - lowerBound) / 4;
var generatePoints = (lowerBound, upperBound) => { var stdDev = getStdDeviation(lowerBound, upperBound); var min = lowerBound - 2 * stdDev; var max = upperBound + 2 * stdDev; var unit = (max - min) / 100;
var points = []; for (var i = min; i < max; i = i + unit) { points.push(i); } return points;};
var mean = getMean(lowerBound, upperBound);var stdDev = getStdDeviation(lowerBound, upperBound);var points = generatePoints(lowerBound, upperBound);
series.data = points.map((x) => ({ x, y: normalY(x, mean, stdDev) }));<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 400px;}gausian-chart-with-amcharts