Applet Example 7
This example
demonstrates how the applet is able to interact with javascript
functions within the current page. In the graph below clicking
on the Bar Segments or Product names within the legend will
execute a javascript function which will either show or hide
a table of data for that data series.
|
Product X |
January |
$
17,000 |
February |
$
17,900 |
March |
$
26,000 |
April |
$
13,600 |
May |
$
17,000 |
June |
$
17,900 |
July |
$
26,000 |
August |
$
13,600 |
September |
$
17,000 |
October |
$
17,900 |
November |
$
26,000 |
December |
$
13,600 |
|
Product Y |
January |
$
7,000 |
February |
$
7,900 |
March |
$
6,000 |
April |
$
8,600 |
May |
$
7,000 |
June |
$
7,900 |
July |
$
6,000 |
August |
$
3,600 |
September |
$
2,000 |
October |
$
0 |
November |
$
0 |
December |
$
0 |
|
Product Z |
January |
$
0 |
February |
$
0 |
March |
$
0 |
April |
$
0 |
May |
$
7,400 |
June |
$
17,100 |
July |
$
26,900 |
August |
$
23,650 |
September |
$
27,300 |
October |
$
27,300 |
November |
$
26,500 |
December |
$
23,700 |
|
and here
is the HTML code for the applet
(note that 'mayscript' has been added to the APPLET tag ),
<applet code="SHbarchartApplet.class"
archive="SHbarchart.jar" width="450"
height="440" mayscript>
<!-- Start Up Parameters -->
<PARAM name="LOADINGMESSAGE" value="Creating
Chart - Please Wait.">
<PARAM name="STEXTCOLOR" value="0,0,100">
<PARAM name="STARTUPCOLOR" value="255,255,255">
<!-- Data files
-->
<PARAM name="chartproperties" value="barpropsjs.txt">
<PARAM name="chartdata" value="bardatajs.txt">
</applet>
The
configuration parameters are taken from the text file barpropsjs.txt
( click here to view )
and the graph data is read from the text file bardatajs.txt
( click here to view )
If
you "right click" and view source of this page you
will see that we have the following javascript function within
the page which is able to act upon the three tables, "c1",
"c2" and "c3".
<SCRIPT
LANGUAGE="JavaScript">
var table='c1';
function combo(table) {
if (table=='c1')
{
if (document.all.c1.style.visibility=="hidden")
{
document.all.c1.style.visibility="visible";
}
else {document.all.c1.style.visibility="hidden";}
}
if (table=='c2')
{
if (document.all.c2.style.visibility=="hidden")
{
document.all.c2.style.visibility="visible";
}
else {document.all.c2.style.visibility="hidden";}
}
if (table=='c3')
{
if (document.all.c3.style.visibility=="hidden")
{
document.all.c3.style.visibility="visible";
}
else {document.all.c3.style.visibility="hidden";}
}
}
</script>
In
the piedatajs.txt ( click here to
view ) file you will see that each of our data elements
has the word "javascript" entered in the target
field and the javascript function name with the relevant value
entered in the URL field.
Note:
If you are using the evaluation version then in the applet
a pop-up window will appear upon the startup and an evaluation
message will be incorporated by the servlet. Both these
features have been removed from the licensed version. Licensing
information can be found at http://www.jpowered.com/graph_chart/index.htm
<< back to Examples Index
<< back to Getting
Started
|
Getting Started
Documentation
Examples
Tutorials
Purchase
Bar
Graph Home
Graph
& Charting
Pie
Chart
Line Graph
Vertical
Bar Graph
Stacked
Bar Graph
Horizontal
Bar Graph
more...
Advanced
Data Grid Control
|