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();