graph chart

2D / 3D Stacked Horizontal Bar Graph Examples

[ Bar Graph Home ] [ Tutorials ] [ Documentation ] [ Getting Started ] [ Solutions ]

Applet Example 7 - Interacting with JavaScript

if you do not see the graph below then click here

Click on the bars to show / hide a data table.

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="../../../bar_graph/shbarchart/Examples/barpropsjs.txt">
<PARAM name="chartdata" value="../../../bar_graph/shbarchart/Examples/bardatajs.txt">

</applet>

The configuration parameters are taken from the text file ../../../bar_graph/shbarchart/Examples/barpropsjs.txt ( click here to view )
and the graph data is read from the text file ../../../bar_graph/shbarchart/Examples/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.

 

For a full explanation of and range of values for the above parameters please see the Documentation - Configuration Options».

« back to Examples Index

« back to Getting Started

[ Bar Graph Home ] [ Tutorials ] [ Documentation ] [ Getting Started ] [ Solutions ]

Getting Started

Documentation

Examples

Tutorials

Common Problems
This section describes and provides solutions to common problems.