Synopsis

This example illustrates the Gaussian distribution. We divide the set of real numbers into 12 intervals. We generate 100,000 random numbers following the standard Gaussian distribution and determine the weight of the intervals they fall into.

            
                    const mean = 0;
                    const stddev = 1;
                    const bars = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

                    for (let i = 0; i < 100000; i += 1) {
                        rnd = getNormallyDistributedRandomNumber(mean, stddev);
                        if (rnd <= -2.5) {
                            bars[0]++;
                        }
                        else if (rnd <= -2) {
                            bars[1]++;
                        }
                        else if (rnd <= -1.5) {
                            bars[2]++;
                        }
                        else if (rnd <= -1) {
                            bars[3]++;
                        }
                        else if (rnd <= -0.5) {
                            bars[4]++;
                        }
                        else if (rnd <= 0) {
                            bars[5]++;
                        }
                        else if (rnd <= 0.5) {
                            bars[6]++;
                        }
                        else if (rnd <= 1) {
                            bars[7]++;
                        }
                        else if (rnd <= 1.5) {
                            bars[8]++;
                        }
                        else if (rnd <= 2) {
                            bars[9]++;
                        }
                        else if (rnd <= 2.5) {
                            bars[10]++;
                        }
                        else{
                            bars[11]++;
                        }
                    }
                
            

Chart

The chart's context is a div element named 'chart'. Set the size as you want.

            
                    <div id="chart">

                    </div>
                
            

We create a bar chart and give it a title.

            
                    const context = document.getElementById('chart');
                    const chart = new BarChart(context);
                    chart.layout.title = {
                        text: 'Gaussion Distribution',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                
            

Data

We set the chart's data with a data series.

            
                    chart.data = [
                        {
                            name: 'mean=0 stddev=1',
                            data: bars,
                            style: {
                                stroke: 'brown',
                                strokeWidth: 1,
                                fill: 'lightsalmon'
                            }
                        }
                    ];
                
            

Customize

The X-axis shows the intervals with formatted tick labels. Tick placement is automated on both axes.

            
                    chart.layout.xAxis = {
                        tick: {
                            text: (d) => {
                                let upperBound = -2.5 + d * 0.5;
                                let lowerBound = upperBound - 0.5;
                                let upperBoundClosing = ']';
                                if (d === 0) {
                                    lowerBound = '-Inf';
                                }
                                if (d === bars.length - 1) {
                                    upperBound = '+Inf';
                                    upperBoundClosing = '[';
                                }
                                return `]${lowerBound} ; ${upperBound}${upperBoundClosing}`;
                            }
                        }
                    };
                
            

Plot

We finally call the plot function to display the data.

            
                    chart.plot();
                
            

Putting it together

HTML

            
                    <div id="chart">

                    </div>
                
            

JavaScript

            
                    const mean = 0;
                    const stddev = 1;
                    const bars = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

                    for (let i = 0; i < 100000; i += 1) {
                        rnd = getNormallyDistributedRandomNumber(mean, stddev);
                        if (rnd <= -2.5) {
                            bars[0]++;
                        }
                        else if (rnd <= -2) {
                            bars[1]++;
                        }
                        else if (rnd <= -1.5) {
                            bars[2]++;
                        }
                        else if (rnd <= -1) {
                            bars[3]++;
                        }
                        else if (rnd <= -0.5) {
                            bars[4]++;
                        }
                        else if (rnd <= 0) {
                            bars[5]++;
                        }
                        else if (rnd <= 0.5) {
                            bars[6]++;
                        }
                        else if (rnd <= 1) {
                            bars[7]++;
                        }
                        else if (rnd <= 1.5) {
                            bars[8]++;
                        }
                        else if (rnd <= 2) {
                            bars[9]++;
                        }
                        else if (rnd <= 2.5) {
                            bars[10]++;
                        }
                        else{
                            bars[11]++;
                        }
                    }

                    const context = document.getElementById('chart');
                    const chart = new BarChart(context);
                    chart.layout.title = {
                        text: 'Gaussion Distribution',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

                    chart.data = [
                        {
                            name: 'mean=0 stddev=1',
                            data: bars,
                            style: {
                                stroke: 'brown',
                                strokeWidth: 1,
                                fill: 'lightsalmon'
                            }
                        }
                    ];

                    chart.layout.xAxis = {
                        tick: {
                            text: (d) => {
                                let upperBound = -2.5 + d * 0.5;
                                let lowerBound = upperBound - 0.5;
                                let upperBoundClosing = ']';
                                if (d === 0) {
                                    lowerBound = '-Inf';
                                }
                                if (d === bars.length - 1) {
                                    upperBound = '+Inf';
                                    upperBoundClosing = '[';
                                }
                                return `]${lowerBound} ; ${upperBound}${upperBoundClosing}`;
                            }
                        }
                    };

                    chart.plot();