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
• Hist - 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", 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"
  		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);

	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"
			fill: "boolean for fill (true) or stroke (false)" 
			stats: "boolean, true for display, false to not display"
		}
	}

On the 2nd row, you will see text boxes to set the horizontal limits (min and max). To set these limits, type in the value and hit return. The plot is redrawn with that limit.

On the 3rd row, the "Label:" text box allows you to type in a label that you want to put on the plot, so you can label multiple plots, etc. The way you use this is to type in the label, then click on the plot somewhere, and the label is drawn there. If you don't like where the label is drawn, click on the label (on the plot) and it will disappear, then click somewhere else and it is redrawn. The "Show Data" is a button that if you click on it when it says "Enable", it enables you to mouse over the plot data and it will type out the x and y value. Once you enable this feather, the button will change to "Disable" and if you click on it again, this feature is disabled.