Moving and Changing Points and Text

This page illustrates how you can access the functions and points displayed in a divgraph.js graph so as to animate it.

There are three basic ways
to animate a graph:

  1. You can access the points directly using GRdivwrite() or GRdivmove() and adjust them on your own, or
  2. 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:


the first div associated with this graph


the first div associated with this graph's data (drawn points)


the last div associated with this graph's data (drawn points)


the first div associated with this graph's additional points (from Info.maxaddpoints)


the last div associated with this graph's additional points (from Info.maxaddpoints)


the last div associated with this graph

Three arrays also store the data for the divs:


the x-coordinate of the div (in document coordinates)


the y-coordinate of the div (in document coordinates)


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.

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)">
Alternatively, had we wanted to change the point color or size or text, then we could have used GRdivwrite(), but that is slower, because the internal HTML text of the div has to be updated by the browser.

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().

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

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 (" Commercial licensing is available for specific purposes.