Table of Contents

	let plot = new UMD_plot("mydiv");
	.
	.
	.
	console.log(plot.version);

To make a scatterplot, let's say you have some data you want to plot, here we will make an array called y and fill it with 100 random numbers.

	let y = [];
	for (var i=0; i<100; i++) x.push(Math.random());

	let plot = new UMD_plot("divid");

	plot.plotit(options)

The following lists the different ways available to show the plot

• Line - Connect the data points with a line
• Circle - Draw circles centered at the data point
• Box - Draw a box centered at the data point
• Rect - Draw a rectangle with left edge at the data point from y=0 to the data value

• ydata is an option used to input an array of objects, where each object specifies a plot you want to make (so that you can overlay many plots). Each object in the ydata array has the following key/value pairs:

  {
      data: y,            // y is an array of data points for the vertical
      type: "line",       // or "circle" or "box", or "rect" not case sensitive
      color: "green",     // or "blue", or "#31421" or "rgb(122,32,51)", not case sensitive
      size:  0.5,         // line thickness for type "line", radius for "circle", side for "box"
      divide_by: 100,	    // divide each data point by this value (default=1)
      fill: true          // true for fill, false for stroke (open box, open circle, not applied to "line")
  }
  

  This means that if you wanted to have the above object in the options, you would do this:

  let yobj = {
      data: y,
      type: "line",
      color: "green",
      size:  0.5,
      fill: true		
  };
  options = {
      ydata: [yobj],
       .
       .
       .
  };
  

  If you wanted to plot 2 different data sets, say y1 and y2, then you would need a yobj1 for y1 and yobj2 for y2 and you would put them into your options like this:

  options = {
      ydata: [yobj1,yobj2],
       .
       .
       .
  };
  

  and of course with all other options you might want (see below)
• xdata is either an array of values for the x-axis, to be plotted in conjunction with ydata. Note that the code will loop over ydata elements, so if xdata doesn't have at least as many as ydata, it will bomb and complain in the console.

  Also, if you just want to plot ydata values sequentially, using the index as the x-axis points, just do this:

  xdata: "sequential"
  

  Actually, that's the default so if you leave it out, it should still work, and plot the values in the ydata objects sequentially.

let plot = UMD_plot("mydiv");
let yobj1 = {
    data: y,
    type: "line",
    color: "blue",
    size:  0.5,
};
let yobj2 = {
    data: y,
    type: "circle",
    color: "red",
    size:  3,
    fill: false
};
options = {
    ydata: [yobj1,yobj2],
    title: "this is the overall plot title",
    xtitle: "this goes along the bottom horizontal",
    ytitle: "this goes along the vertical to the left"
    width: 500,
    height: 600,
 };
  .
  .
  .
plot.plotit(options);

options = {
	.
	.
	.
	points: [
		{x:2,y:5,type:"circle",size:"5",color:"blue",fill:true},
		{x:1,y:4,type:"circle",size:"5",color:"red",fill:false}
	],
	.
	.
	.
}

The title string allows you to have different colors for different parts of the title. For instance, if you want to have a title that looks like this:

The blue part of the title followed by the red part of the title

you can do this by adding this to the title string that you pass:

/"blue"/The blue part of the title /"black"/folowed by /"red"/the red part of the title

	let hist = UMD_plot("divid");

	hist.histogram(options);

	options = {
		title : "your title",
		.
		.
		.
		hist : {
			bins: "number of bins",
			data: "1-d array of points to bin",
			xlow: "low edge of low bin",
			xhigh: "high edge of high bin",
			color: "color of the histogram",   // default is "blue"
			fill: "boolean for fill (true) or stroke (false)",  // default is true
			stats: "boolean, true for display, false to not display", // default is false
			errors: "boolean true for sqrt(n)", // default is false
			ecolor: "color of error bars" // default is "yellow"
		}
	}

• Horizontal. You will see a very small yellow dot in the middle of the x-axis. If you click anywhere inside the x-axis labels area and to the right of the yellow dot and drag, it will change the x-max value. Drag left will increase x-max, dragging right will decrease it (as if you were moving the) axis off the page. If you click to the left of the yellow dot and drag, you will be changing the x-min value accordingly.

  If you double click on the x-axis labels, it will restore to the original limits

• Vertical. Drag anywhere on the vertical, up or down, to change the y-max value.

  Double click on the y-axis labels to reset the vertical scale back to defaults.