Examples Involving a User Interface

There are several ways the user might be involved in creating a plot.

• In Example i1, the user is prompted for the function or x,y data to plot, because it is not provided.
• In Example i2, the function is specified, so the user is only prompted for the minimum and maximum x-value to use.
• Examples i3, i3a, and i4 illustrate how a user might introduce data using a textarea.
• Examples i5 and i6 demonstrate how feedback can be given to a user after a plot is drawn. This can be either automatic (as in Example i5) or upon the user pressing a link (as in Example i6).
• Example i7 demonstrates how divgraph.js can be used to create an animated histogram with button conrol.
• Example i8 demonstrates how divgraph.js can be used to create an "NMR spectrum" that is based on user data and is expandable to see finer detail.

This is the very simplest use of divgraph.js.

Example i1 prompt for f(x) or data Execute JavaScript View the code

GRopengraphwindow() GRdrawgraph() GRclosegraphdocument() Change this code, then click on the "Execute JavaScript" link, to see the effect.

In this case, the function is given, but the x-range values are missing.

Example i2 prompt for x-range Execute JavaScript View the code

GRopengraphwindow() GRdrawgraph("x*(x-1)*(x+1)") GRclosegraphdocument() Change this code, then click on the "Execute JavaScript" link, to see the effect.

This example shows how a user's own x,y data can be plotted.

0,1.00 2,2.00 4,3.00 6,4.00 8,5.00	GRopengraphwindow(600,300) Info=new Array() Info.graphleft=Info.graphtop=50 Info.graphwidth=500 GRdrawgraph(document.examplei3.data.value,"","",Info) GRclosegraphdocument()	Execute JavaScript View the code

This example of a general plotter for titration data is from the Principal Species in Solution page. Go ahead and change the data and click on "Execute JavaScript." Lots of parameters are defined, because it is a very specific type of plot that we want.

0,1.00 0.500,1.04 1.000,1.09 1.500,1.13 2.000,1.18 2.500,1.22 3.000,1.27 3.500,1.32 4.000,1.37 4.500,1.42 5.000,1.48 5.500,1.54 6.000,1.60 6.500,1.67 7.000,1.75 7.500,1.85 8.000,1.95 8.500,2.09 9.000,2.28 9.500,2.59 10.000,7.00 10.500,11.39 11.000,11.68 11.500,11.84 12.000,11.96 12.500,12.05 13.000,12.12 13.500,12.17 14.000,12.22 14.500,12.26 15.000,12.30 15.500,12.33 16.000,12.36 16.500,12.39 17.000,12.41 17.500,12.44 18.000,12.46 18.500,12.47 19.000,12.49 19.500,12.51 20.000,12.52	GRopengraphwindow(600,300) Info=new Array() Info.graphleft=75 Info.graphtop=50 Info.graphwidth=500 Info.doptlabels=Info.dopoints=true Info.doxticnums=Info.doyticnums=true Info.dogridx=Info.dogridy=true Info.xaxislabel="mL added" Info.xaxislabelx=NaN Info.xaxislabely=NaN Info.yaxislabel="pH" Info.yaxislabelx=NaN Info.yaxislabely=NaN Info.xmin = 0 Info.xmax = NaN Info.ymin = 0 Info.ymax = 14 Info.defaultcolor="blue" Info.ptsize=2 Info.ticwidth=1 Info.xticfirst=0 Info.xticmajor=1 Info.xticminor=.2 Info.yticfirst=0 Info.yticmajor=1 Info.yticminor=1 Info.maxaddpoints=0 Info.ptsize=4 Info.docurve=false Info.dopoints=true Info.xnumdigits=Info.ynumdigits=0 GRdrawgraph(document.examplei3a.data.value,"","",Info) GRclosegraphdocument()	Execute JavaScript View the code

Colors and labels can be introduced as textbox data. A vertical bar separates the "alt" label, which pops up when the mouse moves over the point, from the displayed label, which is displayed directly on the graph. This displayed label may be any valid HTML code, including forms, buttons, links, and images.

Example i4 entering colors and labels in textboxes Execute JavaScript View the code

2,4,,|first point 3,5,red,alttext|dispaytext 4,4,,also red| <font color=red>with red text</font> 6,3,blue,this one is blue GRopengraphwindow(300,300,50,300) Info=new Array() Info.graphleft=Info.graphtop=50 Info.xmin=Info.ymin=0 Info.title="Move the mouse over a point to see its \"alt\" label." Info.ptsize=4 GRdrawgraph(document.examplei4.data.value,"","",Info) GRclosegraphdocument() Change this code, then click on the "Execute JavaScript" link, to see the effect.

This example shows how the user might select various plotting options based on data presented. At the end of the plotting, the Info.whendone parameter causes the function check() to be run. Can you figure out how to plot the data in order to get a straight line?

time(sec) [NO2]
   0      0.0100
  50      0.0079
 100      0.0065
 200      0.0048
 300      0.0038

This example shows how the user might be able to enter their own data along with selecting various plotting options based on data presented. These data are kinetics data similar to what might be obtained using the Mechanism-Based Kinetics Simulator. At the end of the plotting, the Info.title parameter includes a link to opener.check(), which allows after-plotting feedback directed by the user. These are data showing the effect of temperature on the rate constant for a chemical reaction. Can you figure out how to plot the data in order to get a straight line?

This example shows how to draw a histogram with control buttons that the user can use to start and stop animation.

GRopengraphwindow() Data=new Array([NaN,NaN]) Info=new Array() Info.maxaddpoints=12 Info.xmin=Info.ymin=0 Info.xmax=12 Info.ymax=20 Info.doxaxis=false Info.yticmajor=2 Info.yticminor=2 Info.xaxislabel="" Info.yaxislabel="mmol" GRdrawgraph("",Data,"",Info) GRclosegraphdocument() ptAbar=GRaddpoint(1,0) ptBbar=GRaddpoint(3,0) ptAtop=GRaddpoint(1,0) ptBtop=GRaddpoint(3,0) ptAn=GRaddpoint(1.1,-2) ptBn=GRaddpoint(3.1,-2) GRaddtext(1.3,-1,"A","red") GRaddtext(3.4,-1,"B","blue") GRaddtext(8,14,"<form><input type=button value=New onclick=opener.reset(true)></form>") GRaddtext(8,10,"<form><input type=button value=React onclick=opener.react()></form>") GRaddtext(8,6,"<form><input type=button value=Reset onclick=opener.reset(false)></form>") GRaddtext(8,2,"<form><input type=button value=Show onclick=opener.show()></form>") reset(true)

Execute JavaScript View the code

This example shows how a histogram can be used to display an NMR spectrum on the fly based on data in a textarea. Mouse-down events on the graph are trapped. The only really complex aspect of the code is the getnmrdata() function, which reads the textarea information and translates it into a Data[] array representing the NMR spectrum.

back to the list of examples