Chapter 4.
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"

 

You may use the UseSampleData 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"><br>
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 described in Chapter 7 by using a "set" or "get" prefix in front of the property name. In addition to the Methods described in Chapter 8, these three methods ONLY work from within HTML (since they are not "true" Java methods):

 

setDataSeries (list of numbers for series, separated by commas);

 

setGroupLabelArray (list of strings for series labels, separated by commas);

 

setSeriesLabelArray (list of strings for series labels, separated by commas);

 

These methods are described in the following paragraphs:

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(
&quot;Sample Chart from HTML&quot;);
setGraphType(21);
setSeriesLabelArray(&quot;Retail&quot;,&quot;Dealer&quot;,
&quot;Seats&quot;);
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(&quot;England&quot;,
&quot;France&quot;, &quot;Italy&quot;,
&quot;Japan&quot;, &quot;Germany&quot;);
setX1TitleString(&quot;Country&quot;);
setAxisAssignment(0,0);/* Retail Cost on Y1 */
setAxisAssignment(1,0);/* Dealer Cost on Y1 */
setAxisAssignment(2,1);/* Seats on Y2*/
/* Placeholder */
setURL(0,0, &quot;series0.html&quot;);
setURL(0,1, &quot;series1.html&quot;);
setURL(0,2, &quot;series2.html&quot;);
setURL(1,0, &quot;series3.html&quot;);
"></applet></p><p align="center"><br>
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 (
    &quot;Label_1&quot;,
    &quot;Label_2&quot;,
    &quot;Label_3&quot;...
);

 

Label_1, Label_2, Label_3,...: A list of labels to be assigned to sequential groups 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(&quot;Sample Chart
from HTML&quot;);/* Set the Title String */
/* Set the graph type to BiPolar Bars */
setGraphType(21);
setSeriesLabelArray(&quot;Retail&quot;,
&quot;Dealer&quot;, &quot;Seats&quot;);
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(&quot;England&quot;,
&quot;France&quot;, &quot;Italy&quot;,
&quot;Japan&quot;, &quot;Germany&quot;);
setX1TitleString(&quot;Country&quot;);
setAxisAssignment(0,0);/* Retail Cost on Y1 */
setAxisAssignment(1,0);/* Dealer Cost on Y1 */
setAxisAssignment(2,1);/* Seats on Y2*/
/* Placeholder */
setURL(0,0, &quot;series0.html&quot;);
setURL(0,1, &quot;series1.html&quot;);
setURL(0,2, &quot;series2.html&quot;);
setURL(1,0, &quot;series3.html&quot;);
"></applet></p>
<p align="center"><br>
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>

setSeriesLabelArray()

 

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

Syntax:

setSeriesLabelArray (
    &quot;Label_1&quot;,
    &quot;Label_2&quot;,
    &quot;Label_3&quot;...
);

 

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(
&quot;Sample Chart from HTML&quot;);
/* Set the graph type to BiPolar Bars */
setGraphType(21);
setSeriesLabelArray(&quot;Retail&quot;,
&quot;Dealer&quot;, &quot;Seats&quot;);
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(&quot;England&quot;,
&quot;France&quot;, &quot;Italy&quot;,
&quot;Japan&quot;, &quot;Germany&quot;);
setX1TitleString(&quot;Country&quot;);
setAxisAssignment(0,0);/* Retail Cost on Y1 */
setAxisAssignment(1,0);/* Dealer Cost on Y1 */
setAxisAssignment(2,1);/* Seats on Y2*/
setURL(0,0, &quot;series0.html&quot;);
setURL(0,1, &quot;series1.html&quot;);
setURL(0,2, &quot;series2.html&quot;);
setURL(1,0, &quot;series3.html&quot;);
"></applet></p><p align="center"><br>
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>

ABOUT DATA

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

FREQUENTLY ASKED QUESTIONS

How to Resize the Chart Frame?

 

The chart frame needs to be resized with the given object. The object can be obtained with the getFrame() method. The following example shows now to resize the chart frame:

 

setRect(getFrame(),new Rectangle(-10391,-7422,20800,17600));

 

Note that the setBounds() method only works if you are using pure Java with a compiler and are placing the chart inside another element (like a window or a frame). From HTML, it would not have any affect at all. See Chapter 3 for details on the coordinate system that Perspective uses. Chapter 3 also includes examples of other rectangles that can be set.

How to Size and Position the Legend Area?

 

Here is an example of setting the legend size and position:

 

setRect(getLegendArea(),
    new Rectangle(-14180,-13600,25072,2063));

 

Note that the setBounds() method only works if you are using pure Java with a compiler and are placing the chart inside another element (like a window or a frame). From HTML, it would not have any affect at all. See Chapter 3 for details on the coordinate system that Perspective uses. Chapter 3 also includes examples of other rectangles that can be set.

How to Set Font Size and Names?

 

Here are some examples of setting font size and name:

 

setFontSizeVC(getDataText(),1000);
setFontSizeVC(getFootnote(),1100);
setFontSizeVC(getLegendText(),1100);
setFontSizeVC(getO1Label(),1100);

 

For each of these, however, you must turn the autofit parameter OFF, by inserting the appropriate autofit command before the size command, like this:

 

setAutofit(getDataText(),false);
setAutofit(getFootnote(),false);
setAutofit(getLegendText(),false);
setAutofit(getO1Label(),false);

 

The following examples show how to set the font name:

 

setFontName(getDataText(),"Helvetica");
setFontName(getFootnote(),"Helvetica");
setFontName(getLegendText(),"Helvetica");
setFontName(getO1Label(),"Helvetica");

How to Get Example HTML Code?

 

If you want examples of HTML, there is a very easy way! Run the TDGChartEditorApplet, move the chart around, etc. and then select "Save" from the menu item. The file that is saved is a text file; you can cut and paste anything from it into HTML (or, for that matter, into Java code).