The WeatherChart application demonstrates how you can use Lotus eSuite to graphically display real-time data from the Web. This type of application is useful for displaying business-related information, such as
WeatherChart displays a series of graphs that show weather information for US cities. The user clicks a button to select a city, and WeatherChart displays three charts that plot hourly temperature, humidity, and barometric pressure readings for the selected city. The readings cover the most recent 24-hour period. To view the weather information for another city, the user clicks another button.
WeatherChart polls a copy of WSI Corporation's Intellicast weather information on the Lotus Web site every hour. It reads the current-condition files for the featured cities and updates a set of dataset files for each city. It then plots the data from these files in three charts.
When the user selects a new city, WeatherChart dynamically changes the data source for the three charts, rather than reloading the HTML page. The quick response to user input is an advantage that eSuite applets, and Java applets in general, have over other Web implementations.
The ScriptHelper applet is the mechanism that lets you publish data items to and retrieve data items from the InfoBus through scripts. The WeatherChart HTML file contains JavaScript code that uses the ScriptHelper applet to publish data to the InfoBus and change the chart display to show weather data for the city selected by the user.
The following diagram shows how the ScriptHelper, FileReader, and Chart applets interact in the WeatherChart application:
Note that WeatherChart uses three separate instances of both FileReader and Chart, one pair of each for temperature, humidity, and pressure, respectively. For simplicity, the diagram shows only one of these pairs.
The diagram illustrates the following process:
You can construct data sets to include title, legend, and label information as well as the data to be charted (called a series). In this case, the Chart object parses the data set to differentiate the data from the labels and titles.
WeatherChart uses data sets stored on the Web server as text files. For each city, there are three files with the extensions .TEM, .HUM and .PRE, for temperature, humidity, and pressure data sets, respectively. An example of a .TEM file is shown below:
"Temperature"
" " p8 p9 p10 p11 a12 a1 a2 a3 a4
"Temperature" 74 72 72 70 69 67 68 66 67
The first line of the above file is parsed as the title of the chart, the second as the x-axis labels, and the third as the data series to be plotted. The x-axis labels represent the hours (AM or PM) when the temperature data was recorded.
To execute ReadWeather, follow either of these steps:
AT 8:05 /EVERY:Su,M,T,W,Th,F,S doReadW.cmdtells the NT scheduler to run the command file doReadW.cmd at 8:05 AM every day of the week.
See Installing and running the WeatherChart application below, for more information.
The syntax for invoking ReadWeather is
(jvm) ReadWeather config [proxy:port] [/tzone]
Where
(jvm) | is the Java virtual machine that loads the application; either java or jview. |
config | is the name of the configuration file. |
proxy:port | (optional) is a proxy server through which ReadWeather issues HTTP requests. |
/tzone | (optional) specifies a timezone code, for example, EST. If not specified, a default is used. |
jview ReadWeather wchart.dat jview ReadWeather wchart.dat proxysrv.com:8080 /tEST
ReadWeather operates as follows:
The configuration file specifies where weather information is read from, and which dataset files to update. It is a text file, with lines in the form:
city name|dataset base file name|URL
Where
city name | is the name of the city that the files refer to. |
data set base filename | specifies the path and base file name for that city's dataset files. |
URL | is the URL that is read to obtain the weather information. |
| | is the pipe character used to separate data items on each line. |
The configuration file that accompanies WeatherChart contains the following lines:
New York |newyork |http://nextgenserver.lotus.com/samples/weatherchart/curcond.lga Los Angeles|losangeles |http://nextgenserver.lotus.com/samples/weatherchart/curcond.lax Detroit |detroit |http://nextgenserver.lotus.com/samples/weatherchart/curcond.dtw Chicago |chicago |http://nextgenserver.lotus.com/samples/weatherchart/curcond.ord Chattanooga|chattanooga|http://nextgenserver.lotus.com/samples/weatherchart/curcond.mem Baton Rouge|batonrouge |http://nextgenserver.lotus.com/samples/weatherchart/curcond.btrThe dataset file names in the example above do not specify a path. The path defaults to the location of ReadWeather.
These current-condition files each contain two lines of text. The first line provides date and time information; the second line lists values for weather conditions, separated by semi-colon (;) characters. The values are provided in the following order: temperature, humidity, wind, visibility, conditions, pressure. Following is a sample current-condition file:
Observations for 2pm(18z) 29-aug-97 89;56;e3;7;m cldy;29.95
<APPLET
CODEBASE="../.."
CODE="lotus.chart.Chart"
ARCHIVE="jars/devpack_chart_app.jar"
Width=566 HEIGHT=219
NAME="TemperatureSet">
CODEBASE specifies the location of the Java class files for the applet. This includes the applet class file and any class files upon which the applet depends. In general, you should install a single copy of the eSuite DevPack class files in a set location on your server, and then configure each applet instance to use that location as the CODEBASE. In the example above, the path is relative to the HTML file.
CODE specifies the name of the Java class representing the applet, for example Chart. When an applet is part of a package, as the eSuite applets are, the class name you specify must be the fully qualified package name. In the example above, this fully justified name is lotus.chart.Chart.
ARCHIVE specifies the path to the class definitions for Chart, ScriptHelper, and FielReader. These class definitions are bundled together and compressed. Netscape needs this path to find and decompress the files.
WIDTH and HEIGHT specify the size of the applet's bounding rectangle, in pixels. The ScriptHelper and FileReader applets have no user interface, so they are made invisible on the Web page by using a WIDTH and HEIGHT setting of 1 in the APPLET tag. In the example above, the Chart dimensions are 566 x 219 pixels. The displayed chart automatically scales to fit this area.
NAME specifies the name of the applet on the page. This value is used to identify applet objects in scripts, among other things. The value for NAME must be unique for all applets on a single page. In the example above, the Chart object name is TemperatureSet. Two other charts, named HumiditySet and BaroSet are created in the application.
<APPLET
.
.
.>
<PARAM NAME="backgroundImageName" VALUE="temperature_bg.gif">
<PARAM NAME="Rendering" VALUE="2D">
<PARAM NAME=CABINETS VALUE="cabs/devpack_scripthelper_app.cab, cabs/devpack_chart_app.cab, cabs/devpack_filereader_app.cab" >
<PARAM NAME="SeriesBackgroundColors" VALUE="red">
<PARAM NAME="SeriesMixedType" VALUE="bar">
<PARAM NAME="ShowLegend" VALUE="false">
<PARAM NAME="ShowTitle" VALUE="false">
<PARAM NAME="ShowXAxisTitle" VALUE="false">
<PARAM NAME="ShowYAxisMinorTicks" VALUE="false">
<PARAM NAME="XAxisLabelFontColor" VALUE="white">
<PARAM NAME="YAxisScaleMajor" VALUE="20">
<PARAM NAME="ShowXAxisLabels" VALUE="FALSE">
</APPLET>
fileDataItemName specifies the name of an InfoBus data item whose value is the name of a dataset file to read. outputName specifies the name with which the parsed data is published. The output file name is the same as the Chart object name. This establishes a relationship between the two.
The diagram below shows the relationship among the ScriptHelper, FileReader and Chart objects. It uses the FileReader and Chart objects concerned with temperature data.
The code below implements the process illustrated in the diagram. A FileReader object named _tempSrc is created and configured. Notice that the output file is called TemperatureSet, which is the name given to the Chart object shown above.
<APPLET
CODE="lotus.filereader.FileReader"
ARCHIVE="jars/devpack_chart_app.jar"
CODEBASE="../.."
NAME="_tempSrc"
WIDTH=1 HEIGHT=1>
<PARAM NAME=CABINETS VALUE="cabs/devpack_scripthelper_app.cab, cabs/devpack_chart_app.cab, cabs/devpack_filereader_app.cab" >
<PARAM NAME=fileDataItemName VALUE="TemFileItem" >
<PARAM NAME=outputName VALUE="TemperatureSet" >
</APPLET>
The FileReader object (_tempSrc) that is configured to read temperature data looks for the data item named "TemFileItem" on the InfoBus. When this item becomes available, _tempSrc gets the value of that item and reads the file identified by the value (newyork.tem) from the server.
Once the file is successfully read, the data is published using the name specified by outputName, in this case "TemperatureSet". This corresponds to the name of the Chart, which by default reads a data item with the same name as itself.
<APPLET
CODE="lotus.scripthelper.ScriptHelper"
CODEBASE="../.."
ARCHIVE="jars/devpack_scripthelper_app.jar"
NAME="_ibBridge" WIDTH=1 HEIGHT=1>
</APPLET>
A function called doClick() is defined in the HTML file. This function, written in JavaScript, is executed when the user clicks a button to select a city. doClick() takes two arguments: (1) the base name for the dataset files to be published to the InfoBus and (2) the name of the selected city, which is displayed in the HTML page banner.
doClick() appends .TEM, .HUM, and .BAR extensions to the base file name to construct three file names. It makes three calls to a ScriptHelper method called publishStringToInfoBus().
publishStringToInfoBus() takes two arguments: a data item name, specified in the FileReader PARAM tag called fileDataItemName and a dataset file name. Because the output file name associated with the data item name is the same as a Chart object, the InfoBus knows to advise the Chart object of the data availability. The Chart object reads the data and plots it.
The following JavaScript code sample shows the definition of the doClick() function:
<SCRIPT LANGUAGE="JavaScript">
function doClick(s, n)
{
var filename;
if (s == null) return;
filename = s + ".TEM";
document._ibBridge.publishStringToInfoBus( "TemFileItem", filename );
filename = s + ".HUM";
document._ibBridge.publishStringToInfoBus( "HumFileItem", filename );
filename = s + ".BAR";
document._ibBridge.publishStringToInfoBus( "BaroFileItem", filename );
if (n == null) return;
// IE 4 and 3 handle object model differently
var vers = navigator.appVersion;
if (vers.substring(0,1) == "4") // IE 4.0
document._banner.setText( n );
else
document._theForm._banner.setText( n ); // IE 3
}
</SCRIPT>
Following is a sample call to doClick():
<A HREF="Javascript:doClick('newyork', 'New York');">
This HTML code is executed when the user clicks a button to select the city of New York. It does the following steps:
ReadWeather contains three static methods: parseArgs(), updateDataset(), and main(), which are described in the following paragraphs. It also depends on three Java classes to read the weather data from the Intellicast Web site. The base class is GetWData. Two other classes, GetWDataDirect and GetWDataProxy, extend the base class.
parseArgs() parses the ReadWeather command you issue from your JVM. It stores the name of the configuration file you specify and the proxy and time zone information, if you specified this optional information.
updateDataset() updates three dataset files for each city listed in the configuration file wchart.dat. For each dataset file, updateDataset() executes the following sequence of tasks:
parseStream() executes the following sequence of tasks:
The line in the configuration file may be:
New York |newyork |http://nextgenserver.lotus.com/samples/weatherchart/curcond.lga
Observations for 2pm(18z) 1-sep-97
81;69;ne 6;5;m cldy, haze;30.16
trimInt() trims the string passed to it so the string contains only an integer value. This method is used to trim the temperature value, if needed.
trimFloat() trims the string passed to it so the string contains only a floating point value. This method is used to trim the humidity and pressure values, if needed.
GetWDataDirect and GetWDataProxy extender classes
GetWDataDirect and GetWDataProxy extend GetWData. These class extensions connect to the URL specified in the configuration file. If the ReadWeather command includes a proxy server specification, GetWDataProxy is used to connect to the URL. Otherwise, GetWDataDirect is used.
Installing and running the WeatherChart application
Before installing the WeatherChart application, review the DevPack installation guide. You can open and view the WeatherChart Web page from its installation directory.
To install WeatherChart on a Web server:
See the instructions below.
This service is needed to run the atstart.cmd file in the next step.
Atstart issues the necessary AT commands to run the ReadWeather program once each hour.
To set the system environment variables for the sample applications:
File type | File name | Description |
ReadWeather source files |
GetWData.java GetWDataDirect.java GetWDataProxy.java ReadWeather.java |
Reads data from the current condition files. Extends GetWData class. Extends GetWData class. Builds and updates the dataset files. |
Text banner applet source file | Banner.java | Implements the banner for the HTML page |
Compiled class files |
GetWData.class GetWDataDirect.class GetWDataProxy.class ReadWeather.class Banner.class |
See source file descriptions above. |
Command files |
ATSTART.CMD doMakeDat.cmd doReadInit.cmd doReadW.cmd |
See source file descriptions above. |
WeatherChart HTML page files |
WeatherChart.html newyork.gif detroit.gif chicago.gif batonrouge.gif losangeles.gif chattanooga.gif |
The application page. The buttons used to select a city. |
Sample dataset files |
newyork.BAR/.HUM/.TEM detroit.BAR/.HUM/.TEM chicago.BAR/.HUM/.TEM batonrouge.BAR/.HUM/.TEM losangeles.BAR/.HUM/.TEM chattanooga.BAR/.HUM/.TEM |
The pressure, humidity, and temperature data for each city. |