Developing a Chart in HTML

USING AN EDITOR OR APPLET

See TDGChartApplet.HTML for an example of using the charting applet. See TDGChartEditorApplet.HTML for an example of using the editor.

YOUR FIRST CHART

At a minimum, your HTML file must use the applet instruction (s) to identify the Perspective for Java .CLASS file and .JAR file that will be used to develop your chart. Examples:

<applet code="TDGChartEditorApplet.class" width="640" height="480" archive="JavaCHARTg.jar">
<param name="TDGSCRIPT"...>

or

<APPLET CODE="TDGChartApplet.class" ARCHIVE="javaCHART_DEMO.jar" WIDTH=400 HEIGHT=280>

or

<param name="TDGSCRIPT"...>

or

<applet code="TDGChartApplet.class" archive="javaCHARTg.jar" width="446" height="254">
<param name="TDGSCRIPT"...>

Use the UseSampleData (true) property to display a simple bar chart using the sample data provided with Perspective for Java. The following example .HTML file displays a chart using this property:

<html>
<head>
<title>TDGChartApplet Demonstration #1</title>
</head>
<body>
<h2 align="center">This Simple Bar Chart was created entirely from HTML using Three |D| Graphics Sample Data:</h2>
<p align="center">
<applet code="TDGChartEditorApplet.class" width="640" height="480" archive="JavaCHARTg.jar">
<param name="TDGSCRIPT" value="setUseSampleData (true);">
</applet>
</p>
<p align="center">To see how this chart is put together, take a look at the source. Use 
your browser's View menu to select &quot; Page Source&quot; or &quot;View Source&quot;.</p>
</body>
</html>

HTML PARAMETERS

Perspective for Java supports an HTML parameter (TDGSCRIPT) which allows any number of methods to be posted to the TDGChartApplet from HTML. HTML files may use any of the Properties listed in Chapter 7 by using a "set" or "get" prefix in front of the property name. In addition to the Methods listed in Chapter 8, these three methods ONLY work from within HTML (since they are not "true" Java methods):

In addition to the setDataSeries(), setSeriesLabelArray(), setGroupLabelArray() methods, see Chapter 6 for additional information about including your data in a chart.

setDataSeries()

This method can be used to assign a list of numbers to one or more series in a chart.

SYNTAX:

setDataSeries (Value_1, Value_2, Value_3, ... Value_x);

Value_1,...Value_x: A list of values to be assign to sequential series in a chart

EXAMPLE:

<html>
<head>
<title>TDGChartApplet Demonstration #1</title>
</head>
<body>
<h2 align="center">This BiPolar Bar Chart is created entirely from HTML:</h2>
<p align="center">
<applet code="TDGChartEditorApplet.class" width="640" height="480" archive="JavaCHARTg.jar">
<param name="TDGSCRIPT" value="setTitleString ("Sample Chart from HTML");,
     setGraphType (21);
     setSeriesLabelArray ("Retail","Dealer","Seats");,
     setDataSeries (45319.00,5610.00,51065.00,6478.00,64732.00); /* Retail Cost */,
     setDataSeries (37853.00,4631.00,41235.00,5512.00,54563.00); /* Dealer Cost */,
     setDataSeries (15.00,5.00,10.00,8.00,34.00); /* Seats */,
     setY1AxisSide (1);
     setGroupLabelArray ("England","France","Italy","Japan","Germany");,
     setX1TitleString ("Country");,
     setAxisAssignment (0,0);/* Retail Cost on Y1 */,
     setAxisAssignment (1,0);/* Dealer Cost on Y1 */,
     setAxisAssignment (2,1);/* Seats on Y2*/,
     /* Placeholder */,
     setURL (0,0, "series0.html");,
     setURL (0,1, "series1.html");,
     setURL (0,2, "series2.html");,
     setURL (1,0, "series3.html");">
