There are three basic ways to animate a graph:
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.
divgraph()
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)
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.
animate()
GR.List
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().
GRdrawgraph()
Info.overwrite = 1
dograph()
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)">
copyright 2001 Robert M. Hanson. All rights reserved. divgraph.js is freely distributable for noncomercial purposes, provided reference is made as "divgraph.js was developed at St. Olaf College by Robert M. Hanson (http://www.stolaf.edu/people/hansonr/divgraph)." Commercial licensing is available for specific purposes.