NetCharts® Applets and JavaScript
This JavaScript example creates an instance of a pie chart with its parameters controlled from within the applets' HTML page.
Source Code
<HTML>
<TITLE>NetCharts Applets Piechart Example #7 </TITLE><BODY BGCOLOR=#FFFFFF>
<SCRIPT LANGUAGE=JAVASCRIPT>function update(cell) {
var str = "Slices = ";
for (i=0; i <4; i++) {
str += "(";
str += cell.form["value"+i].value;
str += ", ";
color = cell.form["color"+i];
str += color.options[color.selectedIndex].text;
str += ", '";
str += cell.form["label"+i].value;
str += "')";
if (i < 3) str += ", ";
else str += ";";
}var app = document.piechart;
app.loadParamsJS (str);
app.loadParamsJS ("Update;");
}</SCRIPT>
<CENTER>
<P>Modify the table values and press the button to update the piechart.</P></CENTER>
<P>
<TABLE WIDTH="300" ALIGN="LEFT" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN=CENTER>
<FORM NAME="myform">
<TABLE CELLPADDING="1" BORDER="1">
<TR>
<TD>Label</TD>
<TD>Color</TD>
<TD>Value</TD>
</TR>
<TR>
<TD><INPUT TYPE="TEXT" NAME="LABEL0" SIZE="10" VALUE="MON"></TD>
<TD>
<SELECT NAME=COLOR0 SIZE=1>
<OPTION SELECTED>red
<OPTION>blue
<OPTION>green
<OPTION>magenta
<OPTION>cyan
<OPTION>yellow
<OPTION>orange
</SELECT></TD>
<TD><INPUT TYPE="TEXT" NAME="VALUE0" SIZE="5" VALUE="23"></TD>
</TR>
<TR>
<TD><INPUT TYPE="TEXT" NAME="LABEL1" SIZE="10" VALUE="TUE"></TD>
<TD>
<SELECT NAME=COLOR1 SIZE=1>
<OPTION>red
<OPTION SELECTED>blue
<OPTION>green
<OPTION>magenta
<OPTION>cyan
<OPTION>yellow
<OPTION>orange
</SELECT></TD>
<TD><INPUT TYPE="TEXT" NAME="VALUE1" SIZE="5" VALUE="45"></TD>
</TR>
<TR>
<TD><INPUT TYPE="TEXT" NAME="LABEL2" SIZE="10"VALUE="WED"></TD>
<TD>
<SELECT NAME=COLOR2 SIZE=1>
<OPTION>red
<OPTION>blue
<OPTION SELECTED>green
<OPTION>magenta
<OPTION>cyan
<OPTION>yellow
<OPTION>orange
</SELECT></TD>
<TD><INPUT TYPE="TEXT" NAME="VALUE2" SIZE="5" VALUE="45"></TD>
</TR>
<TR>
<TD><INPUT TYPE="TEXT" NAME="LABEL3" SIZE="10" VALUE="THU"></TD>
<TD>
<SELECT NAME=COLOR3 SIZE=1>
<OPTION>red
<OPTION>blue
<OPTION>green
<OPTION SELECTED>magenta
<OPTION>cyan
<OPTION>yellow
<OPTION>orange
</SELECT></TD>
<TD><INPUT TYPE="TEXT" NAME="VALUE3" SIZE="5" VALUE="45"></TD>
</TR>
</TABLE>
<BR>
<INPUT TYPE=BUTTON VALUE="Update Piechart" ONCLICK="update(this);">
</FORM></TD>
</TR>
</TABLE>
<APPLET NAME=piechart
CODEBASE=../classes
CODE=NFPiechartApp.CLASS
WIDTH=250 HEIGHT=200>
<PARAM NAME=NFParamScript VALUE='
BACKGROUND = (lightGray, RAISED, 8);
LabelPos = 0.6;
Header = ("Average Daily Network Utilization", yellow, "TimesRoman", 12);
HeaderBox = (darkBlue, RAISED, 4);
Legend = ("Legend", BLACK, "TimesRoman", 14);
LegendBox = (white, RECESS, 6);
Slices = (23, red, "Mon"),
(45, blue, "Tue"),
(45, green, "Wed"),
(45, magenta, "Thu");
'>
</APPLET>
<BR>
<P>
Much like a Java applet, a JavaScript can also update a NetCharts Applets
chart using the loadParamsJS() interface. In this case, the form
above updates the piechart using a simple function that generates
a parameter definition string and sends it to the piechart via
the loadParamsJS() method.</P>
</BODY>
</HTML>
