THE JAVA APPLETS ANY SERIOUS WEB DESIGNER SHOULD HAVE

INTRODUCTION

With this advanced line chart applet you can setup an interactive chart of your data. Many advanced features are included such as a tip text window and curve fitting abilities. The applet has the following features:

• Smooth bezier curves can be fitted to your data.
• The applet has a tip text measurer, which is activated when the user moves the mouse pointer across the chart.
• An unlimited number of curves are supported and axis ranges are automatically calculated for the curves.
• A color value, label text and tip text description for each line can be specified.
• Supports a background image.
• Specify font type, font size and font style of the text and title.
• You can specify the axis color, text color, title color, selection color, background color, the description text and background color.
• Compatible with any Java compatible browser.

Before using this applet you must read the license agreement.

APPLET INFORMATION

DEPENDENT FILES

The following file must be included with the applet in order for it to function properly:

mmlinechart.class

GENERAL PARAMETERS

This applet is configurable with normal HTML applet parameters. The first thing that must be done is to configure the applet main tags:

<APPLET CODE="mmlinechart.class" WIDTH=300 HEIGHT=150>
</APPLET>

As you can see, the size in the example is 300x150 pixels. You can change the dimensions to whatever size you wish. However, you take note that sometimes a big applet requires more processing power which may be hard for some computers. The following parameters may not be changed:

<PARAM name="mandomartis0" 
value="This is an applet from Anibal's Essential Applets package">
<PARAM name="mandomartis1" 
value="It was developed by Anibal Wainstein / Mandomartis">
<PARAM name="mandomartis2" 
value="Get it at http://www.mandomartis.com/essentialapplets/">

These are Mandomartis credits are are used to identify the applet. The following parameter controls the general frame delay in milliseconds, and thus the frames per second (FPS). The default value is 70:

<PARAM name="delay" value="70">

COPY PROTECTING THE APPLET, THE HOSTNAME AND FILENAME PARAMETERS

The applet is a commercial applet and must therefore be copy protected for your server, so that no one can take the applet and use it for his/hers homepage. There are two parameters that handles this, the encrypted "hostname" and "filename" parameters. What happens is that the applet reads the hidden host name and file name in these parameters and compares it to the server name and file name that it is imbedded in. If they do not match, then the applet will not work. Note that with "filename" we mean both the filename AND the path to the file. Let us take an example:

Let us assume that the URL where the applet will be located is:

http://www.myhostname.com/myapplet/help.html

The host name in this case happens to be "http://www.myhostname.com"
and the filename is "/myapplet/help.html".

The hostname and filename parameters does not have to be exact.
So the possible host names could be "www.myhostname.com", 
"myhostname" or "myhostname.com". While filename could be 
"myapplet", "myapplet/help.html", "help.html" or just "help". 
For the applet the hostname and filename parameters are search 
keywords that are use search in those two strings
 

Please note that in the example above we have not specified the "http://". You must not do that. You should know that the hostname and filename part of the url where the applet is inbedded in must be specified separately. Also the hostname must be more than 4 charaters long.

You can specify several hostnames and filenames if your homepage files can be reached from two or more different servers or from several mirror sites. Suppose that you have a company and you have your own hostname, e.g. "www.yourcompany.com". You have an Internet provider named "internetprovider" as well. Visitors can then access your file through your host "www.yourcompany.com/myfile.html" and through your Internet provider "www.internetprovider.com/yourcompany/myfile.html". The first hostname could be "www.yourcompany.com" and the second "www.internetprovider.com". The filenames could both be "myfile.html.".

As we said earlier the hostname and filename are encrypted. Therefore you must use the encoder applet for each applet and enter the hostname or filename there. You have two fields there where you can write each hostname and filename. The resulting HTML parameter content can then be pasted into the HTML page. The resulting HTML code could look like this:

<PARAM name="hostname0" value="~y31u:PR.FrazjkRsfPhh+k">
<PARAM name="hostname1" value="dl34jk-d~sa:fas">
<PARAM name="filename0" value="dy">
<PARAM name="filename1" value="sadf:ds/dsfa">

To run the encoder applet that was included in the package, you open the HTML file "encoder.html" in your favourite web browser.