</applet>
</p>
<p align="center">To see how this chart is put together, use your browser's View menu to 
select &quot;Page Source&quot; or &quot;View Source&quot;</p>
</body>
</html>

setGroupLabelArray()

This method can be used to assign a series of labels to one or more sequential groups in a chart.

SYNTAX:

setGroupLabelArray ("Label_1", "Label_2", "Label_3"...);

Label_1, Label_2, Label_3,...: A list of labels to be assigned to sequential groups in a chart

EXAMPLE:

<html>
<head>
<title>TDGChartAppletDemonstration #1</title>
</head>
<body>
<h2 align="center">This BiPolar Bar Chart is created entirely from HTML:</h2>
<p align="center">
<applet code="TDGChartEditorApplet.class" width="640" height="480" archive="JavaCHARTg.jar">
<param name="TDGSCRIPT" value="setTitleString ("Sample Chart from HTML"); /* Set the Title String */,
/* Set the graph type to BiPolar Bars */,
     setGraphType (21);,
     setSeriesLabelArray ("Retail","Dealer","Seats");
     setDataSeries (45319.00,5610.00,51065.00,6478.00,64732.00); /* Retail Cost */
     setDataSeries (37853.00,4631.00,41235.00,5512.00,54563.00); /* Dealer Cost */
     setDataSeries (15.00,5.00,10.00,8.00,34.00); /* Seats */
     setY1AxisSide (1);
     setGroupLabelArray ("England","France","Italy","Japan","Germany");
     setX1TitleString ("Country");
     setAxisAssignment (0,0);/* Retail Cost on Y1 */
     setAxisAssignment (1,0);/* Dealer Cost on Y1 */
     setAxisAssignment (2,1);/* Seats on Y2*/
     /* Placeholder */
     setURL (0,0, "series0.html");
     setURL (0,1, "series1.html");
     setURL (0,2, "series2.html");
     setURL (1,0, "series3.html");"></applet></p>
<p align="center"><br>
To see how this chart is put together, use your browser's View menu to select
"Page Source" or "View Source"</p>
</body>
</html>

setSeriesLabelArray()

This method can be used to assign a series of labels to one or more sequential series in a chart.

SYNTAX:

setSeriesLabelArray ("Label_1", "Label_2", "Label_3"...);

Label_1, Label_2, Label_3,...: A list of labels to be assigned to sequential series in a chart

EXAMPLE:

<html>
<head>
<title>TDGChartApplet Demonstration #1</title>
</head>
<body>
<h2 align="center">This BiPolar Bar Chart is created entirely from HTML:</h2>
<p align="center">
<applet code="TDGChartEditorApplet.class" width="640" height="480" archive="JavaCHARTg.jar">
<param name="TDGSCRIPT" value="setTitleString ("Sample Chart from HTML");
/* Set the graph type to BiPolar Bars */
     setGraphType (21);
     setSeriesLabelArray ("Retail","Dealer","Seats");
     setDataSeries (45319.00,5610.00,51065.00,6478.00,64732.00); /* Retail Cost */
     setDataSeries (37853.00,4631.00,41235.00,5512.00,54563.00); /* Dealer Cost */
     setDataSeries (15.00,5.00,10.00,8.00,34.00); /* Seats */
     setY1AxisSide (1);
     setGroupLabelArray ("England","France","Italy","Japan","Germany");
     setX1TitleString ("Country");
     setAxisAssignment (0,0);/* Retail Cost on Y1 */
     setAxisAssignment (1,0);/* Dealer Cost on Y1 */
     setAxisAssignment (2,1);/* Seats on Y2*/
     setURL (0,0, "series0.html");
    setURL (0,1, "series1.html");
     setURL (0,2, "series2.html");
     setURL (1,0, "series3.html");">
</applet>
</p>
<p align="center">To see how this chart is put together, take a look at the source. 
Use your browser's View menu to select &quot;Page Source&quot; or &quot;View 
Source&quot;</p>
</body>
</html>