Example 4


 

Synopsis

In this example, we plot probability density functions of a Gaussian distribution with different mean and variance parameters. Values on the X-axis are shown with 2 decimal places, and those on the Y-axis with 3 decimal places. We hide the vertical gridlines and include a legend at the top-right corner.

Chart

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

            
                    <div id="chart">

                    </div>
                
            

We create a line chart, give it a title and set its background color. We also add a legend at the top-right corner of the chart.

                
                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.backgroundColor = 'beige';
                    chart.layout.title = {
                        text: 'Gaussian Distribution',
                        style: {
                            fontFamily: 'math, serif, "segoe ui"',
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                    chart.layout.legend.position = 'NorthEast';
                
            

Data

We create and style four data series for the distribution functions. Then we generate X and Y-values within [-10 ; +10]. Finally we set the chart's data.

            
                    const ds1 = {
                        name: 'mean=0, var=0.2',
                        data: [],
                        style: {
                            stroke: 'blue'
                        }
                    };
                    const ds2 = {
                        name: 'mean=0, var=1',
                        data: [],
                        style: {
                            stroke: 'red'
                        }
                    };
                    const ds3 = {
                        name: 'mean=0, var=5',
                        data: [],
                        style: {
                            stroke: 'yellow'
                        }
                    };
                    const ds4 = {
                        name: 'mean=-2, var=0.5',
                        data: [],
                        style: {
                            stroke: 'green'
                        }
                    };

                    let mean1 = 0, mean2 = 0, mean3 = 0, mean4 = -2;
                    let var1 = 0.2, var2 = 1, var3 = 5, var4 = 0.5;
                    let xValues = [];
                    for (let i = -2000; i <= 2000; i++) {
                        let x = i / 200;
                        xValues.push(x);
                        ds1.data.push(Math.exp(-Math.pow(x-mean1,2)/(2*var1))/Math.sqrt(2*Math.PI*var1));
                        ds2.data.push(Math.exp(-Math.pow(x-mean2,2)/(2*var2))/Math.sqrt(2*Math.PI*var2));
                        ds3.data.push(Math.exp(-Math.pow(x-mean3,2)/(2*var3))/Math.sqrt(2*Math.PI*var3));
                        ds4.data.push(Math.exp(-Math.pow(x-mean4,2)/(2*var4))/Math.sqrt(2*Math.PI*var4));
                    }

                    chart.data = {
                        x: xValues,
                        y: [ds1, ds2, ds3, ds4]
                    };
                
            

Customize

We hide gridlines along the X-axis (vertical). We show values on the X and Y axes with 2 and 3 decimal places respectively. We also style the zooming area.

            
                    chart.layout.xAxis.grid.visible = false;
                    chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    chart.layout.yAxis.tick.text = (val) => val.toFixed(3);
                    chart.interactivity.zoomRect = {
                        stroke: 'darkgray',
                        fill: 'lightgray'
                    };
                
            

Plot

We finally call the plot function to display the data.

            
                    chart.plot();
                
            

Putting it together

HTML

            
                    <div id="chart">

                    </div>
                
            

JavaScript

            
                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.backgroundColor = 'beige';
                    chart.layout.title = {
                        text: 'Gaussian Distribution',
                        style: {
                            fontFamily: 'math, serif, "segoe ui"',
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                    chart.layout.legend.position = 'NorthEast';

                    const ds1 = {
                        name: 'mean=0, var=0.2',
                        data: [],
                        style: {
                            stroke: 'blue'
                        }
                    };
                    const ds2 = {
                        name: 'mean=0, var=1',
                        data: [],
                        style: {
                            stroke: 'red'
                        }
                    };
                    const ds3 = {
                        name: 'mean=0, var=5',
                        data: [],
                        style: {
                            stroke: 'yellow'
                        }
                    };
                    const ds4 = {
                        name: 'mean=-2, var=0.5',
                        data: [],
                        style: {
                            stroke: 'green'
                        }
                    };

                    let mean1 = 0, mean2 = 0, mean3 = 0, mean4 = -2;
                    let var1 = 0.2, var2 = 1, var3 = 5, var4 = 0.5;
                    let xValues = [];
                    for (let i = -2000; i <= 2000; i++) {
                        let x = i / 200;
                        xValues.push(x);
                        ds1.data.push(Math.exp(-Math.pow(x-mean1,2)/(2*var1))/Math.sqrt(2*Math.PI*var1));
                        ds2.data.push(Math.exp(-Math.pow(x-mean2,2)/(2*var2))/Math.sqrt(2*Math.PI*var2));
                        ds3.data.push(Math.exp(-Math.pow(x-mean3,2)/(2*var3))/Math.sqrt(2*Math.PI*var3));
                        ds4.data.push(Math.exp(-Math.pow(x-mean4,2)/(2*var4))/Math.sqrt(2*Math.PI*var4));
                    }

                    chart.data = {
                        x: xValues,
                        y: [ds1, ds2, ds3, ds4]
                    };

                    chart.layout.xAxis.grid.visible = false;
                    chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    chart.layout.yAxis.tick.text = (val) => val.toFixed(3);
                    chart.interactivity.zoomRect = {
                        stroke: 'darkgray',
                        fill: 'lightgray'
                    };

                    chart.plot();
                
            

Comments