Adding Points and Text to a Displayed Graph

This page illustrates how to add points and text to a graph after it is displayed.


The initial graph in this case is produced by the function dograph().

The key parameter that allows additional points or text to be added after the page is displayed is Info.maxaddpoints=50. This allows for 50 extra (hidden) divs on the page that are associated with this graph (in case there are two or more on the page). You then can write up to points or text at up to 50 locations on the graph. If you exceed this number, those points are ignored. There is no set maximum value for Info.maxaddpoints.

Adding Points

Addition of points is simply a matter of collection of the information and calling of GRaddpoint(). In this case, that is taken care of by the function addpoint(). (The form has the name "info" in this case.)

The text for a point is displayable by rolling the mouse over the point.

Adding Text

Similarly, adding text requires a call to GRaddtext().

Note that "text" is a very general term here. It can be any valid HTML, including image tags, "a" tags, superscript and subscript tags, text input, buttons, etc. If form elements are added, then make certain that they are surrounded by <form> and </form>.


The colors for points and text are handled two different ways. Point colors are actually just names of valid GIF files that must be present in the directory containing the calling page (or in the directory specified by Info.imagedir. Text color may be any valid JavaScript color name or #rrggbb hexadecimal code.

Coordinate System

The fifth parameter, GRUSER, indicates that the x,y coordinates are in user coordinates (based on the numbers indicated on the graph). However, three possibilities exist for this parameter.


user coordinates


document coordinates, with (0,0) in the upper left-hand corner.


coordinates based on a named anchor page element (such as an image) using Info.anchor (see exampleq.htm)

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.