Moving and Changing Points and Text

There are three basic ways to animate a graph: You can access the points directly using GRdivwrite() or GRdivmove() and adjust them on your own, or you an overwrite a graph with a new one using GRdrawgraph(). Experiment with these buttons to see what they do.

Internal Structure of a Graph

In order to animate a graph, you need to know a little about how one is put together. A "graph" is really just a set of "div" tags (G1, G2, ...) and "styles" (#G1, #G2, ...) that become part of the document. When divgraph() is executed, it creates four structures, GR.List[], GR.X_[], GR.Y_[], and GR.S_[]. These four arrays save the critical information needed to redisplay every graph on the page.

Each new graph gets a new index in GR.List[], and this entry includes, among other things, the following key pieces of information:

GR.List[i].pt0	the first div associated with this graph
GR.List[i].ptdata0	the first div associated with this graph's data (drawn points)
GR.List[i].ptdata1	the last div associated with this graph's data (drawn points)
GR.List[i].ptadd0	the first div associated with this graph's additional points (from Info.maxaddpoints)
GR.List[i].ptadd1	the last div associated with this graph's additional points (from Info.maxaddpoints)
GR.List[i].pt1	the last div associated with this graph

Three arrays also store the data for the divs:

GR.X_[i]		the x-coordinate of the div (in document coordinates)
GR.Y_[i]		the y-coordinate of the div (in document coordinates)
GR.S_[i]		the text for the div

You might think that a browser would save all this information on its own, and Internet Exporer does, but some versions of Netscape don't, or, if they do, they lose the information when resizing. By running through these three arrays, one can determine and change any of the quantities.

Moving and Writing to Graph Points

The first row of buttons shown above activate a function animate(), which runs through all of the graph data points, shifting them by a specified offset in a specified direction. In order to do this, the function calls GRdivmove() with parameters indicating the number of the point to move and its new x and y positions. The index into GR.List is 1 (one), because there is only one graph on the page.

function animate(dir){
 if(dir!=null && animatedirection==dir)return
 if(dir==null)dir=animatedirection
 animatedirection=dir
 if(animatedirection==0)return
 var delay=20
 var i0=GR.List[1].ptdata0
 var i1=GR.List[1].ptdata1
 var offset=-6*(animatedirection)
 var n=0
 if(offset>0){
  for(var i=i0;i<=i1;i++){
	n=i+1+(i+offset>i1?i0-i1+offset-1:0)
	GRdivmove(i,GR.X_[i],GR.Y_[n],GRDOC)
  }
 }else{
  for(var i=i1;i>=i0;i--){
	n=i-1+(i+offset<i0?i1-i0+offset+1:0)
	GRdivmove(i,GR.X_[i],GR.Y_[n],GRDOC)
  }
 }
 setTimeout("animate()",delay)
}

The first row of buttons, then, serve to activate this function.

<input type=button value="<<<<<" onclick="animate(-1)">
<input type=button value=Stop onclick="animate(0)">
<input type=button value=">>>>>" onclick="animate(1)">

Overwriting a Graph

The buttons on the second row, which change the function to a totally new function, work by actually writing a new function to the graph. In effect, the drawing is redone using the same points, writing them into their new positions. This is a simple task, just requiring a call to GRdrawgraph() with the added parameter Info.overwrite = 1. This indicates that the points to use are already present; only a moving or rewriting (if the text has changed) is necessary. On this page, this is accomplished using the function dograph().

function dograph(func,noverwrite){
 if(noverwrite==0)animatedirection=0
 GRsetgraphwindow()
 Info=new Array()
 Info.style=".xaxisnum {font-size:8pt} .yaxisnum {font-size:8pt}"
 Info.xmin=Info.ymin=-10
 Info.xmax=Info.ymax=10
 Info.graphleft=50
 Info.graphtop=50
 Info.graphwidth=200
 Info.graphheight=200
 Info.ptsize=2
 Info.xstep=2
 Info.docurve=false
 Info.anchor="Graph1"
 Info.overwrite=noverwrite
 GRdrawgraph(func,"","",Info)
}

This function, called with parameters "sin(x)*10" and 0, is used initially to display the graph. The buttons above then call it with a new function and a second parameter of 1.

<input type=button value=cos(x)^2*5 onclick="dograph('(cos(x))^2*5',1)">
<input type=button value=sin(x)*x onclick="dograph('sin(x)*x',1)">
<input type=button value=sin(x)*10 onclick="dograph('sin(x)*10',1)">

back to the list of examples