The last thing you should know is that if you have put the applet on an URL called "http://www.yourhost.com/index.html" then you must specify a slash "/" as filename. Because you can reach this URL by writing "http://www.yourhost.com/" and "http://www.yourhost.com/index.html". By writing a slash "/" you cover both possibilities. Here are more examples of hostname and filename specifications:

Your URL:                  http://www.hellespoint.com/
Recommended hostname:      hellespoint
Recommended filename:      /

Your URL:                  http://www.larshomepage.com/products.html
Recommended hostname:      larshomepage
Recommended filename:      products.html

Your URL:                  http://henkesimage.sweden.se/list/
Recommended hostname:      henkesimage.sweden
Recommended filename:      list

Your URL:                  http://myhost.lnet.com/~john/home.html
Recommended hostname:      myhost.lnet.com
Recommended filename:      ~john/home.html

The applet will "see" what you see in the adress field on your browser when you enter your homepage. As long as you remember this you will be able to configure the applet without problems. Note also that you must have the exact number of hostnames and filenames for else the applet will not work (one filename for each hostname).

SETTING UP THE DATA WITH COLORS, TEXT AND DESCRIPTIONS

Write the values of each line using the "numberdatax" and "numberdatay" parameters, like this:

<PARAM name="numberdatax0,0" value="0">
<PARAM name="numberdatax0,1" value="1">
<PARAM name="numberdatax0,2" value="2">
<PARAM name="numberdatax0,3" value="3">
<PARAM name="numberdatax1,4" value="1">
<PARAM name="numberdatax1,5" value="2">
<PARAM name="numberdatax1,6" value="4">
<PARAM name="numberdatax2,0" value="0">
<PARAM name="numberdatax2,1" value="1">
<PARAM name="numberdatax2,2" value="2">
<PARAM name="numberdatax2,3" value="4">
<PARAM name="numberdatax2,4" value="6">
<PARAM name="numberdatax2,5" value="9">
<PARAM name="numberdatax2,6" value="11">
<PARAM name="numberdatay0,0" value="1235">
<PARAM name="numberdatay0,1" value="1512">
<PARAM name="numberdatay0,2" value="1777">
<PARAM name="numberdatay0,3" value="1181">
<PARAM name="numberdatay1,0" value="1334">
<PARAM name="numberdatay1,1" value="1163">
<PARAM name="numberdatay1,2" value="973">
<PARAM name="numberdatay2,0" value="1492">
<PARAM name="numberdatay2,1" value="1944">
<PARAM name="numberdatay2,2" value="1981">
<PARAM name="numberdatay2,3" value="1447">
<PARAM name="numberdatay2,4" value="1672">
<PARAM name="numberdatay2,5" value="1339">
<PARAM name="numberdatay2,6" value="1207">

The first index number of the parameter name indicates the line number. The sub index will then be used to specify the data values for that specific line. For instance, in the example above the parameters "numberdatax1,0", "numberdatax1,1", "numberdatax1,2", "numberdatay1,0", "numberdatay1,1" and "numberdatay1,2" are 3 points in the second line (the second line has index 1). You can specify an unlimited number of lines this way. If you want to specify x values for the lines then make sure you specify an "numberdatax" parameter for each "numberdatay". The "numberdatax" values must be ordered by number size. If you want the applet to calculate the x numbers for you instead, then you can set the "usexdata" parameter to "no":

<PARAM name="usexdata" value="no">

If you do this then you do not have to specify any "numberdatax" parameters.

When adding further information about each chart line you can follow the same idea as when adding data. Here, only the first index is used and it indicates which line the parameter is refering to. You can specify the descriptions which will appear in a window below the mouse pointer ("description"), the colors ("color") and the text labels for each of the numbers ("text") respectively:

<PARAM name="text0" value="Programming">
<PARAM name="text1" value="Planning">
<PARAM name="text2" value="Meetings">
<PARAM name="description0" 
value="John spends 10 hours programming.">
<PARAM name="description1" 
value="John spends 7 hours planning projects.">
<PARAM name="description2" value="John spends 8 hours in meetings.">
<PARAM name="color0" value="ff0000">
<PARAM name="color1" value="00ff00">
<PARAM name="color2" value="0000ff">

Now the content of "description0" will be displayed when you move the mouse pointer across a line label. The first line will have the label "Programming" and the color red (ff0000).

