Development of a Real-Time Dynamic Graphing Web Page

Implementation of the User Interface: Feedback

At this point, we have a working interface, and the user can print the graph. But there is one more thing to do. Remember, the user should be able to:

1. Understand what the page does
2. Set up the parameters
3. Start the process
4. Print the results
5. Learn something from the process

We can use divgraph.js to give immediate feedback to the user while an animation is running and, in that way, increase their chances of learning something new.

Click on the "React" button, below, and see the difference from the previous draft.

Notice that we have added four active labels that display concentrations and the value of Q and K while the animation runs. In addition there is a "close" link. Addition of these labels takes place at the end of the new initialize() function:

function initialize(){
 tmax=50
 delay=50
 t=0
 A=parseFloat(document.info.A0.value)
 B=parseFloat(document.info.B0.value)
 K=parseFloat(document.info.K.value)
 r=parseFloat(document.info.rtimes100[document.info.rtimes100.selectedIndex].text)/100
 Q=B/A
 k2=r/(K+1)
 k1=K*r/(K+1)
 GRopengraphwindow(600,300)
 Info=new Array()
 Info.graphwidth=400
 Info.xmin=0
 Info.ymin=0
 Info.xmax=tmax
 Info.ymax=A+B
 Info.xaxislabel="time"
 Info.yaxislabel="concentration"
 Info.style="body {background-color:lightgrey} .lbl {fontsize:12pt}"
 Info.title="<center><img src=img/equilab.gif><br><span style='fontsize:12pt'><b><font color=red>[A]<sub>o</sub></font>="+GRroundoff(A)+", <font color=blue>[B]<sub>o</sub></font>="+GRroundoff(B)+"</b></span><br></center>"
 Info.maxaddpoints=tmax*2 + 5
 Info.ptsize=5
 Data=new Array([t,A,"red"],[t,B,"blue"])
 GRdrawgraph("",Data,"",Info)
 GRclosegraphdocument()
 apt=GRaddtext(460,120,"[A]="+GRroundoff(A),"red class=lbl",GRDOC)
 bpt=GRaddtext(460,140,"[B]="+GRroundoff(B),"blue class=lbl",GRDOC)
 qpt=GRaddtext(460,160,"Q=[B]/[A]="+GRroundoff(Q),"green class=lbl",GRDOC)
 GRaddtext(460,180,"K="+GRroundoff(K),"black class=lbl",GRDOC)
 GRaddtext(500,250,"<a href='javascript:opener.docloseme()'>Close</a>","black",GRDOC)
 going=true
}

     Info.maxaddpoints = tmax * 2 + 5

Labels are first introduced just like points, but using the GRaddtext() function rather than GRaddpoint(). The first three parameters for this function are the x and y coordinates of the text and the text string itself, which may include any valid HTML code. The fourth parameter, which indicates the color of the label, includes the extra information class=lbl. This sets the style of the label, which is defined by setting Info.style to be a valid Cascading Style Sheet style definition. The GRDOC parameter tells divgraph.js to use document coordinates. Leaving this parameter off or using GRUSER would have indicated to use the coordinates displayed on the axes.

Rounding off of the numbers being displayed to a reasonable number of digits is taken care of by GRroundoff(). Examples are shown in the table below:

To make these changes dynamic, we also use function GRdivwrite() in react():

function react(){	
	if(!going || GR.win.closed)return
	t++
	dA=-k1*A+k2*B
	dB=-k2*B+k1*A
	A+=dA
	B+=dB	
	Q=B/A
	GRdivwrite(apt,"<font class=lbl color=red>[A]="+GRroundoff(A)+"</font>")
	GRdivwrite(bpt,"<font class=lbl color=blue>[B]="+GRroundoff(B)+"</font>")
	GRdivwrite(qpt,"<font class=lbl color=green>Q=[B]/[A]="+GRroundoff(Q)+"</font>")
	plotpoint(t,A,"red")
	plotpoint(t,B,"blue")
	if(t<tmax){
		setTimeout("react()",delay)
	}else{
		if(GR.saveHTML)GRreplot()
	}
}

(Another useful divgraph.js function is GRdivmove() , which allows points and text already displayed to be moved.)

The check for GR.win.closed at the beginning of react() prevents the routine from being entered if the user has already closed the graphing window. The "Close" link on the graph involves a link to "opener.docloseme()"

function docloseme(){
 if(GR.win.closed)return
 going=false
 setTimeout("GR.doc.close();GR.win.close()",1000)
}

That does it. Our interface now allows for the user to specify the starting parameters, watch a developing animation, possibly stopping it midstream, print the results if desired, and, hopefully, learn something in the process.

The final project includes an introduction, questions to consider, a better check to make sure that a running animation gets shut down prior to another opening, and the ability to start up a random equilibration. It is equil.htm. Enjoy!

back to the list of examples