Many applications involve some sort of graphic display of information. The chart page in this sample application, chart.html, presents a bar chart with data for four quarters and allows the user to adjust any quarter's value up or down by tapping an up or down arrow for that quarter. The workings of this page are described in detail in Chart page: dynamically changing graphic information.
The full source code for chart.html is listed below. For instructions on downloading this source code, see Downloading and accessing the JavaScript engine sample files.
<html> <head> <title>Today's Charts</title> <meta name="HandheldFriendly" content="True"> <script language="JavaScript1.2"> |
<!-- // // FILE: chart.html // // Revision Date: March 15, 2002 // // Copyright (c) 2006, iAnywhere Solutions, Inc. // //--> |
<!--
//
// Globals
//
var intQ1 = 0;
var intQ2 = 1;
var intQ3 = 2;
var intQ4 = 3; |
//
// [bar chart color, initial revenue in millions]
//
var arrQ = [["red", 7],
["blue", 12],
["yellow", 15],
["green", 21]]; |
var intQuarters = 4;
//
// Indexes into the above array.
//
var intQ_Color = 0;
var intQ_Rev = 1; |
//
// FUNCTION: InitializeNav()
//
function InitializeNav()
{ |
if (arguments.length != 0)
throw new Error("function InitializeNav()
incorrectly called"); |
//
// By default, the navigation bar is not displayed.
//
HideNav(); |
//
// Show the navigation URLs that are at the bottom of the HTML
document.
//
document.getElementById("navurls").style.display = "block";
for (i = 0; i < intQuarters; i++)
{
var obj; |
obj = document.getElementById("Q" + (i + 1) + "_Bar");
obj.style.height = arrQ[i][intQ_Rev] + "px";
obj.style.backgroundColor = arrQ[i][intQ_Color];
}
return;
} // InitializeNav |
//
// FUNCTION: ShowNav()
//
// Purpose: Show the dropdown navigation bar.
//
function ShowNav()
{ |
if (arguments.length != 0)
throw new Error("function ShowNav()
incorrectly called"); |
document.getElementById('openNav').style.display="block";
document.getElementById('closedNav').style.display="none";
document.getElementById('nav').style.display="block"; |
return;
} // ShowNav |
//
// FUNCTION: HideNav()
//
// Purpose: Hide the dropdown navigation bar.
//
function HideNav()
{ |
if (arguments.length != 0)
throw new Error("function HideNav()
incorrectly called"); |
document.getElementById('openNav').style.display="none";
document.getElementById('closedNav').style.display="block";
document.getElementById('nav').style.display="none"; |
return;
} // HideNav |
//
// FUNCTION: BumpDown()
//
function BumpDown(intQ_IN)
{
var obj; |
if (arguments.length != 1)
throw new Error("function BumpDown() incorrectly called");
obj = document.getElementById("Q" + (intQ_IN + 1) + "_Bar"); |
if (arrQ[intQ_IN][intQ_Rev] > 7)
{
arrQ[intQ_IN][intQ_Rev] -= 6;
obj.style.height = arrQ[intQ_IN][intQ_Rev] + "px";
obj.style.width = "20px";
obj.style.backgroundColor = arrQ[intQ_IN][intQ_Color];
} |
return;
} // BumpDown
//
// FUNCTION: BumpUp()
//
function BumpUp(intQ_IN)
{ |
if (arguments.length != 1)
throw new Error("function BumpUp()
ncorrectly called"); |
var obj = document.getElementById("Q" + (intQ_IN + 1) + "_Bar"); |
if (arrQ[intQ_IN][intQ_Rev] < 53)
{
arrQ[intQ_IN][intQ_Rev] += 6;
obj.style.height = arrQ[intQ_IN][intQ_Rev] + "px";
obj.style.width = "20px";
obj.style.backgroundColor = arrQ[intQ_IN][intQ_Color];
}
return; |
} // BumpUp
//
// FUNCTION: ShowSales()
//
function ShowSales(intQ_IN)
{ |
var obj;
if (arguments.length != 1)
throw new Error("function ShowSales()
incorrectly called"); |
obj = document.getElementById("Q" + (intQ_IN + 1) + "_Bar"); |
alert("Q" + (intQ_IN + 1) + " sales are $" + arrQ[intQ_IN]
[intQ_Rev] + "MM"); |
return; |
} // ShowSales |
//-->
</script>
</head>
<body onload="InitializeNav();"
style="FONT-SIZE: 8px; COLOR: #000000; FONT-FAMILY: verdana,geneva,arial;
MARGIN-TOP: 0px; MARGIN-LEFT: 0px"> |
<table border="0" width="144" style="font-size: 8px; COLOR: #000000;"> |
<!-- start only row in parent table -->
<tr> |
<!--- begin column 1 -->
<td valign="top" width="128">
<img height="34" src="logo.gif" width="118" border="0">
<img height="5" src="darkdotline.gif" width="118" border="0"> |
<span style="COLOR: #333333; FONT-SIZE: 8px;">
TODAY'S CHARTS
</span> |
<br>
<img height="5" src="darkdotline.gif" width="118" border="0">
<br> |
<!-- begin the second table for the actual chart -->
<table border="1" width="100" style="font-size: 8px;"> |
<tr bgColor="white">
<td width="23" height="65" align="center" valign="bottom"
onclick="ShowSales(intQ1)">
<img id="Q1_Bar" alt="Q1" align="bottom" style="WIDTH: 20px;
HEIGHT: 10px; BACKGROUND-COLOR: red;" WIDTH="20" HEIGHT="1">
</td> |
<td width="23" height="65" align="center" valign="bottom"
onclick="ShowSales(intQ2)">
<img id="Q2_Bar" alt="Q2" align="bottom" style="WIDTH: 20px;
HEIGHT: 20px; BACKGROUND-COLOR: blue;" WIDTH="20" HEIGHT="1">
</td> |
<td width="23" height="65" align="center" valign="bottom"
onclick="ShowSales(intQ3)">
<img id="Q3_Bar" alt="Q3" align="bottom" style="WIDTH: 20px;
HEIGHT: 30px; BACKGROUND-COLOR: yellow;" WIDTH="20" HEIGHT="1">
</td> |
<td width="23" height="65" align="center" valign="bottom"
onclick="ShowSales(intQ4)">
<img id="Q4_Bar" alt="Q4" align="bottom" style="WIDTH: 20px;
HEIGHT: 40px; BACKGROUND-COLOR: green;" WIDTH="20" HEIGHT="1">
</td> |
</tr> |
<tr> |
<td align="center" onclick="BumpUp(intQ1)">
<img src="open.gif" border="0" width="16" height="11">
</td> |
<td align="center" onclick="BumpUp(intQ2)">
<img src="open.gif" border="0" width="16" height="11">
</td> |
<td align="center" onclick="BumpUp(intQ3)">
<img src="open.gif" border="0" width="16" height="11">
</td> |
<td align="center" onclick="BumpUp(intQ4)">
<img src="open.gif" border="0" width="16" height="11">
</td> |
</tr> |
<tr> |
<td align="center">Q1</td>
<td align="center">Q2</td>
<td align="center">Q3</td>
<td align="center">Q4</td> |
</tr> |
<tr> |
<td align="center" onclick="BumpDown(intQ1)">
<img src="closed.gif" border="0" width="16" height="11">
</td> |
<td align="center" onclick="BumpDown(intQ2)">
<img src="closed.gif" border="0" width="16" height="11">
</td> |
<td align="center" onclick="BumpDown(intQ3)">
<img src="closed.gif" border="0" width="16" height="11">
</td> |
<td align="center" onclick="BumpDown(intQ4)">
<img src="closed.gif" border="0" width="16" height="11">
</td> |
</tr> |
</table> |
<!-- end table for chart table --> |
</td> <!--- end column 1 --> |
<!-- start column 2 --> |
<td valign="top" align="right" width="16"> |
<div id="openNav" onclick="HideNav()"> <img height="11" src="open.gif" width="16" border="0"> </div> |
<div id="closedNav" onclick="ShowNav()"> <img height="11" src="closed.gif" width="16" border="0"> </div> |
<div id="nav"> <img height="92" src="chart_nav.gif" width="16" useMap="#nav" border="0"> </div> |
<!-- end column 2 --> </td> |
<!-- end only row in parent table --> </tr> |
<!-- end table for enclosing table --> </table> |
<br> |
<map name="nav"> <area shape="RECT" coords="0,0,15,15" href="index.html"> <area shape="RECT" coords="0,19,15,34" href="calendar.html"> <area shape="RECT" coords="0,38,15,53" href="chart.html"> <area shape="RECT" coords="0,57,15,72" href="mail.html"> <area shape="RECT" coords="0,76,15,91" href="leads.html"> </map> |
<div ID="navurls">
<table border="0" width="120"
style="FONT-SIZE: 8px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px;
FONT-FAMILY: verdana,geneva,arial"> |
<tr align="center" valign="top" >
<td><A href="index.html">Home</A></td>
<td><A href="calendar.html">Cal</A></td>
<td><A href="chart.html">Chart</A></td>
<td><A href="mail.html">Mail</A></td>
<td><A href="leads.html">Leads</A></td>
</tr> |
</table> </div> |
</body> </html> |
| Send feedback about this page using email. | Copyright © 2008, iAnywhere Solutions, Inc. |