If you want to fit smooth bezier curves for all your chart lines, then you can set the "usecurvefitting" parameter to "yes":

<PARAM name="usecurvefitting" value="yes">

Note that the bezier curves will only give good results for data with small fluctuation.

By setting the "uselinemarkers" parameter to "yes", square markers will mark each data point on the chart lines:

<PARAM name="uselinemarkers" value="yes">

With the "titletext" parameter you can specify a title for your chart:

<PARAM name="titletext" value="My Line Chart"> 

Note that you must set the "usetitle" parameter to "yes" if you want the title text to be displayed:

<PARAM name="usetitle" value="yes">

This applet uses automatic axis fitting. However, you can force the applet to set the axis with the following parameters:

<PARAM name="maxyaxis" value="3000">
<PARAM name="maxxaxis" value="10">

Make sure to remove these parameters if you want the applet to set the values automatically.

SELECTING COLORS

With the "textcolor" parameter you can specify the color of the text labels:

<PARAM name="textcolor" value="ffff00">

The "backgroundcolor" is only effective if you do not use a background image.

<PARAM name="backgroundcolor" value="003f00">

With the "titletextcolor" you can change the color of the title text:

<PARAM name="titletextcolor" value="ffff00">

Use the "selectedcolor" parameter to specify the color you want to be used when a line label is selected and starts to blink.

<PARAM name="selectedcolor" value="ffffff">

The "descriptiontextcolor" and "descriptionbackgroundcolor" is the color that the description window and text will have.

<PARAM name="descriptiontextcolor" value="000000">
<PARAM name="descriptionbackgroundcolor" value="ffff7f">

Use the "axiscolor" to set the color for the chart axis and the number range labels:

<PARAM name="axiscolor" value="000000">

With the "linemarkercolor" you can specify a color for the line markers:

<PARAM name="linemarkercolor" value="ffff00"> 

FONT PARAMETERS

The font parameters affect the font type ("font" parameter), font size ("fontsize" parameter) and the font style ("bold" and "italic" parameters) for the text label:

<PARAM name="font" value="Helvetica">
<PARAM name="fontsize" value="16">
<PARAM name="bold" value="no">
<PARAM name="italic" value="yes">

The font types can be "TimesRoman", "Helvetica", "Courier" and "Dialog". If you want the font style to be bold or italic then specify the value "Yes" on these parameters. To change the font specifications for the title use the following parameters instead:

<PARAM name="titlefont" value="Helvetica">
<PARAM name="titlefontsize" value="16">
<PARAM name="titleitalic" value="no">
<PARAM name="titlebold" value="yes"> 

OTHER PARAMETERS

The background image can be specified by the "backgroundimage" parameter:

<PARAM name="backgroundimage" value="background.gif"> 

This parameter overrides the "backgroundcolor" parameter's effect if you specify it. By leaving this parameter blank you can disable the background image and use the background color instead. The background image must have the same dimensions as the applet.

Set the "enableinitialanimation" parameter to "no" if you want to disable the initial animation when the lines appear one by one:

<PARAM name="enableinitialanimation" value="yes">

Use the "initialanimationspeed" parameter to increase the initial animation speed:

<PARAM name="initialanimationspeed" value="1">

Use the "chartwidth" parameter to set the width of the chart:

<PARAM name="chartwidth" value="130">

The "textdistancex" and "itemtextdistance" affect the text label distance from the left border and the vertical distance between each text label respectively:

<PARAM name="textdistancex" value="160">
<PARAM name="itemtextdistance" value="16">

Use the "descriptiontextspeed" and the "descriptionwindowwidth" parameters to set the description text scrolling speed and the description window width respectively:

<PARAM name="descriptiontextspeed" value="3">
<PARAM name="descriptionwindowwidth" value="50">

The "markersize" parameter specifies the size of the label markers:

<PARAM name="markersize" value="12"> 

If you set "usecirclemarker" to "yes", then the label markers will have circular form. Else they will be square:

<PARAM name="usecirclemarker" value="yes">

To center the text labels vertically on the screen you should set the "centeritems" parameter to "yes":

<PARAM name="centeritems" value="yes">

EXAMPLE OF A FULL CONFIGURATION

The following HTML text is an example of an applet configuration:

