Information Systems
College of Business Administration
University of Missouri - St. Louis

Example 13
Creating Bar Charts

<HTML>
<HEAD>
<TITLE>The Bar Chart</TITLE>

<SCRIPT LANGUAGE = JavaScript>
//Identify data to be plotted
var xData = new Array('StLouis','Vancouver','Mons','Trier','Nairobi','Phan Rang')
var yData = new Array(80,160,320,640,1280,262)
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="Beehive"><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>

| UM-St. Louis Home Page | College of Business Page | IS Home Page |


Page Owner: Professor Sauter (Vicki.Sauter@umsl.edu)
© Vicki L. Sauter. All rights Reserved.