News
Forums
Fun & Games
Buy the Book
Search Enter your search terms Submit search form

Book Resources
⊕ Scripts
- All Scripts
- Chapter 1
- Chapter 2
- Chapter 3
- Chapter 4
- Chapter 5
- Chapter 6
- Chapter 7
- Chapter 8
- Chapter 9
- Chapter 10
- Chapter 11
- Chapter 12
- Chapter 13
- Chapter 14
- Chapter 15
- Chapter 16
- Chapter 17
FAQ
Errata
⊕ Excerpts
- Table of Contents
- Sample Chapter
⊕ Where to Learn More
- Sites
- Newsgroups
- Books
⊕ Previous Editions

The Workbench
Articles
Useful Scripts

Chapter 14: Applied JavaScript

Contents:

Using Sliding Menus
Adding Pull-Down Menus
A Slideshow with Captions
A Silly Name Generator
A Bar Graph Generator
Style Sheet Switcher

Return to Chapter 14

To use this script on your own page, click in the text area below, select all, and copy to grab the script. Then, just paste into your own page — and you're done.

A Bar Graph Generator

See it run: A Bar Graph Generator

Script 14.12

This is the HTML for the bar chart generator.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Bar Chart Form Input</title>
	<link rel="stylesheet" rev="stylesheet" href="script05.css" />
	<script language="Javascript" type="text/javascript" src="script05.js">
	</script>
</head>
<body>
<form action="#">
	Choose a chart<br />
	<input type="radio" name="type" value="browser" checked="checked" /> Browser Usage<br />
	<input type="radio" name="type" value="platform" /> JavaScript Usage<br />
	<p><br /></p>
	Choose a color<br />
	<input type="radio" name="color" value="lilRed.gif" checked="checked" />&nbsp;Red<br />
	<input type="radio" name="color" value="lilGreen.gif" /> Green<br />
	<input type="radio" name="color" value="lilBlue.gif" /> Blue<br />
	<p><br /></p>
	Choose a direction<br />
	<input type="radio" name="direction" value="horizontal" checked="checked" /> Horizontal<br />
	<input type="radio" name="direction" value="vertical" /> Vertical
</form>
<div id="chartArea"">&nbsp;</div>
</body>
</html>

Script 14.13

This CSS contains the styles for the bar chart example.

Script 14.14

This JavaScript draws the bar chart.

window.onload = initAll;

function initAll() {
	var radioButtons = document.getElementsByTagName("input");
	
	for (var i=0; i<radioButtons.length; i++) {
		if (radioButtons[i].type == "radio") {
			radioButtons[i].onclick = chgChart;
		}
	}
	chgChart();
}

function chgChart() {
	var bChart = new Object();
	bChart.name = "Browser usage by year";
	bChart.years = new Array("1998","1999","2000","2001","2002","2003","2004","2005","2006");
	bChart.fieldnames = new Array("Netscape","MSIE","Other");
	bChart.field1 = new Array(38.9,31.9,21.2,12.4,6.6,5.1,3,1,6);
	bChart.field2 = new Array(60.6,67.4,78.3,85.6,92.5,94.0,92,89,90);
	bChart.field3 = new Array(0.5,0.5,0.5,2.1,0.9,1.0,4,9,3);
	bChart.fields = new Array(bChart.field1,bChart.field2,bChart.field3);
	
	var jsChart = new Object();
	jsChart.name = "JavaScript usage by year";
	jsChart.years = new Array("1998","1999","2000","2001","2002","2003","2004","2005","2006");
	jsChart.fieldnames = new Array("1.2 or later","1.0 - 1.1","No JavaScript");
	jsChart.field1 = new Array(63.4,66.5,78.4,80.2,88.1,89.1,94,89,96);
	jsChart.field2 = new Array(18.7,12.6,2.8,0.8,0.3,0.3,0,0,0);
	jsChart.field3 = new Array(17.9,21.0,18.8,19.0,11.6,10.6,4,9,3);
	jsChart.fields = new Array(jsChart.field1,jsChart.field2,jsChart.field3);
	
	var radioButtons = document.getElementsByTagName("input");
	var currDirection = getButton("direction");
	var imgSrc = "images/" + getButton("color");
	var thisChart = (getButton("type")=="browser") ? bChart : jsChart;
	
	var chartBody = "<h2>"+thisChart.name+"</h2><table>";
	
	for (var i=0; i<thisChart.years.length; i++) {
		if (currDirection=="horizontal") {
			chartBody += "<tr><th rowspan='4' class='horiz'>"+thisChart.years[i];
			chartBody += "</th><td colspan='2'></td></tr>";
			for (var j=0; j<thisChart.fieldnames.length; j++) {
				chartBody += "<tr><td class='horiz'>"+thisChart.fieldnames[j];
				chartBody += "</td><td><img src='"+imgSrc+"' height='15' width='";
				chartBody += thisChart.fields[j][i]*3 + "' alt='horiz bar' />";
				chartBody += "&nbsp;&nbsp;"+thisChart.fields[j][i]+"</td></tr>";
			}
		}
		else {
			chartBody += "<tr><th rowspan='2' class='vert'>"+thisChart.years[i]+"</th>";
			for (var j=0; j<thisChart.fieldnames.length; j++) {
				chartBody += "<td class='vert'><img src='" + imgSrc;
				chartBody += "' alt='vert bar' hspace='10' width='15' height='";
				chartBody += thisChart.fields[j][i]*3 +"' /></td>";
			}
			chartBody += "</tr><tr>";
			for (j=0; j<thisChart.fieldnames.length; j++) {
				chartBody += "<td class='vert'>" + thisChart.fields[j][i] + "<br />";
				chartBody += thisChart.fieldnames[j] + "<br /><br /></td>";
			}
			chartBody += "</tr>";
		}
	}

chartBody += "</table>";
	document.getElementById("chartArea").innerHTML = chartBody;

function getButton(buttonSet) {
		for (var i=0; i<radioButtons.length; i++) {
			if (radioButtons[i].name == buttonSet && radioButtons[i].checked) {
				return radioButtons[i].value;
			}
		}
		return -1;
	}
}

Images: