Testing Plots Version 3.7

Sequential plot with line:

Code:

<div id="seqplotdiv"></div>
<script>
let npts = 200;
let xpts = [];
let ypts = [];
let amp = 100;
let sigma = 1.
xpts.length = 0;
ypts.length = 0;
let x0 = 0;
let x = -5*sigma;
let dx = -2*x/npts;
//
//  sequential scatterplot:
//
for (var i=0; i<npts; i++) {
    var arg = (x0-x)/sigma;
    var yv = amp*Math.exp(-.5*arg*arg);
    ypts.push(yv);
    x = x + dx;
}
let seqplot = new UMD_plot("seqplotdiv");
let options_sea = {
    width: 500,
    height: 500,
    ymin: 0,
    ymax: 100,
    xmin : 10,
    xmax : npts-10,
    background:"#a5a5a5", 
    font_size: 14, 
    xgrid: 6,
    xtitle: "xaxis",
    ytitle: "gaussian",
    points: [{x:100,y:100,type:"box",fill:true,size:5,color:"yellow"}],
    xdata: "sequential",
    ydata: [{
            data: ypts,
            type: "line",
            size: 0.5,
            color: "blue"
            }]
    };
seqplot.plotit(options_sea);
</script>

Scatter plot with closed circles:

Code:

<div id="scatplotdiv"></div>
<script>
let npts = 200;
let xpts = [];
let ypts = [];
let amp = 100;
let sigma = 1.
xpts.length = 0;
ypts.length = 0;
let x0 = 0;
let x = -5*sigma;
let dx = -2*x/npts;
//
//  sequential scatterplot:
//
for (var i=0; i<npts; i++) {
    var arg = (x0-x)/sigma;
    var yv = amp*Math.exp(-.5*arg*arg);
    xpts.push(x);
    ypts.push(yv);
    x = x + dx;
}
let scatplot = new UMD_plot("scatplotdiv");
let options_scat = {
    width: 500,
    height: 500,
    ymin: 0,
    ymax: 100,
    xmin : -5*sigma,
    xmax : +5*sigma,
    background:"#a5a5a5", 
    font_size: 12, 
    xgrid: 10,
    xtitle: "xaxis",
    ytitle: "gaussian",
    xdata: xpts,
    ydata: [{
            data: ypts,
            type: "circle",
            fill: true,
            size: 3,
            color: "green"
            }]
    };
scatplot.plotit(options_scat);
</script>

Satterplot with rectangles:

Code:

<div id="rectplotdiv"></div>
<script>
let rectplot = new UMD_plot("rectplotdiv");
let nptsr = 20;
x = -5*sigma;
dx = -2*x/nptsr;
let xptsr = [];
let yptsr = [];
for (var i=0; i<nptsr; i++) {
    var arg = (x0-x)/sigma;
    var yv = amp*Math.exp(-.5*arg*arg);
    xptsr.push(x);
    yptsr.push(yv);
    x = x + dx;
}
let options_rect = {
    width: 500,
    height: 500,
    ymin: 0,
    ymax: 100,
    xmin : -5*sigma,
    xmax : +5*sigma,
    background:"#a5a5a5", 
    font_size: 12, 
    xgrid: 10,
    xtitle: "xaxis",
    ytitle: "gaussian",
    xdata: xptsr,
    ydata: [{
            data: yptsr,
            type: "rect",
            fill: true,
            color: "purple"
            }]
    };</script>
rectplot.plotit(options_rect);

Histogram with error bars Sqrt(N)

Code:

<div id="histdiv"></div>
<script>
let histplot = new UMD_plot("histplotdiv");
let xptsh = [];
xptsh.length = 0;
let nptsh = 1000;
for (var i=0; i<nptsh; i++) {
    xptsh.push(Math.random());
}
let options_hist = {
    width: 500,
    height: 500,
    background:"#a5a5a5", 
    font_size: 12, 
    xgrid: 10,
    xtitle: "Random()",
    ytitle: "Number",
    hist: {
        bins: 20,
        data: xptsh,
        xlow: 0,
        xhigh: 1,
        fill: true,
        color: "yellow",
        stats: true,
        errors: true,
        ecolor: "red"
    }
}
histplot.histogram(options_hist);
</script>

Simple plot with ymin and ymax:

Code:

let smmplot = new UMD_plot("smmplotdiv");
let nptss = 20;
let yptss = [];
for (var i=0; i<nptss; i++) {
    yptss.push(4*(Math.random()-0.5));
}
//console.log(ypts);
options_seq = {
    width: 500,
    height: 500,
    background:"#a5a5a5", 
    font_size: 12, 
    xgrid: 10,
    ymin: -2,
    ymax: +2,
    xtitle: "Sequential",
    ytitle: "Number",
    xdata: "sequential",
    ydata: [{
        data: yptss,
        color: "yellow",
        type: "line",
        size: 0.5
    }]
}
smmplot.plotit(options);