The Chart Settings Template Builder
This document describes the Chart Settings Template Builder available for the Design Partners Program. The document is divided into the following sections:

Introduction

The ChartSettings Template Builder makes use of the eSuite applets to create a chart utility. This application allows the user to manipulate some selected parameters in a graph while observing the effects of these changes in real-time. The application does not allow for direct changes to the data; only to the selected parameters. This Template may be used as a starting point for customized templates which will be better suited to the end users needs.

The ChartSettings application displays a chart constructed from some pre-loaded data avaiable on a data file. A side bar on the left serves as the interface by which to manipulate the selected parameters of the chart by means of buttons and dialob boxes. The user enters the information or selects an option on the side bar which then gets incorporated onto the graph on the right side.

The Template Pieces

The following applets and additional functional pieces make up the Chart Settings Template Builder.


Coding the Chart Settings Template Builder

Use the following procedure to code the Chart Settings Template Builder:
  1. Configure the basic HTML page
  2. Introduce the framesets
    The Chart Template builder has two frames. The leftmost frame holds the buttons and text spaces used to introduce changes into the chart. The source for this frame is the scripts.html document which holds the html tags for the buttons and the Javascript functions. The rightmost frame holds the chart that is generated from the dataset for this application. It consists of an imbedded chart applet. The html document which embedds the applet is applets.html.
  3. Coding applets.html frame.
  4. Creating the DataSet File
    This is the file that holds the information to be charted. To display the information on the eSuite Chart Applet the data needs to be organized as a dataset file. A data set is constructed of rows of data. The data can consist of one (or more) numerical series, as well as chart titles, legends, and other chart labeling information. The data set file is parsed by the File Reader when the dataset file is specified as a parameter in the File Reader APPLET tag. The data set File used in the Chart Settings Application follows:

    "Positive numbers"
    "" "Col 1" "Col 2" "Col 3" "Col 4" "Col 5"
    Row 1 1. 5. 9. 13. 17.
    Row 2 2. 6. 10. 14. 18.
    Row 3 3. 7. 11. 15. 19.
    Row 4 4. 8. 12. 16. 20.

  5. Coding the scripts.html file
    The scripts.html file has two main functions:
    1. To create the buttons and dialog boxes necessary to affect the chart.
    2. To house the Javascript functions which are called upon button click.
    The chart applet is defined in the Javascript file as myChart. You will notice that when instantiated it is set as follows:
    myChart = parent.frames[1].document.ChartSet.getChart()
    "parent" refers to the top HTML page. In the ChartSettings application the parent page has two frames. The second frame is the one that holds the Chart Applet which has been named "ChartSet". We call the second frame as frames[1] since frame numbering is zero based. Remember that frames[0] holds the interface for the buttons and dialog boxes. Whenever we want to change an aspect of the chart by way of the function named Action() we call parent.frames[1].document.ChartSet.Action()
For more information on how to complete any of the above steps please refer to Embedding and Configuring Applications

Installing and Running the Chart Settings Application

Use the following procedure to install and run this application in your browser
  1. Verify that the client you are using has JDK 1.1 support. If not, download Microsoft JDK v2.0 beta 2 install program ActInstall.exe from http://www.microsoft.com/.
  2. Make sure the entire DPP release as well as JDK 1.1 is installed on your workstation in your selected directory.
  3. Add the directory in which you have installed the release to your CLASSPATH
  4. Go to the directory webpack\templatebuilder located in the install directory and open the ChartSettings.html file.
For more information on template builders and installation guidelines see the Templates page.