Simple Statistics Program

by David Halls


Interface of program

This article describes the production of a program for the generation of simple statistics from a set of data using VBScript and HTML. The mean, standard deviation and relative standard deviation (coefficient of variation) are calculated and displayed. This kind of operation is frequently used with analytical data to give a measure of imprecision and in evaluation of between-batch quality control in analytical measurements.

The interface

The interface (shown above) has two entry text boxes. The first is for the title of the data (i.e. the measurement being made to generate the data) and the second is for entering the data. After each entry, pressing the "Enter" key transfers the number to an array, displays it in an iframe and clears the box for the next item of data. The code to achieve this was described in an article on entering data into text entry boxes.

There are three buttons, "Calculate","Clear" and "Print Results". On clicking "Calculate", the data in the array is evaluated and the results displayed on the form and transferred to the iframe. "Clear", as the name suggests, clears all text boxes and display so that a further set of data can be evaluated. "Print Results" prints out the content of the iframe after calculation which contains the date, the title, the data and the results.

 
<body onload="setfocus">
<center>
<div>

<h1>Simple Statistics</h1>
<table width = "600" border = "0" cellpadding = "10">
<tr>

<td width = "50%"><p>Enter title for data</p></td><td><form name="formzero">
	   <input align="left" maxlength="50" id="datatitle" size="50" type="text" / ></form></td></tr>

<tr><td><p>Enter data in box. Press enter after each entry. Data is transferred to window below. 
		When all data is entered, then click on "Calculate" to get results</p></td><
<form name="formone" >
<td><input align="left" maxlength="50" name="dataentry"  size="10" type="text"/ ></td>
</form>
</tr>
<tr><td colspan = "2" align = "center"><button type = "button" onclick = "calculateresults"
				  name = "calculate">Calculate</button>
<button type = "button" onclick = "cleardata" name = "clear">Clear</button></td></tr>
</table>

<table id = "otable" bgcolor = "lightblue" width = "400" style = "border: 1px solid navy" cellpadding = "5">
<tr><td colspan = "2"><h2>Results</h2></td></tr>
<tr><td>Number</td><td></td></tr>
<tr><td>Mean</td><td></td></tr>
<tr><td>Standard Deviation</td><td></td></tr>
<tr><td>Coefficient of Variation (RSD)</td><td></td></tr>
<tr><td colspan = "2" align = "center"><button onclick = "printlist">
				 &nbsp;&nbsp;Print Results&nbsp;</button></td></tr>
</table>
<br />

<iframe name = "myframe" align = "middle" scrolling = "yes" frameborder = "1" 
		   width = "400" height = "100"></iframe>
<script language="VBScript" type="text/vbscript">
<!--
myframe.document.write "<STYLE TYPE='text/css'>p,td, body{font-family:'Verdana';font-size :10pt;
					   font-weight:500;}"
myframe.document.write "h1{font-family:Verdana;font-size: 24pt;font-weight: 800; color: black; 
					   text-align: center;}</style>"

myframe.document.write "<body>"
myframe.document.write "<p>"& date()& "</p>"
myframe.document.close
//-->
</script>

</div>
</center>
</body>
</html>

Notice that the script sets up the style for the document in the iframe and adds the current date.

The sub-routines for entering data and calculation

On loading, the interface sets the focus to the first entry box:

 
function setfocus
		 document.all.datatitle.focus
end function

After entering the title and pressing the enter key, the data title is transferred to the document in the iframe and the focus moves to the data entry box:

 
function formzero_onsubmit
		 formzero_onsubmit = false
		 myframe.document.write "<h2>Statistics - " & document.all.datatitle.value & "</h2>"
		 myframe.document.write "<p><b>Data</b></p>"
		 document.all.dataentry.focus
end function

An array, datavalues is set up. On pressing the enter key, the subroutine checks whether a valid entry has been made. If so, the entry is added to the array and sent to the document in the iframe. The entry box is cleared and the focus moves back to that box, awaiting the next entry.

 
dim  sum, number, datavalues(), sumsquares, diff, mean, sd,cv,i

i = 0
redim datavalues(100)
function formone_onsubmit
		 formone_onsubmit = false
		 if len(document.all.dataentry.value) > 0 then
		 	x=document.all.dataentry.value
			datavalues(i) = x
			i = i + 1
			myframe.document.write  x & "<br/>" 
		end if
		document.all.dataentry.value = "" 
		document.all.dataentry.focus
end function

Now to calculating results, invoked by clicking on the button Calculate. The array is redimensioned to the number of entries, preserving the data. Then the mean is calculated by summing the data and dividing by the number of items. To calculate the standard deviation, the subroutine sums the squares of the differences of the values from the mean, divides by the number of data values -1 and takes the square root of that value. The relative standard deviation (or coefficient of variation) is the standard deviation divided by the mean and is expressed as a percentage.

The results of the calculations are appropriately formatted and displayed on the interface using the table object model. The results are also transferred to the document in the iframe which now contains all the information - title, date, list of data and results - ready for printing.

 
sub calculateresults
	redim preserve datavalues(i-1)
	number = 0
	sum = 0
	sumsquares = 0

'calculate mean
	for i = 0 to ubound(datavalues)
		sum = sum + datavalues(i)
		number = number + 1
	next
	mean = sum/number

'calculate standard deviation
	for i = 0 to ubound(datavalues)
		diff = datavalues(i)-mean
		sumsquares = sumsquares + (diff*diff)
	next 
	sd = sqr(sumsquares/(number - 1))
	cv = sd/mean

'display results on interface
	document.all.otable.rows(2).cells(1).style.fontweight = "bold"
	document.all.otable.rows(1).cells(1).innerhtml = number
	document.all.otable.rows(2).cells(1).innerhtml = formatnumber(mean,3)
	document.all.otable.rows(3).cells(1).innerhtml = formatnumber(sd,3)
	document.all.otable.rows(4).cells(1).innerhtml = formatpercent(cv,2)

'send results to document in iframe
	  myframe.document.write "<p><b>Results</b></p>"
	  myframe.document.write "<table>"
	  myframe.document.write "<tr><td width = '100'>Number :</td><td>" & number & "</td></tr>"
	  myframe.document.write "<tr><td>Mean : </td><td>" & formatnumber(mean,3) & "</td></tr>"
	  myframe.document.write "<tr><td>S.D. :</td><td>" & formatnumber(sd,3) & "</td></tr>"
	  myframe.document.write "<tr><td>C.V. :</td><td>" & formatpercent(cv,2) & "</td></tr>"
	  myframe.document.write "</table>"
end sub

Printing the results and clearing the data

The subroutine printlist is called when the button "Print Results" is clicked. This closes the document in the iframe and prints it out.

 
sub printlist
	myframe.document.close
	myframe.focus()
	myframe.print()
end sub

Clicking on the button "Clear", runs the subroutine cleardata which clears all the text entry boxes, clears the results from the results table and opens a new document in the iframe.

 
sub cleardata
	document.all.datatitle.value = ""
	document.all.givendata.value = ""
	document.all.otable.rows(1).cells(1).innerhtml = ""
	document.all.otable.rows(2).cells(1).innerhtml = ""
	document.all.otable.rows(3).cells(1).innerhtml = ""
	document.all.otable.rows(4).cells(1).innerhtml = ""
	myframe.document.open()
end sub

You can try out the program and view the source code by clicking here

Conclusion

This project brings together some ideas used previously about using HTML pages as a basis of entering and displaying data with VBScript providing the code to carry out the processing of data:-