Chart.java


To make a histogram, we will be using the java class called "Chart". If Chart.class and Chart.java are on the web site, we can use them from ordinary web pages (written in HTML). This is done by sending certain parameters to the java applet that draws our histogram.

First you need to have a copy of Chart.class in the same folder as your .html document. Simply click on the link and Save the link to your computer. Be sure not to change the name and that it saves it as "Source" and not as "Text".


The Basics:

In your HTML document, you must start any JAVA applet with the tag <applet> and end with </applet> Here is how to begin and end the Chart applet:

<applet code="Chart.class" width=300 height=300>>


.
.
.
</applet>

Now you just need the stuff in between. At the very least you need to tell it how many columns (or bars) to draw, the name of the column, and how tall (or long) to draw it.

The structure of all these are similar. All the instructions we need to send to the applet will be through a HTML tag called " param"(short for parameter). This tag starts with

<param followed by name= and value=. This assigns the value to the name of the parameter, and sends it to the java applet.

Diffferent applets will be expecting different names and values. For the Chart applet, it needs to know how many columns to draw, so it has a parameter called "columns" that should have a value that describes how many columns you want. As an example, here is how to specify that you want to have four cloumns:

<param name=columns value="4">

each of the columns can have different names and lengths, so that they can to be distiguished from each other. The first column is refered to as c1, the second as c2, and so on. Each column needs to be named, and this is done by using the <param tag in your HTML documnet and assigning some name to the column's label. Here is how to label the first column (otherwise known as "c1") "Jan":

<param name=c1_label value="Jan">

You need to add a new line with a <param> tag for each label of each column, by changing the name to c2_label or c3_label (and so on).

The length is specified in a similar way:

<param name=c1 value="10">

Try small values at first, so it won't try to draw the bar off the screen. In order to use very small numbers, you need to specify a scale value.

<param name=scale value="4">

This will convert your values by multiplying each value by this number. If your maxium is 50, and you want it to take up 200 pixels, change the scale to 4 and it will drawn proportionally larger with all the other columns. These values are relative to the original width and height values with which you started the applet.


This will get you started. Save the html file you wrote as an ordinary text file, and try viewing the chart by loading it in your web browser

(or if you have MacOS 8, you can open your file in the Applet Runner, found in the "Apple Extras" folder)


Other Fancy Parameters

The Chart can be vertical or horizontal:

<param name=orientation value="vertical">

Each bar can be a different color:

red, green, blue, pink, orange; cyan, white, yellow, gray, or darkGray;

<param name=c3_color value="magenta">

The Bars can be either STRIPED or SOLID

<param name=c1_style value="striped">


Examples

Basic Histogram example

Fancy Histogram example