1. Loading Data
All data has to be loaded using the applet parameters. The applet can not
connect to an external data source and read the data from this.
1.1 Sample values
Use the sampleValues parameter to load data into the applet.
The applet code below creates a line chart and loads the
values 20,10,40,30, and 50. The sample count of the chart
will equal the number of values in the sampleValues parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
</applet>
1.2 Sample count
You can set the sample count explisitly by using the sampleCount parameter.
The chart below sets the sample count to 10, but only sets the 5 first samples.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleCount value="10">
<param name=sampleValues value="20,10,40,30,50">
</applet>
1.3 Empty values
You can have empty values by using an undefined number (any sign that's not a
valid number).
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50,x,x,80,100,90">
</applet>
1.4 Multiple data series
A chart can have multiple data series. Use the seriesCount parameter to
control the number of data series, and the sampleValues_N parameter to set
the values per data series.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value=2>
<param name=sampleValues_0 value="72,87,65,78,65">
<param name=sampleValues_1 value="79,67,54,65,43">
</applet>
1.5 Dynamically loading data
Since the applet can not connect directly to a data source, any data that
has to be loaded dynamically has to be generated on the server side.
Use a scripting language on the web server (such as ASP) to read the data
from a data base (or any other data source) and construct the applet
code using the values read. Then the web page is sent to the client
with the dynamically data ready to load into the applet.
<%
'## this function prints out the count for each department separated by comma
function PrintDepartmentCount(ByRef employeeRS)
While Not employeeRS.EOF
Response.Write employeeRS("DepartmentCount") & ","
employeeRS.MoveNext
Wend
end function
'## open data connection
set DbConn=server.createobject("adodb.connection")
cnpath="DBQ=" & server.mappath("employees.mdb")
'Response.Write cnpath
DbConn.Open "DRIVER={Microsoft Access Driver (*.mdb)}; " & cnpath
'## Let's say we have one table with employees. One of the columns
'## is the department name, and the table name is employee
'## The following lines gets the number of employees for each department
Sql = "SELECT COUNT(*) AS DepartmentCount, Department
FROM Employee GROUP BY Department ORDER BY Department"
Set employeeRS = DbConn.Execute(Sql)
%>
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=640 height=200>
<param name=sampleValues value="<%call PrintDepartmentCount(employeeRS)%>">
</applet>
See here for full ASP example.
1.6 Loading data from a url
If you want to load the applet or servlet data and parameters from a url,
you need specify the url in the data parameter in your applet or servlet tag
as below
Applet:
<applet code=com.objectplanet.chart.LineChartApplet
archive=Chart.jar width=200 height=140>
<param name=data value="parameters.data">
</applet>
You can also configure the applet to load data from the currently specified
data URL at a specific interval.
<applet code=com.objectplanet.chart.LineChartApplet
archive=Chart.jar width=200 height=140>
<param name=data value="parameters.data">
<param name=dataInterval value="10">
</applet>
The above applet will reload the parameters.data file at 10 second intervals.
If you specify a new data parameter in the parameters.data file, this file
will be loaded instead on the next interval.
<param name=dataInterval value="10,reset">
This will make the applet reset all it's data before the new data is loaded.
Servlet:
<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=line&
width=200&
height=140&
data=http://somehost/parameters.data">
Only an applet or servlet can load the data from a URL.
The parameters.data file looks like this:
seriesCount=3
sampleValues_0=47,38,46,37,45
sampleValues_1=33,76,57,85,64
sampleValues_2=23,36,17,18,3
sampleColors=yellow, orange, red
The data url can point to a script that produces the data as long as the
format returned is as in the example above.
If you need to pass parameters to the script when using servlets, & for
parameter separation and = for parameter value assignment can not be
used. Instead you need to use ¤ as the parameter separator and * for
the equals sign.
<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=bar&
width=200&
height=140&
data=http://somehost/somescript.xyz?myparam*value¤anotherparam*anothervalue&
background=white">
2. Setting the Range
2.1 Automatic range setting
The range is set automatically according to the largest and smallest value of
the chart. If the chart contains only positive values, the lower range will be
set to 0. If the chart contains only positive values, the upper range will be
set to 0.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="23,12,45,34,56">
</applet>
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="12,-23,-34,45,56">
</applet>
2.2 Setting explisit range
You can control the range explisitly by setting the range and lowerRange
parameters.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="60,50,80,70,90">
<param name=range value=100>
<param name=lowerRange value=40>
</applet>
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="12,-23,-34,45,56">
<param name=range value=60>
<param name=lowerRange value=-40>
</applet>
2.3 Using range step
If you set the rangeStep parameter, the upper range will be set to the next
value larger than the maximum value that is divisible by the range step given.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="12,-23,-34,45,56">
<param name=rangeStep value=10>
</applet>
2.4 Range position and color
Set the range position using the rangePosition parameter. The positions are
left or right.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangePosition value=right>
</applet>
Set the color of the range labels and ticks using the rangeColor parameter.
The color values can be the color name or the
html hex code color number.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeColor value=red>
</applet>
2.5 Range value labels
You can set the font used for the range value labels, set the number of
decimals to be displayed, set a prefix or postfix, or turn them off.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="0.2,0.1,0.4,0.3,0.5">
<param name=rangeLabelPrefix value="$">
<param name=rangeLabelPostfix value="us">
<param name=rangeDecimalCount value=1>
</applet>
Set the font used for the range value labels using the rangeLabelFont parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeLabelFont value="Arial, bold, 14">
</applet>
The first argument to the rangeLabelFont is the font name, the second is plain,
bold, italic, or bolditalic. The last argument is the point size of the font.
You can turn off the range label values using the rangeLabelsOff parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeLabelsOff value="true">
</applet>
2.6 Range axis label
You can add a label to the range axis by using the rangeAxisLabel parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeAxisLabel value="range axis">
</applet>
Set the clockwise angle and the font of the label using the
rangeAxisLabelAngle and rangeAxisLabelFont parameters.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeAxisLabel value="range axis">
<param name=rangeAxisLabelAngle value="270">
<param name=rangeAxisLabelFont value="Arial, bold, 12">
</applet>
2.7 Range adjuster
You can control the upper and lower ranges at runtime using the range adjuster.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeAdjusterOn value="true">
</applet>
Control the range adjuster position using the rangeAdjusterPosition parameter.
The different positions are left or right.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeAdjusterOn value="true">
<param name=rangeAdjusterPosition value="left">
</applet>
2.8 Double range axis
You can have two range axis by using the rangeOn_2 parameter. Associate a
data series with a range axis using the seriesRange_N parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="3,6,8,3,2">
<param name=seriesRange_1 value="2">
<param name=rangeOn_2 value="true">
</applet>
The rangeOn_2 parameter turns the second range on (default position for
the second range is to the right). The seriesRange_1 parameter says that
data series 1 (starts on 0) will be associated with range number 2
(ranges are numbered 1 and 2).
second range parameters |
|
range_2 | sets the second range's upper value |
lowerRange_2 | sets the second range's lower value |
rangeStep_2 | sets the range step for the second range |
rangePosition_2 | sets the range position for the second range |
rangeColor_2 | sets the color of the second range's ticks and value labels |
rangeLabelPrefix_2 | sets the prefix for the range labels on the second range axis |
rangeLabelPostfix_2 | sets the postfix for the range labels on the second range axis |
rangeLabelsOff_2 | turns off the range labels for the second range axis |
rangeAxisLabel_2 | sets the second range axis label |
rangeAxisLabelAngle_2 | sets the angle of the second range axis label |
rangeDecimalCount_2 | sets the decimal count used for the second range axis |
rangeAdjusterOn_2 | turns on the second range adjuster |
rangeAdjusterPosition_2 | sets the position of the second range adjuster |
2.9 Double range adjusters
You can control which range axis a range adjuster should adjust. One range
adjuster can also adjust both ranges.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="3,6,8,3,2">
<param name=seriesRange_1 value="2">
<param name=rangeOn_2 value="true">
<param name=rangeAdjusterOn value="true">
<param name=rangeAdjusterPosition value="true">
<param name=rangeAdjusterOn_2 value="true">
<param name=rangeAdjusted_1 value="both">
<param name=rangeAdjusted_2 value="2">
</applet>
The parameter rangeAdjusted_1 controls which range(s) will be adjusted using
adjuster number 1. In this case, it will control both ranges. The parameter
rangeAdjusted_2 controls the second adjuster, which controls range 2 in this
case (default).
3. Labels and Fonts
3.1 Chart title
The chartTitle parameter adds a label at the top center of the chart.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=chartTitle value="chart title">
</applet>
You can have multiline labels by using a \n (goes for all chart labels).
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=chartTitle value="chart\ntitle">
</applet>
The titleFont parameter sets the font used for the title.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=chartTitle value="chart title">
<param name=titleFont value="Courier, bold, 20">
</applet>
3.2 Sample labels
You can add a label to each sample point on the x-axis by using the
sampleLabels parameter. Use sampleLabelsOn to turn them on.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value="true">
</applet>
Use the sampleLabelFont parameter to control the font used for the sample labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=sampleLabelFont value="Arial, plain, 9">
</applet>
Use the sampleLabelStyle parameter to display floating sample labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=sampleLabelStyle value="floating">
<param name=floatingLabelFont value="Arial, bold, 14">
</applet>
Use the sampleLabelStyle parameter to display sample labels near the sample points.
Labels are automatically combined with value labels when using valueLabelsOn.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=sampleLabelStyle value="outside">
<param name=valueLabelsOn value=true>
</applet>
The sampleLabelAngle parameter controls the clockwise angle
of the sample labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=sampleLabelAngle value="270">
</applet>
You can set the color of the sample labels using the sampleLabelColors parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=sampleLabelColors value="black, black, red, black, black">
</applet>
If you have too many labels close to each other, they overwrite and clutter
up. Turn on the autoLabelSpacingOn parameter to paint only the sample
labels there are space for.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="58,76,54,56,56,98,76,54,56,89">
<param name=sampleLabels value="one,two,three,four,five,six,seven,eight,nine,ten">
<param name=sampleLabelsOn value=true>
<param name=autoLabelSpacingOn value=true>
<param name=sampleScrollerOn value=true>
</applet>
The default label field delimiter used is comma (,). If you want commas
in your labels, you need to set a different label field delimiter.
The label delimiter has effect on the sample labels, series labels,
legend labels, and target value line labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=labelDelimiter value=":">
<param name=sampleLabels value="jan, 2001:feb, 2001:mar, 2001:apr, 2001:may, 2001">
<param name=sampleLabelsOn value=true>
<param name=sampleLabelAngle value=270>
</applet>
3.3 Series labels
When using multiple data series you set a label for each data series
using the seriesLabels parameter. The legend will display the series
labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=sampleLabels value="one,two,three,four,five">
<param name=seriesLabels value="Data A,Data B">
<param name=sampleLabelsOn value=true>
<param name=legendOn value=true>
</applet>
Use the seriesLabelColors to set the colors of the series labels in the legend.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=sampleLabels value="one,two,three,four,five">
<param name=seriesLabels value="Data A,Data B">
<param name=sampleLabelsOn value=true>
<param name=legendOn value=true>
<param name=seriesLabelColors value="red, blue">
</applet>
Use the seriesLabelOn to turn on series floating labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=seriesLabels value="Data A,Data B">
<param name=seriesLabelsOn value=true>
</applet>
Use the seriesLabelStyle to show the series labels near the sample points on the grid.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="15,10,20,25,50">
<param name=sampleValues_1 value="25,40,40,60,30">
<param name=sampleLabels value="one,two,three,four,five">
<param name=sampleLabelsOn value=true>
<param name=seriesLabels value="data a,data b">
<param name=seriesLabelsOn value=true>
<param name=seriesLabelStyle value="outside">
<param name=seriesLabelColors value="red, blue">
</applet>
3.4 Legend labels
The legend is turned on using the legendOn parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=seriesLabels value="Data A,Data B">
<param name=legendOn value=true>
</applet>
The legend position is controlled using the legendPosition parameter.
The position can be right (default), left, top, or bottom.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=seriesLabels value="Data A,Data B">
<param name=legendOn value=true>
<param name=legendPosition value=left>
</applet>
Control the font used for the legend labels using the legendLabels parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=seriesLabels value="Data A,Data B">
<param name=legendOn value=true>
<param name=legendFont value="Arial, bold, 14">
</applet>
The color of the legend boxes are the same as the sample colors.
Use the legendColors parameter to explisitly set the legend colors.
<applet code=com.objectplanet.chart.LineChartApplet
width=200 height=140>
<param name=seriesCount value=3>
<param name=sampleValues_0 value="50,40,30,20,10,0">
<param name=sampleValues_1 value=" , , , , ,0,-20,-40,-30,-20,-10,0">
<param name=sampleValues_2 value=" , , , , , , , , , , ,0,15,25,30">
<param name=sampleColors value="blue, red, blue">
<param name=legendLabels value="good,bad">
<param name=legendOn value=true>
<param name=legendColors value="blue,red">
</applet>
Any legend box may be replaced by an image.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="20,10,40,30,50">
<param name=sampleValues_1 value="20,40,30,60,40">
<param name=seriesLabels value="Data A,Data B">
<param name=sampleHighlightOn value=true>
<param name=legendOn value=true>
<param name=legendImage_0 value="images/blue-ball.gif">
<param name=legendImage_1 value="images/magenta-small.gif">
</applet>
3.5 Sample axis label
Add a label to the sample axis using the sampleAxisLabel parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleAxisLabel value="sample axis">
</applet>
Use the sampleAxisLabelFont parameter to set the font used.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleAxisLabel value="sample axis">
<param name=sampleAxisLabelFont value="Courier, plain, 16">
</applet>
3.6 Value labels
Turn on the value labels using the valueLabelsOn parameter. Use
the valueLabelsOn_N parameter option to turn on or off the value
labels for each data series.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLabelsOn value="true">
</applet>
Set the angle of the value labels with the valueLabelAngle parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="200,100,400,300,500">
<param name=valueLabelsOn value="true">
<param name=valueLabelAngle value="270">
</applet>
Use the valueLabelsFont parameter to control the fonts.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLabelsOn value="true">
<param name=valueLabelFont value="Arial, bold, 14">
</applet>
Use the valueLabelStyle to display floating value labels.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLabelsOn value="true">
<param name=valueLabelStyle value="floating">
<param name=floatingLabelFont value="Arial, bold, 14">
</applet>
Use the sampleDecimalCount parameter to control the number of
decimals used for the value labels. Use sampleDecimalCount_N to
control the number of decimals per data series.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="76.8, 76.5, 43.7, 87.8, 67.6">
<param name=valueLabelsOn value="true">
<param name=sampleDecimalCount value="1">
<param name=rangeStep value="100">
</applet>
You can add a prefix and postfix to the value labels using the
valueLabelPrefix and valueLabelPostfix parameters. To set a
pre- and postfix per data series, add a _N (where N is the series number)
to each parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLabelsOn value="true">
<param name=valueLabelPrefix value="$">
</applet>
4. Chart Colors
4.1 Sample colors
Use the sampleColors parameter to set the colors of the lines and
legend label boxes. You can either use the
color names or the hex value (e.i. #c0a0f0) for the colors.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleColors value="red">
</applet>
You can set the colors per data series.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value=3>
<param name=sampleValues_0 value="27,38,76,57,65">
<param name=sampleValues_1 value="23,76,87,65,34">
<param name=sampleValues_2 value="23,46,77,88,93">
<param name=sampleColors value="orange, red, magenta">
<param name=seriesLabels value="Data A,Data B,Data C">
<param name=legendOn value=true>
<param name=legendPosition value=bottom>
</applet>
4.2 Background color
Set the chart component background color using the background parameter.
This does not include the chart grid background color.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=background value="orange">
</applet>
4.3 Chart background color
Set the color of the chart grid background using the chartBackground parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=chartBackground value="orange">
</applet>
4.4 Foreground color
Set the chart component foreground color using the foreground parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=foreground value="blue">
<param name=chartTitle value="foreground color set">
</applet>
4.5 Chart foreground color
Set the foreground color of the chart grid elements.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=chartForeground value="white">
<param name=chartBackground value="black">
<param name=background value="black">
</applet>
5. Chart Style
Through the applet parameters you can control how the chart is displayed.
5.1 3D mode
Turn on 3D mode with the 3DModeOn parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=3DModeOn value="true">
</applet>
Control the depth of the chart using the 3DDepth parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=3DModeOn value="true">
<param name=3DDepth value="25">
</applet>
5.2 Sample scroller
If you have many samples you can use the sample scroller to display
a subset of the samples and scroll or zoom them.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="6,5,8, ... ,5,4,3">
<param name=sampleScrollerOn value="true">
</applet>
Using the visibleSample parameter you can control the initial sample
displayed when using the sample scroller.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="6,5,8, ... ,5,4,3">
<param name=sampleScrollerOn value="true">
<param name=visibleSamples value="0,10">
</applet>
The first field in the visibleSamples parameter is the starting sample.
The second field is the number of samples to be displayed initially.
5.3 Horizontal grid lines
You can turn on horizontal grid value lines using the valueLinesOn parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLinesOn value="true">
</applet>
You can set the color of the value lines using the valueLinesColor parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLinesOn value="true">
<param name=valueLinesColor value="white">
<param name=chartBackground value="lightGray">
<param name=background value="lightGray">
</applet>
The jumps in the value lines and range labels is controlled by the
space available for the value lines and range labels. You can not control
the jumps directly, but you can set the maximum number of lines you want
using the maxValueLineCount parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLinesOn value="true">
<param name=maxValueLineCount value="2">
</applet>
5.4 Default vertical grid lines
Set default vertical grid lines using the defaultGridLinesOn parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=defaultGridLinesOn value="true">
</applet>
You can also define the position of the first line and step between the lines.
Specifying color for the lines is also available.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=defaultGridLinesOn value="true,10,20">
<param name=defaultGridLinesColor value="green">
</applet>
5.5 Vertical grid lines
Set vertical grid lines using the gridLines parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=gridLines value="15,35,75">
</applet>
The position of each grid line is a value between 0 and 100 relative to the
width of the chart grid. However, you can change the sample axis range
to fit your application better.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,30,50,40,70,60,90,80,110,100,120">
<param name=sampleLabels value="j,f,m,a,m,j,j,a,s,o,n,d">
<param name=sampleLabelsOn value=true>
<param name=sampleAxisRange value="0,11">
<param name=gridLines value="2,3,4,7,8">
</applet>
You can set the color of each individual grid line.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=gridLines value="24.5,36.6,75">
<param name=gridLineColors value="red,green,blue">
</applet>
5.6 Stacked lines
When multiple data series are used the lines can appear stacked and filled.
Use the stackedOn parameter to turn on stacked lines.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="3">
<param name=sampleValues_0 value="68,75,36,12,23">
<param name=sampleValues_1 value="34,34,54,31,25">
<param name=sampleValues_2 value="21,34,45,66,67">
<param name=sampleColors value="yellow, orange, red">
<param name=stackedOn value="true">
</applet>
5.7 Line width
Set the pixel width of the lines using the lineWidth parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=lineWidth value="5">
</applet>
If the chart has multiple data series you can set the line width of each
data series by comma seperation.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="3">
<param name=sampleValues_0 value="68,75,46,12,23">
<param name=sampleValues_1 value="34,34,54,31,25">
<param name=sampleValues_2 value="21,34,45,66,67">
<param name=lineWidth value="2,5,10">
</applet>
5.8 Sample highlights
You can add circles, squares, and diamond shapes to the sample points on
the data series lines.
You can also add any shape you like by adding an image. See
here on how to do it.
Use the sampleHighlightOn parameter to turn on highlights.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleHighlightOn value="true">
</applet>
You can set the sample highlight on or off for individual data series
by using comma seperation.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="3">
<param name=sampleValues_0 value="68,75,46,12,23">
<param name=sampleValues_1 value="34,34,54,31,25">
<param name=sampleValues_2 value="21,34,45,66,67">
<param name=sampleHighlightOn value="true,true,false">
</applet>
The above applet code states that the first and second series should have
higlights, but the third should not. If the chart had six series, the 4th
and 5th series would also have highlights, while the 6th would not.
Use the sampleHighlightStyle to set the style. The style can be circle
(default), circle_filled, circle_opaque, square, square_filled, square_opaque,
diamond, diamond_filled, or diamond_opaque.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleHighlightOn value="true">
<param name=sampleHighlightStyle value="circle_filled">
</applet>
The sampleHighlightStyle can also use comma seperation to set the style
per data series.
Use the sampleHighlightSize to set the size for each highlight.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=sampleHighlightOn value="true">
<param name=sampleHighlightStyle value="circle_opaque">
<param name=sampleHighlightSize value="15">
</applet>
The sampleHighlightSize can also use comma seperation to set the style
per data series.
Using the valueLabelStyle you can place the value labels inside the
sample highlights.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="2,1,4,3,5">
<param name=sampleHighlightOn value="true">
<param name=sampleHighlightStyle value="circle_opaque">
<param name=sampleHighlightSize value="16">
<param name=valueLabelsOn value="true">
<param name=valueLabelStyle value="inside">
</applet>
Using the seriesLineOff parameter you can turn off the lines and display
the sample higlights only. This way you can create a chart with plots only.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="3">
<param name=sampleValues_0 value="68,75,46,12,23">
<param name=sampleValues_1 value="34,34,54,31,25">
<param name=sampleValues_2 value="21,34,45,66,67">
<param name=sampleHighlightOn value="true">
<param name=sampleHighlightStyle value="circle_filled, square_filled, diamond_filled>
<param name=sampleHighlightSize value="9,7,10>
<param name=seriesLineOff value="true">
</applet>
You can turn off individual data series by comma seperating the series
index in the seriesLineOff parameter.
5.9 Connect empty values
By default, if the chart has empty values in a data series, there will
be a gap in the line.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,x,30,50">
</applet>
By using the connectedLinesOn parameter you can connect lines across empty
values.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,x,30,50">
<param name=connectedLinesOn value="true">
</applet>
By comma seperating the data series index you can control each data
series individually.
<param name=connectedLinesOn value="1,3">
6. Miscellaneous
6.1 Target value lines
You can add a horizontal line at a specified value position in the chart grid.
The line can have any color and a label to the left of it. Use the
targetValueLine_N parameter to add target value lines.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=targetValueLine_0 value="Target A, 15, red">
<param name=targetValueLine_1 value="Target B, 40, blue">
<param name=targetValueLine_2 value="Target C, 25, gray, value">
</applet>
The first field in the target parameter is the label to be displayed. The
second field is the value where it should be painted. The third parameter
is the color (use the color name or a hex code)
of the line and label. The fourth and optional parameter states if only
the value should be displayed (value) or only the label (label). Both
the label and the value are displayed by default.
6.2 URLs and drilldown
You can add a URL or javascript call to any data series or sample point in the chart and
have the applet open a new web page when the user double-clicks the sample
point or legend entry.
Have the url point to a web page containing another chart to create
drilldown charts.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="10,20,30,40,50">
<param name=url_0 value="chart1.html">
<param name=url_1 value="chart2.html">
<param name=url_2 value="chart3.html">
<param name=url_3 value="chart4.html">
<param name=url_4 value="javascript:winOpen('line.html', 200,500);">
</applet>
The parameter url_0 adds a URL to the first sample point in the above example. Use
the parameter url to add a default url to all the samples.
In a chart having multiple data series, the url_N parameter adds a url
to series N. The parameter url_N_M adds a url to sample M in data series N.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=seriesCount value="2">
<param name=sampleValues_0 value="10,20,30,40,50">
<param name=sampleValues_1 value="20,30,40,50,60">
<param name=url_0_0 value="chart1.html">
<param name=url_1_0 value="chart2.html">
</applet>
The example above adds a url to the first sample point in the two data
series of the chart.
You can also set the URLs programatically by calling setParameter("url_0", "myurl");
The parameter urltarget, urltarget_N, urltarget_N_M adds a target window
where the new web page should be opened. The default behavior is to open
the new page in the same window.
The different parameter values are:
_self: Open new page in same window or frame.
_parent: Open in the parent window.
_top: Open in the top-level window.
_blank:Open in a new blank window.
name:Open in the frame or window with the specified name.
Use the singleClickURLOn parameter to use single click drilldowns.
6.3 Graph insets
The sizing of the chart grid is automatically calculated based on the
size and position of other elements in the chart. You can explisitly
set the chart grid by using the graphInsets parameter.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=graphInsets value="0,0,0,0">
</applet>
The sequence of the graphInsets parameter value is
top, left, bottom, right. If you use -1 for any of the fields, the default
inset for that side will be set.
<applet code=com.objectplanet.chart.LineChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="20,10,40,30,50">
<param name=graphInsets value="50,50,50,50">
</applet>
The user can control the size and position of the chart grid at runtime
by clicking on a chart grid edge and dragging it. Use the gridAdjustmentOn
parameter to turn this behaviour on.
<applet code=com.objectplanet.chart.BarChartApplet
archive=chart.jar width=200 height=140>
<param name=sampleValues value="10,20,30,40,50">
<param name=gridAdjustmentOn value="top,left,bottom,right">
</applet>
Color names:
black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange,
pink, red, white, yellow