<APPLET CODE="mmlinechart.class" WIDTH=300 HEIGHT=150>
<PARAM name="mandomartis0" 
value="This is an applet from Anibal's Essential Applets package">
<PARAM name="mandomartis1" 
value="It was developed by Anibal Wainstein / Mandomartis">
<PARAM name="mandomartis2" 
value="Get it at http://www.mandomartis.com/essentialapplets/">
<PARAM name="hostname0" value="X2x3eNid5X2x;BgS">
<PARAM name="filename0" value=".2">
<PARAM name="delay" value="70">
<PARAM name="font" value="Helvetica">
<PARAM name="fontsize" value="11">
<PARAM name="italic" value="yes">
<PARAM name="bold" value="no">
<PARAM name="titlefont" value="Helvetica">
<PARAM name="titlefontsize" value="14">
<PARAM name="titleitalic" value="no">
<PARAM name="titlebold" value="yes">
<PARAM name="backgroundcolor" value="000000">
<PARAM name="descriptiontextcolor" value="000000">
<PARAM name="descriptionbackgroundcolor" value="ffff7f">
<PARAM name="textcolor" value="3fff3f">
<PARAM name="titletextcolor" value="ffff00">
<PARAM name="selectedcolor" value="ffffff">
<PARAM name="linemarkercolor" value="ffff00">
<PARAM name="axiscolor" value="000000">
<PARAM name="backgroundimage" value="linechartback.jpg">
<PARAM name="enableinitialanimation" value="yes">
<PARAM name="initialanimationspeed" value="1">
<PARAM name="chartwidth" value="130">
<PARAM name="textdistancex" value="150">
<PARAM name="itemtextdistance" value="16">
<PARAM name="descriptiontextspeed" value="3">
<PARAM name="descriptionwindowwidth" value="50">
<PARAM name="markersize" value="12">
<PARAM name="usecirclemarker" value="yes">
<PARAM name="centeritems" value="yes">
<PARAM name="usetitle" value="yes">
<PARAM name="usexdata" value="yes">
<PARAM name="usecurvefitting" value="no">
<PARAM name="uselinemarkers" value="yes">
<PARAM name="titletext" value="Hits in June (per weekday)">
<PARAM name="maxyaxis" value="3000">
<PARAM name="maxxaxis" value="10">
<PARAM name="numberdatay0,0" value="1235">
<PARAM name="numberdatay0,1" value="1512">
<PARAM name="numberdatay0,2" value="1777">
<PARAM name="numberdatay0,3" value="1181">
<PARAM name="numberdatay0,4" value="1334">
<PARAM name="numberdatay0,5" value="1163">
<PARAM name="numberdatay0,6" value="973">
<PARAM name="numberdatay1,0" value="1492">
<PARAM name="numberdatay1,1" value="1944">
<PARAM name="numberdatay1,2" value="1981">
<PARAM name="numberdatay1,3" value="1447">
<PARAM name="numberdatay1,4" value="1672">
<PARAM name="numberdatay1,5" value="1339">
<PARAM name="numberdatay1,6" value="1207">
<PARAM name="numberdatax0,0" value="0">
<PARAM name="numberdatax0,1" value="1">
<PARAM name="numberdatax0,2" value="2">
<PARAM name="numberdatax0,3" value="3">
<PARAM name="numberdatax0,4" value="4">
<PARAM name="numberdatax0,5" value="5">
<PARAM name="numberdatax0,6" value="6">
<PARAM name="numberdatax1,0" value="0">
<PARAM name="numberdatax1,1" value="1">
<PARAM name="numberdatax1,2" value="2">
<PARAM name="numberdatax1,3" value="3">
<PARAM name="numberdatax1,4" value="4">
<PARAM name="numberdatax1,5" value="5">
<PARAM name="numberdatax1,6" value="6">
<PARAM name="text0" value="www.mandomartis.com">
<PARAM name="text1" value="www.mandomartis.com">
<PARAM name="description0" 
value="Total hits for www.mandomartis.com during 4 weeks in june">
<PARAM name="description1" 
value="Total hits for www.mandomartis.com during 4 weeks in june">
<PARAM name="color0" value="ff0000">
<PARAM name="color1" value="00ff00">
</APPLET>

© Copyright 2001-2005 Mandomartis Software Company