Development of a Real-Time Dynamic Graphing Web Page

Implementation of the User Interface

The user interface--buttons, menus, etc., is a completely different story. First, let's outline what we want the user to be able to do:

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

Numbers 1, 4, and 5 can wait until the rest of the interface is working.

Numbers 2 and 3 shouldn't be a problem. They involve a simple table. I've indicated the HTML "object" names that we'll be using for each of the entries on the far left. The name of the form is info.

Go ahead and see how it works. Try some different values for the various parameters.

The textbox at the bottom of this page shows the HTML used to make this table: The only changes in the JavaScript code involves the definitions of A, B, K, and r in initialize() to read these values using the parseFloat() 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)
 grwin=GRopengraphwindow(600,300)
 grdoc=grwin.document
 Info=new Array()
 Info.graphwidth=500
 Info.xmin=0
 Info.ymin=0
 Info.xmax=tmax
 Info.ymax=A+B
 Info.xaxislabel="time"
 Info.yaxislabel="concentration"

 Info.maxaddpoints=tmax*2 
 Info.ptsize=5
 Data=new Array([t,A,"red"],[t,B,"blue"])
 nplot=GRdrawgraph("",Data,"",Info)
 GRclosegraphdocument()
}

back to the list of examples