• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 16. Applied JavaScript > Bar Graph Generator

Bar Graph Generator

Graphs are excellent ways of displaying visual information. You can generate bar graphs in two ways; first, you can create them as graphics in a program like Adobe Photoshop or Macromedia Fireworks. But for dynamic data that might need to change on a regular basis, generating the little colored bars can be time consuming—so why bother? Have JavaScript do it instead, on the fly.

To generate a bar graph

chartType = "browser"
colorVal = "lilRed.gif"
chartDirection = ""

This method requires a framed site, where the left frame allows the visitor to choose various ways of displaying the data, and the right frame displays the data itself. Script 16.9 contains the frameset. The main script, Script 16.10, contains the form on the left side of the page with the user controls, and here, we're initializing our default values for when the page initially loads. The variable chartType sets the initial display to show browser usage; the variable colorVal contains the image source (1 pixel colored red; the pixel will be used to build a red bar); and chartDirection is set to empty. The initial view of the page is shown in Figure 16.5.

Script 16.9. The frameset for the bar chart generator.

Script 16.10. This frame contains the form with the user controls.

Figure 16.5. The initial horizontal view of the bar chart page.

function chgChart() {

The chgChart() function, as you might expect from the name, will cause the contents of the chart on the right side to change.

if (chartType == "browser") {

This example can display either of two historical charts (based on the user's choice): a graph of browser usage or a graph of JavaScript version availability. If the user wants to view the browser chart, run the following lines of code.

headName = new Array ("Browser usage
→ by year","1998","1999","2000",
→ "2001","2002","2003")

The headName array contains the headers for the chart. The first string (at position 0) contains the chart name, and the next four contain the year labels.

array1 = new Array ("Netscape",
→ 38.9,31.9,21.2,12.4,6.6,5.1)
array2 = new Array ("MSIE",
→ 60.6,67.4,78.3,85.6,92.5,94.0)
array3 = new Array ("Other",
→ 0.5,0.5,0.5,2.1,0.9,1.0)

These lines initialize the three data arrays (array1, array2, and array3) with the value labels and the corresponding values. These values will be used later to calculate the size of each bar in the graph.

headName = new Array ("JavaScript
→ usage by year","1998","1999",
→ "2000","2001","2002","2003")

If, instead of the browser chart, the user wants to see the JavaScript usage chart, this is where you set up the chart name and year labels.

array1 = new Array ("1.2 or later",
→ 63.4,66.5,78.4,80.2,88.1,89.1)
array2 = new Array ("1.0 - 1.1",
→ 18.7,12.6,2.8,0.8,0.3,0.3)
array3 = new Array ("No JavaScript",
→ 17.9,21.0,18.8,19.0,11.6,10.6)

These lines initialize the three data arrays for the JavaScript usage bar chart.

arrayArray = new Array
→ (array1,array2,array3)

In JavaScript, there's no data type to handle two-dimensional arrays. The way to work around that is to create an array that in turn contains arrays. In this case, the cleverly named arrayArray is an array that contains the three data arrays from step 7, array1, array2, and array3.

arrayLength = headName.length

Later, we're going to need to know how many items we have in our chart, so we set up a variable here, arrayLength, to store that value, which is set to the length of the headName array.


At this point, everything that needs to be set has been initialized, so we force the chart to be drawn by reloading the right frame.

→ chgChart()"

Whenever the user clicks on either of the radio buttons (Browser Usage or JavaScript Usage) to choose a chart type, this bit of code is executed. It resets the chartType variable, and then calls the chgChart() function. This will result in the bar chart in the right frame being redrawn to match the new choice.

→ chgChart()"

When the user clicks on any of the radio buttons to choose a color (red, blue, or green), the colorVal variable is reset to the new choice, and chgChart() is then called to redraw the chart.

→ chgChart()"

When the user clicks on either of the radio buttons to choose a direction (horizontal or vertical), the chartDirection variable is reset to the new choice, and chgChart() is called to redraw the chart.

Script 16.11 contains the code that generates the bar chart in the right frame, based on the variables that were set in the left frame (back in Script 16.10).

Script 16.11. This frame draws the bar charts.

if (parent.left.chartDirection=="") {
   → "horizontal"

If the variable from the left frame chartDirection has never been set to a value, that's a flag that we're running this code for the first time. In this case, set the direction to horizontal, and force the function chgChart() from Script 16.10 to run.

→ headName[0]+"<\/h2><table>")

Here's the start of the actual drawing code. First, we write out the name of the chart (stored in parent.left.headName[0], and set to the h2 HTML size) and then open up a table tag. All the rest of this page will be inside this table.

for (j=1;j<parent.left.arrayLength;
→ j++) {

Here's the first of two loops that we'll be going through (remember that pseudo two-dimensional array from step 8?). This external loop uses j as the index variable, and how many times it loops around is based on arrayLength.

if (parent.left.chartDirection==
→ "horizontal") {

If the user wants to see the horizontal version of the chart, run the following code.

document.write("<tr><td colspan=
→ '2'><p><br \/><\/p><h3>"+parent.
→ left.headName[j]+"<\/h3><\/td>
→ <\/tr>")

The first row of each chart contains a blank line, followed by the jth year label. That's written out inside an h3 tag to make it stand out.

for (i=0;i<parent.left.arrayArray.
→ length;i++) {

Here's the horizontal version of the second of the two loops. This internal loop uses i as its index, and how many times it loops around is based on the number of arrays that we stored in the arrayArray.

→ left.arrayArray[i][0]+"<\/td><td>")

The detail row of the table is started here, and we first write out the value label (either the browser type or the JavaScript version), which is stored in arrayArray[i][0]. Remember that arrayArray is the array of arrays, so it needs two subscripts to identify each unique element.

document.write("<img src='"+parent.
→ left.colorVal+"' height='15'
→  width='"+(parent.left.arrayArray
→ [i][j]*3)+"' alt='horizontal bar'
→ \/>")

Next, the bar image is calculated. The color of the bar is based on colorVal, the height is always 15 pixels, and the width is the value of the ith by jth index in the array, multiplied by three. For example, if colorVal is “lilBlue.gif” and arrayArray[3][4] is 30, this would write out an image tag to draw a blue rectangle, 15 pixels high by 90 pixels wide.

→ +parent.left.arrayArray[i][j]
→ +"<\/td><\/tr>")

A couple of blank characters (the &nbsp;) are written out, followed by the actual data value to the right of the bar to finish off this row. This is the end of the interior loop for the horizontal section of the code.

document.write("<tr><td colspan='"+
→ (parent.left.arrayLength-1)+"'>
→ <p><br \/><\/p><h3>")

If the user wants to see the chart drawn vertically (Figure 16.6), we start by writing the initial row of the chart. The vertical version of the chart is somewhat more complex and requires two internal (but separate) i loops.

Figure 16.6. The vertical bar charts.

→ headName[j]+"<\/h3><\/td>
→ <\/tr><tr valign='bottom'
→ align='center'>")

Here we write out the label, finish the initial row, and open up the next row.

for (i=0;i<parent.left.arrayArray.
→ length;i++) {

Here's the first internal loop. This one will write out each vertical bar on the graph in a row.

document.write("<td><img src=
→ '"+parent.left.colorVal+"'
→ hspace='10' width='15' height='"+
→ (parent.left.arrayArray[i][j]*3)+
→ "' alt='vertical bar' \/><\/td>")

And here's the image tag being written on the fly. This time, the width is fixed at 15 pixels, but the height varies based on the value found in the array of arrays. For example, if colorVal is “lilGreen.gif” and arrayArray[3][4] is 30, this would write out an image tag to draw a green rectangle, 90 pixels high by 15 pixels wide.

→ align='center'>")

When all the bars on the graph have been written out, close that table row and start the next row.

for (i=0;i<parent.left.arrayArray.
→ length;i++) {

Here's the second internal loop. This one will write the value of each data point, under its corresponding bar, followed by the y-axis label.

document.write("<td>" + parent.
→ left.arrayArray[i][j] + "<br \/>"
→ + parent.left.arrayArray[i][0] +
→ "<\/td>")

Here's the information being written out for each bar. The arrayArray[i][j] is the value of that bar, and arrayArray[i][0] is the data label for that bar.


After the last internal loop is complete, we need to write out a final end row tag.


At this point, both the horizontal and vertical sections are done, and the external loop has completed, so we write out the final table tag to end our script.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint