main | documentation | examples | common questions | changes | licensing


EASYCHARTS DOCUMENTATION   :   LINECHART

1. Loading Data
  1.1 sample values
  1.2 sample count
  1.3 empty values
  1.4 multiple data series
  1.5 dynamically loading data
  1.6 loading data from a url

2. Setting the Range
  2.1 automatic range setting
  2.2 setting explicit range
  2.3 using range step
  2.4 range position and color
  2.5 range value labels
  2.6 range axis label
  2.7 range adjuster
  2.8 multiple range axis
  2.9 multiple range adjusters

3. Labels and Fonts
  3.1 chart title
  3.2 sample labels
  3.3 series labels
  3.4 legend labels
  3.5 sample axis label
  3.6 value labels
  3.7 anywhere labels

4. Chart Colors
  4.1 sample colors
  4.2 background color
  4.3 chart background color
  4.4 foreground color
  4.5 chart foreground color

5. Chart Style
  5.1 3D mode
  5.2 sample scroller
  5.3 horizontal grid lines
  5.4 default vertical grid lines
  5.5 vertical grid lines
  5.6 stacked lines
  5.7 line width
  5.8 line stroke
  5.9 sample highlights
  5.10 connect empty values

6. Miscellaneous
  6.1 target value lines
  6.2 urls and drilldown
  6.3 graph insets

CHART PARAMETERS
3DDepth
3DModeOn
alternateChartBackground
antialias
area_N
autoLabelSpacingOn
automaticRefreshTime
background
chartBackground
chart
chartClass_line
chartForeground
chartTitle
connectedLinesOn
data
dataInterval
defaultGridLinesColor
defaultGridLinesOn
doubleBufferingOff
floatingLabelFont
font
floatingOnLegendOff
foreground
graphInsets
gridAdjustmentOn
gridImage
gridLineColors
gridLinesColor
gridLines
gridOutline3DOn
jpegQuality
labelDelimiter
label
labelAngle
labelColor
labelFont
labelPosition
labelURL
labelURLTarget
legendBoxSizeAsFont
legendColors
legendColumns
legendFont
legendImage
legendLabels
legendOn
legendPosition
legendReverseOn
line3DDepth
line3DLayout
lineStroke
lineStyle
lineWidth
locale
lowerRange
maxValueLineCount
missingValuesInterpolated
outlineOff
output
overlayInsets
printAsBitmap
range
rangeAdjusted
rangeAdjusterOn
rangeAdjusterPosition
rangeAxisLabel
rangeAxisLabelAngle
rangeAxisLabelFont
rangeColor
rangeDecimalCount
rangeLabelFont
rangeInterval
rangeLabelPrefix
rangeLabelPostfix
rangeLabelsOff
rangeOn
rangePosition
rangeStep
sampleAxisLabel
sampleAxisLabelFont
sampleAxisRange
sampleColors
sampleCount
sampleDecimalCount
sampleHighlightImage
sampleHighlightOn
sampleHighlightSize
sampleHighlightStyle
sampleLabelAngle
sampleLabelColors
sampleLabelFont
sampleLabels
sampleLabelsOn
sampleLabelStyle
sampleScrollerOn
sampleValues
seriesCount
seriesLabelColors
seriesLabelFont
seriesLabels
seriesLabelsOn
seriesLabelStyle
seriesLineOff
seriesRange
singleClickURLOn
stackedOn
thousandsDelimiter
targetValueLine
targetLabelsPosition
titleFont
valueLabelAngle
valueLabelFont
valueLabelPrefix
valueLabelPostfix
valueLabelsOn
valueLabelStyle
valueLinesColor
valueLinesOn
visibleSamples
url_default
url_N_M
urltarget
zoomOn

PARAMETERS TO SET CHART VALUES
sampleValues
Sets the sample values for the first data series. If the sampleCount is not set the number of samples in the chart will be the number of values set. <param name="sampleValues" value="10.5, 30.5, 20, 5.1234">
setSampleValues(0, new double[] {10.5,30.5,20,5.1234});
sampleValues=10.5,30.5,20,5.1234
sampleCount
Sets the number of sample points in the chart. This will override the number of values set with the sampleValues parameter. <param name="sampleCount" value=5>
setSampleCount(5);
sampleCount=5
seriesCount
Sets the number of data series/lines in the chart. If the number of data series is larger than 1 you can set the values per data series with the sampleValues_N parameter. <param name="seriesCount" value=3>
setSeriesCount(3);
seriesCount=3
sampleValues_N
Sets the sample values for the specified data series. You must set the series count first. <param name="sampleValues_0" value="200,100,300,250,400">
<param name="sampleValues_1" value="300,150,200,150,300">
setSampleValues(0, new double[] {200,100,300,250,400});
setSampleValues(1, new double[] {300,150,200,150,300});
sampleValues_0=200,100,300,250,400
sampleValues_1=200,100,300,250,400

PARAMETERS TO SET THE RANGE AXIS
range
Sets the upper value of the range axis (y-axis). If this is not set, the upper range will be automatically set to the largest sample. If you want to use 2 y-axis, turn on the second y-axis using rangeOn_2. Then use range_2 to set the second y-axis' upper range. In java applications the upper range is set to 100 by default. <param name="range" value=200>
<param name="range_2" value=800>
<param name="range_3" value=5000>
setRange(0, 200);
setRange(1, 800);
setRange(2, 5000);
range=200
range_2=800
range_3=5000
lowerRange
Sets the lower value of the range axis (y-axis). If this is not set, the lower range will be automatically set to the smallest sample (or 0 if no samples are negative). If you want to use 2 y-axis, turn on the second y-axis using rangeOn_2. Then use lowerRange_2 to set the second y-axis' lower range. In java applications the lower range is set to 0 by default. <param name="lowerRange" value=-200>
<param name="lowerRange_2" value=-800>
<param name="lowerRange_3" value=-5000>
setLowerRange(0, -200);
setLowerRange(1, -800);
setLowerRange(2, -5000);
lowerRange=-200
lowerRange=-800
lowerRange_2=-5000
rangeInterval
Sets interval between the ticks on the specified range. This interval is used even if the range is adjusted. <param name="rangeInterval" value=10>
<param name="rangeInterval_2" value=2.5>
<param name="rangeInterval_3" value=1>
setRangeInterval(0, 10);
setRangeInterval(1, 2.5);
setRangeInterval(2, 1);
rangeInterval=10
rangeInterval_2=2.5
rangeInterval_3=1
rangeStep
If the range is not set directly it will default to the largest value of the chart (or 0) for the applet or servlet. If rangeStep is set, the range will be set to the next value divisible by the step. This parameter works for the lower range as well. If the maximum value of the chart is 325, and the step is set to 100, the range will automatically be set to 400. <param name="rangeStep" value=100>
<param name="rangeStep_2" value=200>
<param name="rangeStep_3" value=500>
setRelativeRange(0, 1, 100);
setRelativeRange(1, 1, 200);
setRelativeRange(2, 1, 500);
setLowerRelativeRange(0, 1, 100);
rangeStep=100
rangeStep_2=200
rangeStep_3=500
rangeOn
Turns on the specified range. Use the seriesRange_N parameter to associate a data series with a specific range.
<param name="rangeOn" value=false>
<param name="rangeOn_2" value=true>
<param name="rangeOn_3" value=true>
<param name="rangeOn_4" value=true>
setRangeOn(0, false);
setRangeOn(1, true);
setRangeOn(2, true);
setRangeOn(3, true);
rangeOn=false rangeOn_2=true rangeOn_3=true rangeOn_4=true
seriesRange_N
A chart can several ranges, and each data series can be associated with either one of them. This parameter controls which range a specified series is associated with. <param name="seriesRange_0" value=1>
<param name="seriesRange_1" value=2>
<param name="seriesRange_2" value=3>
setSeriesRange(0, 0);
setSeriesRange(1, 1);
setSeriesRange(2, 2);
seriesRange_0=1
seriesRange_1=2
seriesRange_2=3
rangePosition
Sets the position of the ranges. The default position for the second range is to the right, all others - to the left. <param name="rangePosition" value=right>
<param name="rangePosition_2" value=left>
<param name="rangePosition_3" value=right>
setRangePosition(0,1); // 1 is right
setRangePosition(1,1); // 1 is right
setRangePosition(2,0); // 0 is left
rangePosition=right
rangePosition_2=left
rangePosition_3=right
rangeColor
Sets the color of the range value labels and tick marks. <param name="rangeColor" value=red>
<param name="rangeColor_2" value=green>
<param name="rangeColor_3" value=blue>
setRangeColor(0, Color.black);
setRangeColor(1, Color.green);
setRangeColor(2, Color.red);
rangeColor=red
rangeColor_2=green
rangeColor_3=blue
rangeAdjusterOn
Turns on the range adjusters. The range adjuster allows the user to adjust the upper and lower ranges at runtime. By default all range adjusters are displayed on the same side as the range. Use the rangeAdjusterPosition parameter to control the position of the first adjuster. <param name="rangeAdjusterOn" value=true>
<param name="rangeAdjusterOn_2" value=true>
setRangeAdjusterOn(0, true);
setRangeAdjusterOn(4, true);
rangeAdjusterPosition
Sets the position of the first range adjuster. The default position is opposite to the range's if there is only one range. <param name="rangeAdjusterPosition" value=left>
<param name="rangeAdjusterPosition" value=right>
setRangeAdjusterPosition(0, 0); // 0 is left
setRangeAdjusterPosition(0, 1); // 1 is right
rangeAdjusted
Controls which range(s) are adjusted with which adjuster. By default adjuster 1 controls range 1 and adjuster 2 controls range 2 and so on. If set to -1 the adjuster controls all ranges <param name="rangeAdjusted_1" value=1>
<param name="rangeAdjusted_2" value=2>
<param name="rangeAdjusted_1" value=all>
setRangeAdjusted(0, 0); // first parameter is adjuster
setRangeAdjusted(0, 1); // second parameter is range
setRangeAdjusted(0, -1); // 0=range 0, 1=range 1, -1 = all
rangeAxisLabel
Adds a label to the range axis. The label is horizontal by default, but the angle can be controlled using the rangeAxisLabelAngle parameter. <param name="rangeAxisLabel" value="first range">
<param name="rangeAxisLabel_2" value="second range">
<param name="rangeAxisLabel_3" value="third range">
setLabel("rangeAxisLabel", "first range");
setLabel("rangeAxisLabel_2", "second range");
setLabel("rangeAxisLabel_3", "third range");
rangeAxisLabel=first range
rangeAxisLabel_2=second range
rangeAxisLabel_3=third range
rangeAxisLabelAngle
Sets the clockwise angle of the range axis labels. <param name="rangeAxisLabelAngle" value="270">
<param name="rangeAxisLabelAngle_2" value="90">
setLabelAngle("rangeAxisLabelAngle", 270);
setLabelAngle("rangeAxisLabelAngle_2", 90);
rangeAxisLabelAngle=270
rangeAxisLabelAngle_2=90
rangeAxisLabelFont
Sets the font used for the rangeAxisLabels. <param name="rangeAxisLabelFont" value="Dialog, plain, 12"
setFont("rangeAxisLabelFont", new Font("Dialog", Font.PLAIN, 12));
rangeAxisLabelFont=Dialog, plain, 12
rangeLabelsOff
Turns off the range labels for the specified range. <param name="rangeLabelsOff" value=true>
<param name="rangeLabelsOff_5" value=true>
setRangeLabelsOn(0, false);
setRangeLabelsOn(5, false);
rangeLabelsOff=true
rangeLabelsOff_5=true
rangeDecimalCount
Sets the number of fixed decimals to use for the range labels. If value is set to auto (-1 for applications) the number of decimals is calculated automatically based on the upper and lower range values.
<param name="rangeDecimalCount" value=3>
<param name="rangeDecimalCount_2" value=4>
<param name="rangeDecimalCount_3" value=1>
<param name="rangeDecimalCount_4" value=auto>
setRangeDecimalCount(0, 3); // first parameter is range
setRangeDecimalCount(1, 4); // first parameter is range
setRangeDecimalCount(2, 1); // second parameter is decimal count setRangeDecimalCount(3, -1); // number of deciamls is calculated automatically
rangeDecimalCount=3
rangeDecimalCount_2=4
rangeDecimalCount_3=1
rangeDecimalCount_4=auto
rangeLabelFont
Sets the font for the range labels. <param name="rangeLabelFont" value="Dialog, plain, 12">
setFont("rangeLabelFont", new Font("Dialog", Font.PLAIN, 12));
rangeLabelFont=Dialog, plain, 12
rangeLabelPrefix
Adds a prefix before the range labels. <param name="rangeLabelPrefix" value="#">
<param name="rangeLabelPrefix_5" value="$">
setLabel("rangeLabelPrefix", "#");
setLabel("rangeLabelPrefix_5", "$");
rangeLabelPrefix=#
rangeLabelPrefix_5=$
rangeLabelPostfix
Adds a postfix after the range labels.
<param name="rangeLabelPostfix" value="%">
<param name="rangeLabelPostfix_5" value="@">
setLabel("rangeLabelPostfix", "%");
setLabel("rangeLabelPostfix_5", "@");
rangeLabelPostfix=%
rangeLabelPostfix_5=@

PARAMETERS TO SET LABELS
chartTitle
Sets the title of the chart. The title will be displayed at the top of the chart. To set the title font use the titleFont parameter. Use \n for line breaks. <param name="chartTitle" value="This is my title">
<param name="chartTitle" value="Linebreak\nin title">
setTitle("This is my title");
setTitle("Linebreak\\nin title");
chartTitle=This is my title
titleFont
Sets the font used for the chart title. <param name="titleFont" value="Dialog, bold, 20"
setFont("titleFont", new Font("Dialog", Font.BOLD, 20));
titleFont=Dialog, bold, 20
sampleLabels
Sets the sample labels for this chart. The sample labels will appear below the chart grid at the sample points when the sampleLabelsOn parameter is turned on. <param name="sampleLabels" value="one,two,three">
setSampleLabels(new String[] {"one","two","three"});
sampleLabels=one,two,three
sampleLabelsOn
Turns on the sample labels set by the sampleLabels parameter. <param name="sampleLabelsOn" value=true>
setSampleLabelsOn(true);
sampleLabelsOn=true
sampleLabelFont
Sets the font used for the sample labels. <param name="sampleLabelFont" value="Dialog, plain, 12">
setFont("sampleLabelFont", new Font("Dialog", Font.PLAIN, 12));
sampleLabelFont=Dialog,plain,12
sampleLabelAngle
Sets the clockwise angle of the sample labels. <param name="sampleLabelAngle" value="270">
setLabelAngle("sampleLabelAngle", 270);
sampleLabelAngle=270
sampleLabelStyle
Sets the display style of the sample labels. The labels can either be displayed below the chart grid, around outside the sample point on the chart grid, floating above a sample point when the mouse moves over it, or both below and floating. <param name="sampleLabelStyle" value="below">
<param name="sampleLabelStyle" value="outside">
<param name="sampleLabelStyle" value="floating">
<param name="sampleLabelStyle" value="below_and_floating">
setSampleLabelStyle(Chart.BELOW);
setSampleLabelStyle(Chart.OUTSIDE);
setSampleLabelStyle(Chart.FLOATING);
setSampleLabelStyle(Chart.BELOW_AND_FLOATING);
sampleLabelStyle=below
sampleLabelStyle=outside
autoLabelSpacingOn
By default all the sample labels are painted, even if there is not enough space for them all (they will overlap). If this parameter is set only labels there are room for will be painted. <param name="autoLabelSpacingOn" value=true>
setAutoLabelSpacingOn(true);
autoLabelSpacingOn=true
sampleLabelColors
Sets the colors of the sample labels. <param name="sampleLabelColors" value="red, #c0c0c0, blue">
setSampleLabelColor(0, Color.red);
setSampleLabelColor(1, new Color(0xc0c0c0));
setSampleLabelColor(2, Color.blue);
sampleLabelColors=red,%23c0c0c0,blue
seriesLabels
Sets the series labels for this chart. The series labels are displayed in the legend, one for each data series. <param name="seriesLabels" value="2000, 2001, 2002">
setSeriesLabels(new String[] {"2000","2001","2002"});
setSeriesLabel(0, "another label");
seriesLabels=2000,2001,2002
seriesLabelColors
Sets the colors of the series labels in the legend. <param name="seriesLabelColors" value="red, #7f0000, blue">
setSeriesLabelColor(0, Color.red);
setSeriesLabelColor(1, new Color(0x7f0000));
setSeriesLabelColor(2, Color.blue);
seriesLabelColors=red,%237f0000,blue
seriesLabelsOn
Turns on floating series labels. The series labels will be displayed below a sample point in a line when the mouse moves over it. <param name="seriesLabelsOn" value="true">
setSeriesLabelsOn(true);
seriesLabelStyle
Controls how the series labels are displayed. The series labels can either be displayed around outside the sample point on the chart grid or floating above a sample point when the mouse moves over it. <param name="seriesLabelStyle" value="outside">
<param name="seriesLabelStyle" value="floating">
setSeriesLabelStyle(LineChart.OUTSIDE);
setSeriesLabelStyle(LineChart.FLOATING);
seriesLabelStyle=outside
seriesLabelStyle=floating
seriesLabelFont
Sets the font used for the series labels. <param name="seriesLabelFont" value="Dialog, plain, 12">
setFont("seriesLabelFont", new Font("Dialog", Font.PLAIN, 12));
seriesLabelFont=Dialog,plain,12
legendOn
Turns on the legend that displays the series labels. The position of the legend can be set using the legendPosition parameter. <param name="legendOn" value=true>
setLegendOn(true);
legendOn=true
legendPosition
Sets the legend position. Possible positions are right, left, top, or bottom. The default position is to the right. <param name="legendPosition" value="right">
<param name="legendPosition" value="left">
<param name="legendPosition" value="top">
<param name="legendPosition" value="bottom">
setLegendPosition(LineChart.RIGHT);
setLegendPosition(LineChart.LEFT);
setLegendPosition(LineChart.TOP);
setLegendPosition(LineChart.BOTTOM);
legendPosition=left
legendLabels
Overrides the default labels in the legend which are taken from the seriesLabels parameter. <param name="legendLabels" value="2000, 2001, 2002">
setLegendLabels(new String[] {"2000","2001","2002"});
legendLabels=2000,2001,2002
legendColors
Sets the colors for the legend boxes. If this is not set, the colors are taken from the sampleColors parameter. <param name="legendColors" value="red, #7f0000">
setLegendColors(new Color[] {Color.red, new Color(0x7f0000));
setLegendColor(1, Color.blue);
legendColors=red,%237f0000
legendColumns
Sets the number of columns that should be used to display legend labels. <param name="legendColumns" value=4>
setLegendColumns(3);
legendColumns=5
legendReverseOn
Set on or off the inverted legend. Default legend entry order is from top to bottom and from left to right. <param name="legendReverseOn" value=true>
setLegendReverseOn(true);
legendReverseOn=true
legendFont
Sets the font used for the legend labels. <param name="legendFont" value="Dialog, plain, 12">
setFont("legendFont", new Font("Dialog", Font.PLAIN, 12));
legendFont=Dialog,plain,12
legendImage
Sets an image to be used in front of the legend label instead of the default legend box. For the applet the image is specified as a relative URL. This only works if the applet is allowed to connect back to the web server. <param name="legendImage_0" value="blue_ball.gif">
<param name="legendImage_1" value="images/red_ball.gif">
Image image = ... load image blue_ball.gif from disk
addImage("legendImage_0", image);
setLegendImage(0, "legendImage_0");
legendBoxSizeAsFont
Sets the default legend box size the same as the legend font size.
<param name="legendBoxSizeAsFont" value="true">
setLegendBoxSizeAsFont(true);
legendBoxSizeAsFont=true
sampleAxisLabel
Adds a label below the sample (X) axis. <param name="sampleAxisLabel" value="sample axis">
setLabel("sampleAxisLabel", "sample axis");
sampleAxisLabel=sample axis
sampleAxisLabelFont
Sets the font used for the sampleAxisLabel. <param name="sampleAxisLabelFont" value="Dialog, plain, 12">
setFont("sampleAxisLabelFont", new Font("Dialog", Font.PLAIN, 12));
sampleAxisLabelFont=Dialog,plain,12
valueLabelsOn
Turns on the value labels for the sample points in a line. Use valueLabelsOn_N to control the value labels per data series. <param name="valueLabelsOn" value=true>
<param name="valueLabelsOn_2" value=false>
setValueLabelsOn(true);
setValueLabelsOn(1, false);
valueLabelsOn=true
valueLabelStyle
Sets the display style of the value labels. The value labels can be painted directly above or below the sample point, directly on top of the sample point, or floating above the sample point when the mouse hovers over it. <param name="valueLabelStyle" value="outside">
<param name="valueLabelStyle" value="inside">
<param name="valueLabelStyle" value="floating">
setValueLabelStyle(Chart.OUTSIDE);
setValueLabelStyle(Chart.INSIDE);
setValueLabelStyle(Chart.FLOATING);
valueLabelStyle=outside
valueLabelStyle=inside
sampleDecimalCount
Sets the number of fixed decimals to use for the value labels. Use sampleDecimalCount_N to control the decimals per data series. If value is set to auto (-1 for applications) the number of decimals is calculated automatically based on the upper and lower range values.
<param name="sampleDecimalCount" value=3>
<param name="sampleDecimalCount_2" value=0>
setSampleDecimalCount(-1, 3); // -1 specifies all series
setSampleDecimalCount(0, 2);  // serie 0, 2 decimals
sampleDecimalCount=3
sampleDecimalCount_2=0
floatingOnLegendOff
By default floating labels are displayed for all the samples in the selected series when the mouse moves over a series label in the legend. This parameter turns this behavior off. <param name="floatingOnLegendOff" value="true">
setFloatingOnLegendOn(false);
valueLabelFont
Sets the font used for the value labels. <param name="valueLabelFont" value="Dialog, plain, 12">
setFont("valueLabelFont", new Font("Dialog", Font.PLAIN, 12));
valueLabelFont=Dialog,plain,12
valueLabelPrefix
Adds a prefix before all value labels. You can also set the prefix for individual data series by adding the series index. <param name="valueLabelPrefix" value="$">
<param name="valueLabelPrefix_2" value="£">
setLabel("valueLabelPrefix", "$");
valueLabelPrefix=$
valueLabelPostfix
Adds a postfix after all value labels. You can also set the postfix for individual data series by adding the series index. <param name="valueLabelPostfix" value="%">
<param name="valueLabelPostfix_0" value="ms">
setLabel("valueLabelPostfix", "%");
setLabel("valueLabelPostfix_1", "ms");
valueLabelPostfix=KB
valueLabelAngle
Sets the clockwise angle of the value labels.
<param name="valueLabelAngle" value="270">
setLabelAngle("valueLabelAngle", 270);
valueLabelAngle=270
font
Sets the default font used in the chart. <param name="font" value="Dialog, plain, 12">
setFont(new Font("Dialog", Font.PLAIN, 12));
font=Dialog,plain,12
floatingLabelFont
Sets the font used for the floating value and sample labels. <param name="floatingLabelFont" value="Dialog, plain, 12">
setFont("floatingLabelFont", new Font("Dialog, Font.Plain, 12));
floatingLabelFont=Dialog,plain,12
labelDelimiter
By default the sampleLabels, seriesLabel, targetValueLine, and legendLabels parameters use comma (,) as a field delimiter. Use this parameter to control the label delimiter if you need a comma in the labels to be displayed in the applet or servlet. <param name="labelDelimiter" value=":">
labelDelimiter=:
thousandsDelimiter
Use this parameter to control the thousands delimiter in numerical labels. <param name="thousandsDelimiter" value=",">
setThousandsDelimiter(",");
thousandsDelimiter=,
locale
Sets the locale of the chart. The locale affects the display of value and range labels, with the correct grouping and decimal signs.
Language codes
Country codes
<param name=locale value="en, gb">
<param name=locale value="en, us">
setLocale(new Locale("EN", "GB");
setLocale(new Locale("EN", "US");
locale=en,gb
locale=en,us

PARAMETERS TO CONTROL COLORS
sampleColors
Sets the colors of the lines in the chart. The gradiency of the line sample color can be set by specifiing two colors separated by |. <param name="sampleColors" value="red, #c0ff7f, blue">
<param name="sampleColors" value="red|orange, #c0ff7f|#70773f, blue|cyan">
Color[] c = new Color[] {Color.red, new Color(0xc0ff7f)};
Color[] c2 = new Color[] {Color.orange, new Color(0x70773f)};
setSampleColors(c);
setSampleColors(c2);
sampleColors=red|orange,%23c0ff7f|0x70773f,blue|cyan
background
This is the background color of the area around the chart grid. The background can be solid or gradient. In order to use gradient background, specify two colors separated by |. <param name="background" value="red">
<param name="background" value="gray|lightGray">
setBackground(Color.red);
setBackground2(Color.black);
background=red
background=gray|lightGray
foreground
This is the color of the title, legend labels, value labels, sample labels, and the range labels. <param name="foreground" value="blue">
setForeground(Color.blue);
foreground=blue
chartBackground
This is the color of the chart grid background. The grid background can be solid or gradient. In order to use gradient chart grid background specify the two colors separated by |. <param name="chartBackground" value="blue">
<param name="chartBackground" value="gray|lightGray">
setChartBackground(Color.blue);
setChartBackground2(Color.black);
chartBackground=blue
chartBackground=gray|lightGray
chartForeground
This is the color of the chart grid outline. <param name="chartForeground" value="red">
setChartForeground(Color.red);
chartForeground=red
alternateChartBackground
Sets the alternate background color of the chart. It is used along with the primary chart background color alternating by the value lines. <param name="alternateChartBackground" value="cyan">
setAlternateChartBackground2(Color.cyan);
alternateChartBackground=blue

PARAMETERS TO CONTROL CHART STYLE
area_N
Fills area between the two lines with the specified color. <param name="area_0" value="0,1,yellow>
setArea(0,0,1);
setAreaColor(0,Color.yellow);
area_0=0,1,yellow
3DModeOn
Paints the chart in 3D (2.5D) mode with 3D lines and 3D chart grid. <param name="3DModeOn" value=true>
set3DModeOn(true);
3DModeOn=true
3DDepth
Sets the depth of the 3D effect in pixels. By default the 3D depth is a function of the number of samples in the chart and its size and as an effect of this it will vary with changing the size of the chart. <param name="3DDepth" value=10>
set3DDepth(10);
3DDepth=10
gridOutline3DOn
Paint the 3D edge on the front right side of the chart grid. <param name="gridOutline3DOn" value=true>
setGridOutline3DOn(true);
gridOutline3DOn=true
sampleScrolleOn
Use this parameter to turn on the sample scroller. The sample scroller is used by the user to zoom into the samples of the chart and scroll them left and right. <param name="sampleScrollerOn" value=true>
setSampleScrollerOn(true);
zoomOn
If zoomOn is set to true, the user can use mouse box to zoom into the samples of the chart. <param name="zoomOn" value=true>
setZoomOn(true);
visibleSamples
Displays a subset of the samples in the chart. The first argument is the index of the starting sample, the second argument is the number of samples to be displayed. <param name="visibleSamples" value="10,25">
setVisibleSamples(10,25);
visibleSamples=10,25
outlineOff
This turns off the outline around the 3D and stacked lines. <param name="outlineOff" value=true>
setOutlineOn(false);
outlineOff=true
lineStyle
Sets the style of the line. The style can be line(default) or tube. <param name="lineStyle" value="tube,line,tube">
setLineStyle(-1, LineStyle.LINE_STYLE_TUBE);
lineSttyle=tube
lineStroke
Used to display dashed and dotted lines. Sets an array of values to use as repeating dash lengths and clear sections. Use only one value if all the dashes a nd clear sections have the same length. For instance, lineStroke=3 produces a repeating dash of 3 pixel length followed by space of same length, while lineStroke=3|6 produces dash of 3 pixel length followed by 6 empty pixels. The length of the stroke will cycle trough the array if more drawing space is available. You can also set different strokes for different series separating arrays with commas. <param name="lineStroke" value="3">
<param name="lineStroke" value="3|6">
<param name="lineStroke" value="3|6,2|4">
setLineStroke( -1, new int {3}); // -1 is used for all series
setLineStroke( -1, new int {3,6}); // -1 is used for all series
setLineWidth(0, new int {3}); // first line is painted with stroke with lenght of 3 pixels
lineStroke=3
lineStroke=3|6
lineStroke=3|6,2|4
lineWidth
Sets the width of each series line. You set the width of each series by using a commaseparated list of values. If you have more than one series, you can set the width of all the series by using 1 value. Default width is 2. <param name="lineWidth" value="1">
<param name="lineWidth" value="1,5,2,3,1">
setLineWidth(1); // all series has width 1
setLineWidth(0,5); // first series has line width 5
lineWidth=1
lineWidth=1,5,2,3,1
line3DDepth
Sets the 3D depth of the specified line. The value is relative and can be any from from the range of 0.0 to 1.0. <param name="line3DDepth" value="0.5,0.8,1">
setLine3DDepth(0, 0.5);
setLine3DDepth(1, 0.8);
setLine3DDepth(2, 1);
line3DDepth=0.5,0.8,1
stackedOn
Paints filled and stacked lines (area chart). <param name="stackedOn" value=true>
setStackedOn(true);
stackedOn=true
line3DLayout
Sets the 3D line layout style: lines can be displayed behind each other or on the same level. By default the 3D lines are displayed behinnd each other. <param name="line3DLayout" value=behind>
<param name="line3DLayout" value=same_level>
setLine3DLayout(LineChart.BEHIND_LINE_LAYOUT);
setLine3DLayout(LineChart.SAME_LEVEL_LINE_LAYOUT);
line3DLayout=behind
line3Dlayout_same_level
valueLinesOn
Turns on the horizontal grid lines in the chart background. <param name="valueLinesOn" value=true>
setValueLinesOn(true);
valueLinesOn=true
valueLinesColor
Sets the color of the horizontal grid lines. <param name="valueLinesColor" value="red">
<param name="valueLinesColor" value="#c0c0c0">
setValueLinesColor(Color.red);
setValueLinesColor(new Color(0xc0c0c0));
valueLinesColor=red
valueLinesColor=%23c0c0c0
maxValueLineCount
Sets the maximum number of value lines to be displayed in the chart. You can use this to control the step between the grid labels to certain extent. <param name="maxValueLineCount" value=10>
setMaxValueLineCount(10);
maxValueLineCount=10
defaultGridLinesOn
Turns on the vertical grid lines. By default, there is one line per sample point in the line chart. You can control the start position and interval of the lines. The start and interval numbers are relative to the sample axis range which is set to 0 to 100 by default. <param name="defaultGridLinesOn" value="true">
<param name="defaultGridLinesOn" value="true,5,10">
setDefaultGridLinesOn(true);
setDefaultGridLinesOn(true, 5, 10);
defaultGridLinesOn=true
defaultGridLinesOn=true,5,10
defaultGridLinesColor
Sets the color of default grid lines. <param name="defaultGridLinesColor" value="red">
<param name="defaultGridLinesColor" value="#c0c0c0">
setDefaultGridLinesColor(Color.red);
setDefaultGridLinesColor(new Color(0xc0c0c0));
defaultGridLinesColor=red
defaultGridLinesColor=%23c0c0c0
gridLines
Sets the vertical grid lines. Add one value per grid line. The value is relative to the sample axis range (default 0 to 100) and the width of the chart grid. To turn off the grid lines use setGridLines(null). <param name="gridLines" value="10,20,30,40,50,60,70,80,90">
setGridLines(new double[] {10,20,30,40,50,60,70,80,90});
gridLines=10,20,30,40,50,60,70,80,90
gridLinesColor
Sets the color of all except default grid lines. <param name="gridLinesColor" value="red">
<param name="gridLinesColor" value="#c0c0c0">
setGridLinesColor(Color.red);
setGridLinesColor(new Color(0xc0c0c0));
gridLinesColor=red
gridLinesColor=%23c0c0c0
gridLineColors
Sets the color of individual vertical grid lines. <param name="gridLineColors" value="red, green, blue">
setGridLineColors(new Color[] {Color.red,Color.green,Color.blue});
setGridLineColor(0, Color.red);
gridLineColors=red,green,blue
sampleAxisRange
Sets the range of the sample axis. This range is used to calculate where the vertical grid lines is displayed. <param name="sampleAxisRange" value="1,12">
<param name="sampleAxisRange" value="0,1000">
setSampleAxisRange(1,12);
sampleAxisRange=1,365
seriesLineOff
Turns off the series lines for all the series, or only the specified data series. This can be used with the sample highlights to make a plotter chart or a combined line and plotter chart. However all the plots are distributed evenly across the x-axis. <param name="seriesLineOff" value=true>
<param name="seriesLineOff" value="1,3"> (series 1 and 3 off)
setSeriesLineOn(false); // all lines off
setSeriesLineOn(1, true); // series 1 on
seriesLineOff=true
seriesLineOff=1,3
connectedLinesOn
By default, a line with undefined values will have gaps in the line. By using this parameter you can bridge these gaps by painting a line to the next defined value in the series. You can control each data series individually. Undefined values does not work with stacked lines. <param name="connectedLinesOn" value=true>
<param name="connectedLinesOn" value="1,3,4">
setConnectedLinesOn(1, true);
setConnectedLinesOn(3, true);
setConnectedLinesOn(4, true);
connectedLinesOn=true
connectedLinesOn=1,3,4
sampleHighlightOn
Each data series can have the sample points highlighted by either a circle, a square, or a diamond shape. Use this parameter to turn sample highlighting on or off for the data series. The default highlight type is circle and highlighting is turned off by default. <param name="sampleHighlightOn" value="true">
<param name="sampleHighlightOn" value="true, false, false, true">
setSampleHighlightOn(true);
setSampleHighligthOn(0, false);
setSampleHighligthOn(2, false);
sampleHighlightOn=true
sampleHighlightOn=true,false,false,true
sampleHighlightStyle
Use this parameter to set the sample highlight style for each data series. The possible styles are circle, circle_opaque, circle_filled, square, square_opaque, square_filled, diamond, diamond_opaque, or diamond_filled. <param name="sampleHighlightStyle" value="circle, square, diamond">
setSampleHighlightStyle(0, LineChart.SAMPLE_HIGHLIGHT_CIRCLE, 10); // 10 is size
setSampleHighlightStyle(1, LineChart.SAMPLE_HIGHLIGHT_CIRCLE_OPAQUE, 10);
setSampleHighlightStyle(2, LineChart.SAMPLE_HIGHLIGHT_CIRCLE_FILLED, 10);
setSampleHighlightStyle(3, LineChart.SAMPLE_HIGHLIGHT_SQUARE, 10);
setSampleHighlightStyle(4, LineChart.SAMPLE_HIGHLIGHT_SQUARE_OPAQUE, 10);
setSampleHighlightStyle(5, LineChart.SAMPLE_HIGHLIGHT_SQUARE_FILLED, 10);
setSampleHighlightStyle(6, LineChart.SAMPLE_HIGHLIGHT_DIAMOND, 10);
setSampleHighlightStyle(7, LineChart.SAMPLE_HIGHLIGHT_DIAMOND_OPAQUE, 10);
setSampleHighlightStyle(8, LineChart.SAMPLE_HIGHLIGHT_DIAMOND_FILLED, 10);
sampleHighlightStyle=circle, square, diamond
sampleHighlightImage
Use this parameter to set a sample highlight image for all sample points. Use sampleHighlightImage_N to set highlight image for all samples in a specific serie or use sampleHightlightImage_N_M to set highlight image for a specific sample in a specific serie where N is serie and M is sample. <param name="sampleHighlightImage" value="blue_ball.gif">
<param name="sampleHighlightImage_2" value="images/red_ball.gif">
<param name="sampleHighlightImage_1_5" value="images/magentad_ball_small.gif">

Image image = ... load image blue_ball.gif from disk
addImage("image_0", image);
setSampleHighlightImage(-1,-1,"image_0"); setSampleHighlightImage(2,-1,"image_0"); setSampleHighlightImage(1,5,"image_0");
sampleHighlightSize
Use this parameter to set the size of the sample highlighting for each data series. The default size is 6.
<param name="sampleHighlightSize" value="6, 8, 10">
sampleHighlightSize=6,8,10
graphInsets
Use this parameter to add space between the chart grid and the chart component edges. The parameter value consists of 4 parameters whith the following sequence; top, left, bottom, right. A value of -1 uses the default inset. <param name="graphInsets" value="-1, 50, -1, -1">
setGraphInsets(-1,50,-1-1);
graphInsets=-1,50,-1,-1
overlayInsets
Use this parameter to add space between the chart data and the chart grid. This is useful when you want to set overlay chart bounds manually (f.ex. have a small overlay chart over the larger base chart). The parameter value consists of 4 parameters whith the following sequence: top, left, bottom, right. The values should be between 0 and 1 where 0 means no offset, and 1 means offset with size of the grid's height or width. <param name="overlayInsets" value="0.5, 0.5, 0, 0">
setOverlayInsets(0.5, 0.5, 0, 0);
overlayInsets=0.5,0.5,0,0
gridAdjustmentOn
You can adjust the chart grid at runtime by selecting a grid edge and dragging the mouse button. Double-click on the grid edge to set it to the default position. <param name="gridAdjustmentOn" value="true">
<param name="gridAdjustmentOn" value="left,right">
setGridAdjustment(Chart.TOP, true);
setGridAdjustment(Chart.LEFT, true);
setGridAdjustment(Chart.BOTTOM, true);
setGridAdjustment(Chart.RIGHT, true);
gridImage
You can set an image to be used as a background for the grid. <param name="gridImage" value="background.gif">
Image image = ... load image background.gif from disk
addImage("gridImage", image);
setGridImage("gridImage");
gridImage=http://server/background.gif

MISCELLANEOUS PARAMETERS
data
Instead of loading the data from the applet or servlet parameters, you can specify a url to load the data from. Any parameters specified in the applet or servlet tag will override parameters with the same name loaded from the url. <param name=data value=customers.asp>
data=http://somehost/customers.asp

The data in the url has to be returned in the following format
parameter1=value1
parameter2=value2
parameter3=value3

dataInterval
You can make the applet load the data from the currently specified URL at a specific interval. The interval is specified in seconds. If reset is specified in the data interval, the chart is reset before the parameters are read again. <param name=dataInterval value=10>
<param name=dataInterval value=10,reset>
chart
Use this parameter to set the type of the chart. The supported types are bar, line and pie. The default chart type is bar. <param name="chart" value="line">
chart=line
targetValueLine
You can set grid lines with a specified label and color at any value position in the chart. The first parameter is the label, the second is the value, the third is the color. There is an optional fourth parameter to control whether only the label or the value should be displayed as opposed to both as the default behavior is. The fifth parameter controls the range line is related to. The lables are displayed on this range. <param name="targetValueLine_0" value="break even, 150, green">
<param name="targetValueLine_1" value="bankrupt, 20, red, label">
<param name="targetValueLine_2" value="goal, 250, #0c0aa0, value">
<param name="targetValueLine_3" value="another goal, 80, blue, label_value, 1">
setTargetValueLine("break even", 150, Color.green,
  BarChart.TARGET_LINE_ID_AND_VALUE_LABEL);
setTargetValueLine("bankrupt", 20, Color.red,
  BarChart.TARGET_LINE_ID_LABEL);
setTargetValueLine("goal", 250, new Color(0x0c0aa0),
  BarChart.TARGET_LINE_VALUE_LABEL);
setTargetValueLine("another goal", 80, Color.blue,
  BarChart.TARGET_LINE_ID_AND_VALUE_LABEL,1);
targetValueLine_0=break even, 150, green
targetValueLine_1=another_goal, 80,blue,label_value,1
targetLabelsPosition
Sets the position of the target value labels. Can be left or right. By default the target value labels are displayed at the same side as the first range. <param name="targetLabelsPosition" value=left>
setTargetLabelsPosition(Chart.LEFT);
targetLabelsPosition=left
url_default
You can associate the chart to a URL, and the document pointed to by that URL will be opened when the user double-clicks any place inside the chart grid. Single-click can be used instead by setting the singleClickURLOn parameter. <param name="url_default" value="sales_2004.html">

Include MAYSCRIPT in the applet tag to call javascript functions.
url_N_M (applet drilldown)
This feature can be used to create drill-down functionallity for the charts. You can associate any line or sample point in the chart to a URL, and the document pointed to by that URL will be opened when the user double-clicks the legend entry or sample point in the legend. Single-click can be used instead by setting the singleClickURLOn parameter.

The N is the index of the data series (first is numbered 0). The M is the index of the sample within the series (first is numbered 0). If there is only one series in the chart, N will be the index of the sample. However url_0_M will override url_N if M=N.If you want to associate and url with a group of samples with the same index across the different series use url_x_N where N is the index of data series.

NOTE: For the TimeLineChart the parameter name format is the following: url_N_TIME, where TIME is timeplot used int the timeplots_N parameter. If there is only one series in the chart, the format can be url_TIME.

<param name="url_0" value="orange_sales_2001.html">
<param name="url_1" value="apple_sales_2001.html">
<param name="url_2" value="banana_sales_2001.html">
<param name="url_3" value="http://www.fruitorama.com">
<param name="url_4" value="javascript:winOpen('bar.html', 200,500);">

Include MAYSCRIPT in the applet tag to call javascript functions.


TimeLineChart:
<applet code=com.objectplanet.chart.ext.TimeLineChartApplet
archive=chart.ext.jar width=300 height=200>
<param name=chartTitle value="Time Line Chart">
<param name=seriesCount value=2>
<param name=timePlots_0 value="01/01/2002|1234, 02/01/2002|1014, 03/01/2002|1655, 04/01/2002|1361">
<param name=timePlots_1 value="01/01/2002|2234, 02/01/2002|2014, 03/01/2002|2655, 04/01/2002|2361">
<param name=timeFormatInput value="MM/dd/yyyy">
<param name=timeFormatInputLocale value="en,us">
<param name=timeFormatOut value="MMM yyyy">
<param name=lowerTime value="01/01/2002">
<param name=upperTime value="04/01/2002">
<param name=timeScale value=86400>
<param name=rangeStep value=1000>
<param name="url_0_01/01/2002" value=one.html>
<param name="url_0_02/01/2002" value=two.html>
<param name="url_1_03/01/2002" value=three.html>
<param name="url_1_04/01/2002" value=four.html>
</applet>
urltarget_N_M (applet drilldown)
This parameter controls where HTML pages will be opened. urltarget sets the default target frame or window. urltarget_N sets the target for the specified series. urltarget_N_M sets the target for the specified sample. _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.
<param name="urltarget" value="bottom_frame">
<param name="urltarget_0" value="left_frame">
label_N
This parameter can be used to set a label to any point of the chart. N - index of the label. First parameter is label text. Second and third parameters are X and Y coordinates of the label. If X and Y are higher then 0 and lower than 1, the label position is calculated relatively to the chart bounds. Otherwise, the absolute coordinates of the chart are used. There are optional 4th and 5th parameters which are index and serie of the sample, pointed by the label. <param name="label_0" value="orange sales,100,100">
<param name="label_1" value="apple sales,0.4,0.5">
<param name="label_2" value="banana sales,200,200,4,0">

setLabel("label_0", "orange sales", 100, 100);
setLabel("label_1", "apple sales", 0.4, 0.5);
setLabel("label_2", "banana sales", 200, 200, 4, 0);

label_0=orange sales,100,100
label_1=apple sales,0.4,0.5
label_2=banana sales,200,200,4,0
labelPosition_N
This parameter can be used to set a new position for the anywhere label. The initial position for a label can be set by using label_N parameter. N is the index of the label. <param name="labelPosition_0" value="0.8, 0.1">
<param name="labelPosition_1" value="120, 180">

setLabelPosition("label_0", 0.8, 0.2);
setLabelPosition("label_1", 120, 180);
labelAngle_N
This parameter can be used to set angle of the given anywhere label. <param name="labelAngle_0" value="270">
<param name="labelAngle_1" value="45">
setLabelAngle("label_0", 270);
setLabelAngle("label_1", 45);
labelAngle_0=270
labelAngle_1 =45
labelColor_N
This parameter can be used to set color of the given anywhere label. <param name="labelColor_0" value="red">
<param name="labelColor_1" value="#4f6c23">
setLabelColor("label_0", Color.red);
setLabelColor("label_1", new Color(0x4f6c23));
labelColor_0=red
labelColor_1 =%234f6c23
labelFont_N
This parameter can be used to set font of the given anywhere label. <param name="labelFont_0" value="Dialog,plain,10">
<param name="labelFont_1" value="Times,italic,12">
setFont("label_0", new Font("Dialog", Font.PLAIN, 10));
setFont("label_1", new Font("Times", Font.ITALIC, 12));
labelFont_0=Dialog,plain,10
labelFont_1 =Times,italic,12
labelURL_N
This parameter can be used to assign an URL to an anywhere label. The URL adress will be opened when user clicks the label. N is the index of the label. <param name="labelURL_0" value="orange_sales_2001.html">
<param name="labelURL_1" value="apple_sales_2001.html">
<param name="labelURL_2" value="banana_sales_2001.html">
labelURLTarget_N
This parameter controls where a HTML page will be opened when clicked the appropriate label. labelURLTarget sets the default target frame or window. labelURLTarget_N sets the target for the specified label. _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.
<param name="labelURLTarget" value="bottom_frame">
<param name="labelURLTarget_0" value="left_frame">
singleClickURLOn (applet drilldown)
Turn on this parameter to use single click instead of double clicks when doing drilldown charts. <param name="singleClickURLOn" value="true">
missingValuesInterpolated
Turns on the automatic calculation of the missing sample values in the stacked mode <param name="missingValuesInterpolated" value="true">
setMissingValuesInterpolated(true);
missingValuesInterpolated=true
automaticRefreshTime
Some browsers has problems repainting the applets when scrolling the web page. Set this parameter to make the applet repaint itself on a regular basis. The value is specified in milliseconds so 1000 is one second. <param name="automaticRefreshTime" value=1000>
doubleBufferingOff
By default the charts use double buffering to avoid flickering. However, sometimes this causes problems repainting the charts when scrolling in a browser. If you have charts that the user will not interact with, you might want to turn the double buffering off. <param name="doubleBufferingOff" value=true>
chartClass_line
The ChartApplet wraps a LineChart class which actually renders the chart. To add more behavior you can subclass the LineChart class and make the applet load your chart class instead of the standard LineChart class. <param name="chartClass_line" value="package.MyLineChart">
printAsBitmap
Some java VMs and printers have problems printing applets. Use the printAsBitmaps parameter to print the chart as a bitmap image to work around this. However, the resolution of the printed chart will degrade. <param name="printAsBitmap" value="true">
setPrintAsBitmap(true);

SERVLET PARAMETERS
antialias
The servlet supports antialias rendering to smooth out edges. antialias=true
jpegQuality
The servlet supports controllig quality of the returned jpeg image. jpegQuality=100
output
This paramtere can be used to force the servlet output type. Can be image or html. If the parameter value is html, the servlet output is html code that contains call to the servlet itself producing the chart image. If the value is image, the output is jpeg or png image. output=html
output=image

CHART USER GUIDE


1. Loading Data

Data can be loaded using the applet parameters.

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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="20,10,40,30,50">
</applet>


1.2 Sample count

You can set the sample count explicitly 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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
<param name=chart value="line">
 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

 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.ChartApplet
 archive=chart.jar width=640 height=200>
<param name=chart value="line">
<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=line&
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 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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="23,12,45,34,56">
</applet>

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="12,-23,-34,45,56">
</applet>


2.2 Setting explicit range

You can control the range explicitly by setting the range and lowerRange parameters.

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="12,-23,-34,45,56">
<param name=range value=60>
<param name=lowerRange value=-40>
</applet>

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="12,-23,-34,45,56">
<param name=range value=-40>
<param name=lowerRange value=60>
</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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="20,10,40,30,50">
<param name=rangeAdjusterOn value="true">
<param name=rangeAdjusterPosition value="left">
</applet>


2.8 Multiple 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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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).

<applet code=com.objectplanet.chart.ChartApplet
archive=chart.jar width=250 height=140>
<param name=chart value="line">
<param name=seriesCount value="3">
<param name=sampleValues_0 value="10,30,20,50,40">
<param name=sampleValues_1 value="3,6,3,3,2">
<param name=sampleValues_2 value="120,230,340,90,180">
<param name=sampleColors value="red,green,blue">
<param name=seriesRange_1 value="2">
<param name=seriesRange_2 value="3">
<param name=rangeOn_2 value="true">
<param name=rangeOn_3 value="true">
<param name=rangeColor value="red">
<param name=rangeColor_2 value="green">
<param name=rangeColor_3 value="blue">
<param name=rangePosition_2 value="left">
<param name=multiColorOn value=true>
</applet>

multiple range parameters
range_N  sets the second range's upper value
lowerRange_N  sets the second range's lower value
rangeStep_N  sets the range step for the second range
rangePosition_N  sets the range position for the second range
rangeColor_N  sets the color of the second range's ticks and value labels
rangeAxisLabel_N  sets the second range axis label
rangeAxisLabelAngle_N  sets the angle of the second range axis label
rangeDecimalCount_N  sets the decimal count used for the second range axis
rangeAdjusterOn_N  turns on the second range adjuster
rangeAdjusterPosition_N  sets the position of the second range adjuster


2.9 Multiple 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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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).

<applet code=com.objectplanet.chart.ChartApplet
archive=chart.jar width=250 height=140>
<param name=chart value="line">
<param name=seriesCount value="4">
<param name=sampleValues_0 value="10,30,20,50,40">
<param name=sampleValues_1 value="3,6,3,3,2">
<param name=sampleValues_2 value="120,230,340,90,180">
<param name=seriesRange_1 value="2">
<param name=seriesRange_2 value="3">
<param name=rangeOn_2 value="true">
<param name=rangeOn_3 value="true">
<param name=rangeAdjusterOn value="true">
<param name=rangeAdjusterOn_2 value="true">
<param name=rangeAdjusterOn_3 value="true">
<param name=rangeAdjusted_1 value="all">
<param name=multiColorOn value=true>
</applet>


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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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 otside the sample points on the grid.

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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 explicitly set the legend colors.

<applet code=com.objectplanet.chart.ChartApplet  width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="20,10,40,30,50">
<param name=valueLabelsOn value="true">
<param name=valueLabelPrefix value="$">
</applet>


3.7 Anywhere labels

You can set any label at any place by using label_N parameter. The parameter takes absolute or relative coordinates.

<applet code=com.objectplanet.chart.ChartApplet
 width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="10,30,20,50,40">
<param name=label_0 value="label 1, 40, 40">
<param name=label_1 value="label 2, 0.5, 0.8">
<param name=label_2 value="label 3, 0.85, 0.4">
</applet>

The label can point to any sample if you specify the index and series of the sample. In this case the label can be dragged using the mouse.

<applet code=com.objectplanet.chart.ChartApplet
 width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="10,30,20,50,40">
<param name=label_0 value="label 1, 40, 40, 1, 0">
<param name=label_1 value="label 2, 0.5, 0.8, 3, 0">
</applet>

An URL adress can be assigned to a label using labelURL_N parameter. In this case a new web page is opened when user clicks the label.

<applet code=com.objectplanet.chart.ChartApplet
 width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="10,30,20,50,40">
<param name=label_0 value="label 1, 40, 40">
<param name=label_1 value="label 2, 0.9, 0.6, 2, 0">
<param name=labelURL_0 value="objectplanet.com">
<param name=labelURL_1 value="www.objectplanet.com/EasyCharts">
</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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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 Line stroke

Set the line style: dashed, dotted, etc...

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=seriesCount value="3">
<param name=sampleValues_0 value="68,75,46,12,23">
<param name=sampleValues_1 value="34,34,14,31,25">
<param name=sampleValues_2 value="21,44,34,66,67">
<param name=lineWidth value="1,2,3">
<param name=lineStroke value="1|2,8|4,12|5|2|5">
</applet>


5.9 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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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="point">
</applet>

Use the sampleHighlightImage parameter to set an image to highlight all sample points. Use sampleHighLightImage_N parameter to set an image to highlight all samples in the serie. Use sampleHighlightImage_N_M to highlight the specific sample.

<applet code=com.objectplanet.chart.ChartApplet width=200 height=140>
<param name=chart value="line">
<param name=seriesCount value="3">
<param name=sampleValues_0 value="70,60,80,100,90">
<param name=sampleValues_1 value="60,50,40,60,40">
<param name=sampleValues_2 value="10,30,20,40,10">
<param name=sampleHighlightOn value=true>
<param name=sampleHighlightImage value="images/sunny.gif">
<param name=sampleHighlightImage_0 value="images/sunny_clowdy.gif">
<param name=sampleHighlightImage_0_3 value="images/rainy.gif">
<param name=sampleHighlightImage_1_3 value="images/rainy.gif">
<param name=sampleHighlightImage_2_2 value="images/rainy.gif">
</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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.10 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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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. You must include the MAYSCRIPT parameter in the applet tag if you want to call javascript functions.

Have the url point to a web page containing another chart to create drilldown charts.

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140 MAYSCRIPT>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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");

You can put a URL label to any place in the chart and have applet open a new web page when user clicks the label.

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=300 height=200>
<param name=chart value="line">
<param name=sampleValues value="10,20,30,40,50">
<param name=multiColorOn value=true>
<param name=label_0 value="url one, 35, 30">
<param name=label_1 value="url two, 85, 90">
<param name=label_2 value="url three, 140, 60">
<param name=label_3 value="url four, 190, 120">
<param name=label_4 value="url five, 245, 150">
<param name=labelURL_0 value="bar_url_sub.html#one">
<param name=labelURL_1 value="bar_url_sub.html#two">
<param name=labelURL_2 value="bar_url_sub.html#three">
<param name=labelURL_3 value="bar_url_sub.html#four">
<param name=labelURL_4 value="bar_url_sub.html#five">
</applet>

The parameter urltarget, urltarget_N, urltarget_N_M adds a target window where the new web page should be opened. The parameter labelURLTarget and labelURLTarget_N specifies the target widow for the anywhere labels with URLs. 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 explicitly set the chart grid by using the graphInsets parameter.

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<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. The value can either be set to true, or a combination of top,left,bottom,right.

<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="true">
</applet>



Color names: black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow



Copyright (C) 1998-2010 ObjectPlanet, Inc.
phone (+47) 2233 3360 fax (+47) 2233 3361