<HTML>
<HEAD>
<TITLE>The Bar Chart</TITLE>
<SCRIPT LANGUAGE = JavaScript>
//Identify data to be plotted
//This prompts the user for the values to be plotted
- var a = prompt ("Value for St. Louis?", "")
- var b = prompt ("Value for Vancouver?", "")
- var c = prompt ("Value for Mons?", "")
- var d = prompt ("Value for Trier?", "")
- var e = prompt ("Value for Nairobi?", "")
- var f = prompt ("Value for Phan Rang?", "")
- var xData = new Array('StLouis','Vancouver','Mons','Trier','Nairobi','Phan Rang')
- var yData = new Array(a,b,c,d,e,f)
- var nBars = 6
- var plotTitle = "Plant Capacity"
|
//Plot parameters
//note the next statement is one that will be concatenated with other parameters in a later function
- var blackPen = "<img src='http://www.umsl.edu/~sauter/DSS/javasamples/images/black.gif' align='middle' height="
//some options are being set; they could be variables too
- var plotWidth = 500
- var barHeight = 30
- var barGap = barHeight/4
- var barWidths = new Array(nBars)
function maxOfArray(theArray, itsLength)
- //this function is called from the function computeBarWidths
- {
var maxArray = -10000
- // this is an arbitrary, but small number
for (var i = 0; i < itsLength; i++)
- //this is a "do" loop ... for 1 = 0 to L, where L is the number of items in the list; increment by 1
- // each value gets compared to the current largest value and replaces it if it is larger
- // the goal is to find the largest value in the dataset
- if (theArray[i] > maxArray)
- maxArray = theArray[i]
- return maxArray
- }
function minOfArray(theArray, itsLength)
- //this function is called from the function computeBarWidths
- {
var minArray = 10000
- // this is an arbitrary, but large number
for (var i = 0; i < itsLength; i++)
- //this is a "do" loop ... for 1 = 0 to L, where L is the number of items in the list; increment by 1
- // each value gets compared to the current largest value and replaces it if it is smaller
- // the goal is to find the smallest value in the dataset
- if (theArray[i] < minArray)
- minArray = theArray[i]
- return minArray
- }
function computeBarWidths()
- //this function is called from the function "do bar"
- {
var maxData = maxOfArray(yData, nBars)
- //identify the larger of the two
- //max is a method of "math"
var minData = minOfArray(yData, nBars)
- //identify the larger of the two
- //max is a method of "math"
var dataRange = maxData - minData
- //compute the range for the bar chart
- for (var i = 0; i < nBars; i++)
barWidths[i] = Math.floor(
(yData[i]-minData) / maxData * plotWidth )
- //floor is a method of math that rounds to the nearest integer
- //this computes the width of the bars as a function of how much data you have
- }
function doBar()
- {
document.write("<CENTER><B>"+plotTitle+
"</B></CENTER><P>")
- //this prints the title
computeBarWidths()
- var i, j
for (i = 0; i < nBars; i++)
- {
- document.write("<pre>" +
blackPen + barGap + " width=1><br>")
- //the value of blackPen was set earlier
- document.write(blackPen + barHeight +
" width=" + parseFloat(barWidths[i])+">")
if (yData[i] > 1000)
- //if the value of y is greater than 1000, print it bold
- document.write("<B>")
document.write(" "+ xData[i]+": "+yData[i]+"<br>")
- //prints the values of x, a colon and the value of y
- if (yData[i] > 1000)
- document.write("</B>")
- }
- document.write(blackPen + barGap +
" width=1><br></pre>")
- }
</SCRIPT>
</HEAD> <BODY TEXT="#000000" link="000000" VLINK="#000000"
BACKGROUND="background.jpg">
<FONT FACE="ARIAL">
<CENTER> <H2> <FONT
FACE="Arial"><FONT COLOR="#C100C1"><FONT SIZE=+4>A Sample
DSS</FONT></FONT></FONT></H2></CENTER>
<P>
<SCRIPT LANGUAGE = JavaScript>
- doBar()
</SCRIPT>
|
<SCRIPT LANGUAGE = "JavaScript">
// This automatically updates the last modified date for the page.
//
when = document.lastModified
document.write("<i>This page was last modified on:</i> " + when + "<br>")
//
// This automatically updates the location documentation on the page.
where = document.location
document.write("<i>URL:</i> " + where)
</script>
|
<br>
© Vicki L. Sauter. All rights Reserved.
</html>
|