Example Line Graph

The main goal of this example is to show how to use LineGraph.class. For a listing of the attributes associated with the Line Graph Widget, click on LineGraph.class. This example uses a Line Graph (LG1) and three Radio Buttons (RB1, RB2 and RB3). LG1 plots one of three graphs, determined by which Radio Button is selected. All the points of the Line Graph have been initialized at compile time by the use of the initInernalRAM META tag. Look at initLG.ini in a text editor to see the InternalRAM initialization. Here is a snapshot of what the html page looks like in a "WYSIWYG" tool:


Figure 1.

To create a Line Graph named LG1 that sets InternalRAM byte variable #5, the following is used:

<APPLET CODE="LineGraph.class" WIDTH="120" HEIGHT="120" ALIGN="BOTTOM" NAME="LG1">
<PARAM NAME="href" VALUE="Amulet:InternalRAM.bytes(25).value()">
<PARAM NAME="yMin" VALUE="0">
<PARAM NAME="yMax" VALUE="255">
<PARAM NAME="xSamples" VALUE="12">
<PARAM NAME="lineWeight" VALUE="3">
<PARAM NAME="backgroundImage" VALUE="..\Images\LGBack.gif">
<PARAM NAME="updateRate" VALUE="0,0.01">
</APPLET>

Notice that the updateRate of LG1 is set at 0,0.01, which means it will update immediately upon loading the page and then will not update again unless forced to do so via the IWC method forceUpdate(). When using the Line Graph widget, this kind of setup is usually best, because there is a slight, but noticeable, flicker upon each update. For this reason, it is recommended that you only update the Line Graph widget when data actually changes.

Also note that the href function specifies Amulet:InternalRAM.bytes(25).value(). Pay particular attention to the use of bytes, as opposed to a single byte. The use of bytes signifies an array of bytes which will be used as the input for the Line Graph Widget. In this particular case, the starting byte variable is InternalRAM byte variable #25. The Radio Buttons, declared below, have the ability to change the starting byte variable number by using the IWC method setVariableNumber(x).

To create the three Radio Buttons named RB1, RB2 and RB3, which determine the array of InternalRAM bytes LG1 will graph, the following is used:

<APPLET CODE="RadioButton.class" WIDTH="68" HEIGHT="30" NAME="RB1">
<PARAM NAME="href" VALUE="Amulet:document.LG1.setVariableNumber(25),Amulet:document.LG1.forceUpdate()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="plain">
<PARAM NAME="label" VALUE="Graph 1">
<PARAM NAME="buttonAlign" VALUE="left">
<PARAM NAME="groupName" VALUE="radioGroup1">
<PARAM NAME="initialCondition" VALUE="fromInitHref">
<PARAM NAME="initHref" VALUE="Amulet:InternalRAM.byte(0).value()">
<PARAM NAME="internalNumber" VALUE="10">
</APPLET>

<APPLET CODE="RadioButton.class" WIDTH="68" HEIGHT="30" NAME="RB2">
<PARAM NAME="href" VALUE="Amulet:document.LG1.setVariableNumber(37),Amulet:document.LG1.forceUpdate()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="plain">
<PARAM NAME="label" VALUE="Graph 2">
<PARAM NAME="buttonAlign" VALUE="left">
<PARAM NAME="groupName" VALUE="radioGroup1">
<PARAM NAME="initialCondition" VALUE="fromInitHref">
<PARAM NAME="initHref" VALUE="Amulet:InternalRAM.byte(0).value()">
<PARAM NAME="internalNumber" VALUE="20">
</APPLET>

<APPLET CODE="RadioButton.class" WIDTH="68" HEIGHT="30" NAME="RB3">
<PARAM NAME="href" VALUE="Amulet:document.LG1.setVariableNumber(49),Amulet:document.LG1.forceUpdate()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="plain">
<PARAM NAME="label" VALUE="Graph 3">
<PARAM NAME="buttonAlign" VALUE="left">
<PARAM NAME="groupName" VALUE="radioGroup1">
<PARAM NAME="initialCondition" VALUE="fromInitHref">
<PARAM NAME="initHref" VALUE="Amulet:InternalRAM.byte(0).value()">
<PARAM NAME="internalNumber" VALUE="30">
</APPLET>

When a Radio Button is pressed, it launches its href functions. First it sets the InternalRAM byte variable number LG1 uses as its array starting point, then it forces LG1 to redraw its graph.

Notice the initHref for the three Radio Buttons. It is requesting the value of InternalRAM byte variable #0. InternalRAM byte variable #0 is set to 20 in initLG.ini. Because RB2's internalNumber equals 20, it starts out "on", while the other two buttons start out "off". Because RB2 starts out in the "on" position, its href is launched immediately upon loading the page, therefore, LG1 will show the graph using the InternalRAM byte array from variable #37-48.

NOTES:



Amulet HTMLCompiler,
Copyright © 2000-2004 by
Amulet Technologies, LLC

Back to Welcome - Contact Amulet - Amulet Home