Adding Points and Text to a Displayed Graph

x:
y:
text:
color:

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

function dograph(){
 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=25
 Info.graphwidth=200
 Info.graphheight=150
 Info.xaxislabel=""
 Info.yaxislabel=""
 Info.ptsize=4
 Info.xstep=2
 Info.docurve=false
 Info.anchor="Graph1"
 Info.maxaddpoints=50
 Data=new Array([NaN,NaN])
 GRdrawgraph("",Data,"",Info)
}

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

function addpoint(){
 var x=parseFloat(document.info.x.value)
 var y=parseFloat(document.info.y.value)
 var stext=document.info.stext.value
 var scolor=document.info.scolor.value
 GRaddpoint(x,y,stext,scolor,GRUSER)
}

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

Adding Text

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

function addtext(){
 var x=parseFloat(document.info.x.value)
 var y=parseFloat(document.info.y.value)
 var stext=document.info.stext.value
 var scolor=document.info.scolor.value
 GRaddtext(x,y,stext,scolor,GRUSER)
}

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

Colors

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.

GRUSER	user coordinates
GRDOC	document coordinates, with (0,0) in the upper left-hand corner.
GRANCHOR	coordinates based on a named anchor page element (such as an image) using Info.anchor (see exampleq.htm)

back to the list of examples