Development of a Real-Time Dynamic Graphing Web Page

Implementation of the Theory as Code: Adding divgraph.js

We have a working first draft. Time to add the graphing. We have to initialize the plot, then add points. Here are our new functions:

function initialize(){
 tmax=50
 delay=1000
 t=0
 A=1
 B=0
 K=1
 r=0.01
 Q=B/A
 k2=r/(K+1)
 k1=K*r/(K+1)
 GRopengraphwindow(600,300)
 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"])
 GRdrawgraph("",Data,"",Info)
 GRclosegraphdocument()
}

function plotpoint(x,y,color){
 GRaddpoint(x,y,"",color,GRUSER)
}

function react(){	
	t++
	dA=-k1*A+k2*B
	dB=-k2*B+k1*A
	A+=dA
	B+=dB	
	Q=B/A
	plotpoint(t,A,"red")
	plotpoint(t,B,"blue")
	if(t<tmax)setTimeout("react()",delay)
}

Notice that no changes were made to react(). That's good, because it indicates that we have properly isolated the calculation from the implementation of the interface. In plotpoint() we've changed the status line to a call to GRaddpoint(), one of the functions of divgraph.js:

 GRaddpoint(x,y,"",color,GRUSER)

The third parameter is blank, because that is reserved for a label, and we don't need that, at least not yet. GRUSER here tells GRaddpoint() to use our coordinate system, not the document's.

The big change is in initialize(). Here we are

• opening a graphing window,
• setting up some initial conditions,
• entering our first two points as Data,
• drawing the graph, and
• closing the graph document.

It may seem strange to close the document, but the way that the divgraph.js package works, points aren't really "added" later. The setting of Info.maxaddpoints = tmax * 2 actually writes all those points, but makes them invisible by creating a "place-holder" div from them and setting it well off the page. The GRaddpoint() function simply installs the image in the div and moves it to the desired location.

After you click on the "Run initialize();react()" link, above, what do you think?

• Are the points too large? Change their size. and Click on "Run" again.

• Going too slowly for you? What would you change to make it go faster? Go ahead and try.

• Did the reaction "go to completion"? If not, what should be changed to make it go further?

• How could we stop this thing?

When you are ready, let's implement the user interface.

back to the list of examples