| jalarie on Jun 18, 2011 at 10:01:52 AM I stored the data in an external file named bardata.js to make it easy to change:
[code]
BarData=new Array(
'Jim~101',
'Tom~42',
'Bob~17',
'George~110'
);
[/code]
Next, a web page to pull it in and display it:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Bar Chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en-US" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<meta name="description" content="Display a bar chart." />
<meta name="keywords" content="bar,chart" />
<link rel="icon" href="favicon.ico" />
<link rev="made" href="mailto:jalarie@umich.edu" />
<!--
Author: James Alarie
Company: -independent-
Address: 3391 N Genesee Rd
Flint MI 48506
Latitude: 42.9663 Longitude: -83.7769
Telephone: +1-810-736-8259
Fax: -none-
Web Site: http://spruce.flint.umich.edu/~jalarie/
E-Mail: jalarie@umich.edu
Comments: Having said that, I've probably told you more than I know.
-->
</head>
<body class="body1">
<div id="body">
<!-- Page Header -->
<div id="header">
<h1>Bar Chart</h1>
<hr />
</div>
<!-- Content -->
<div id="content">
<br />
<noscript>
<p class="notice">
You must have scripting enabled to make full use of this page.
</p>
</noscript>
<script type="text/javascript" src="bardata.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
Out ='';
Out+='<table border="1" cellspacing="2" cellpadding="2">\n';
Out+='<thead>\n';
Out+='<tr>\n';
Out+='<th>Label<\/th>\n';
Out+='<th>Value<\/th>\n';
Out+='<th>Bar<\/th>\n';
Out+='<\/tr>\n';
Out+='<\/thead>\n';
Out+='<tbody>\n';
document.write(Out);
for (ix1=0; ix1< BarData.length; ix1++) {
DataLine=BarData[ix1];
DataItems=DataLine.split('~');
Out ='';
Out+='<tr>\n';
Out+='<td>'+DataItems[0]+'<\/td>\n'; // label
Out+='<td>'+DataItems[1]+'<\/td>\n'; // count
Out+='<td>\n';
Out+='<span style="float:left; background-color:black; width:'+DataItems[1]+'px"> <\/span>\n';
Out+='<\/td>\n';
Out+='<\/tr>\n';
document.write(Out);
}
Out ='';
Out+='<\/tbody>\n';
Out+='<\/table>\n';
document.write(Out);
/*]]>*/
</script>
</div>
<!-- Page Footer -->
<div id="footer">
<br clear="all" /><hr />
Written on June 18, 2011, by:
<a href="mailto:jalarie@umich.edu">James Alarie</a>.
</div>
</div>
</body>
</html>
[/code]
|
Simple HTML Bar Chart - Input from file