 | Area Graph Parameter Reference |
 [ Home ] [ Products ] [ Downloads ] [ Purchase ][ Support ] [ About Us ] |
Area Graph Full Parameter Reference
Whichever method ( file, html code, server process etc.) you choose to supply the graph with the configuration options the various parameters all follow the same format of:-
[Parameter Name] , [Parameter Value].
Please Note : Parameter names are case sensitive. ( i.e. 'grid' is not the same as 'Grid' ).General Graph Properties
| Name | Description | Example |
| width | Specifies the width of the graph display area If using the Applet form of the graph this parameter is specified within the <APPLET> tag If using the Servlet form of the graph this parameter should be specified in the configuration file. Range of Values : Integer representing the number of pixels |
File Example : width: 500 Html Code Example : <APPLET ..... WIDTH="500" .....> |
| height | Specifies the height of the graph display area If using the Applet form of the graph this parameter is specified within the <APPLET> tag If using the Servlet form of the graph this parameter should be specified in the configuration file. Range of Values : Integer representing the number of pixels |
File Example : height: 450 Html Code Example : <APPLET ..... HEIGHT="450" .....> |
| ndecplaces | Defines the number of decimal places to use when displaying segment values. Range of Values : Positive Integer |
File Example : ndecplaces: 2 Html Code Example : <PARAM name="ndecplaces" value="2"> |
| nSeries | Specifies the number of series of data Range of Values : Positive Integer |
File Example : nSeries: 3 Html Code Example : <PARAM name="nSeries" value="4"> |
| BgColor | Specifies the background color for the whole chart area Range of Values : Color Definition (click here for More on Defining colors) |
File Example : BgColor: #FFFFFF Html Code Example : <PARAM name="BgColor" value="white"> |
Grid Properties
| Name | Description | Example |
| grid | Specifies whether the graph grid should be drawn. Range of Values : true or false |
File Example : grid: true Html Code Example : <PARAM name="grid" value="false"> |
| gridstyle | Defines the line style with which to draw the grid lines. Range of Values : Positive Integer 1 - Solid Line 2 - Dotted Line 3 - Dashed, short 4 - Dashed, long |
File Example : gridstyle: 2 Html Code Example : <PARAM name="gridstyle" value="2"> |
| axis | Specifies whether the axis should be drawn Range of Values : true or false |
File Example : axis: true Html Code Example : <PARAM name="axis" value="false"> |
| gridypos | Specifies the position of the bottom of the grid Range of Values : Positive Integer |
File Example : gridypos: 350 Html Code Example : <PARAM name="gridypos" value="400"> |
| gridxpos | Specifies the position of the left hand side of the grid Range of Values : Positive Integer |
File Example : gridxpos: 75 Html Code Example : <PARAM name="gridxpos" value="100"> |
| vSpace | Specifies the size in pixels of each y-axis grid portion Range of Values : Positive Integer |
File Example : vSpace: 30 Html Code Example : <PARAM name="vSpace" value="40"> |
| hSpace | Specifies the size in pixels of each x-axis grid portion Range of Values : Positive Integer |
File Example : hSpace: 30 Html Code Example : <PARAM name="hSpace" value="40"> |
| gridbg | Specifies the background color for the grid area Range of Values : Color Definition (click here for More on Defining colors) |
File Example : gridbg: #808080 Html Code Example : <PARAM name="gridbg" value="light blue"> |
| GridBackgroundImage | provides the ability to specify an image for the background of the grid area. Range of Values : URL to image file |
File Example : GridBackgroundImage: gridbg.gif Html Code Example : <PARAM name="GridBackgroundImage" value="gridbg.gif"> |
| gridcolor | Specifies the color of the grid lines Range of Values : Color Definition (click here for More on Defining colors) |
File Example : gridcolor: #A0A0A0 Html Code Example : <PARAM name="gridcolor" value="grey"> |
| axiscolor | Specifies the color of the axis lines Range of Values : Color Definition (click here for More on Defining colors) |
File Example : axiscolor: #000000 Html Code Example : <PARAM name="axiscolor" value="black"> |
| floorcolor | Specifies the floor color for the grid area. (not relevant in 2D mode). Range of Values : Color Definition (click here for More on Defining colors) |
File Example : floorcolor: red Html Code Example : <PARAM name="floorcolor" value="#FF0000"> |
| nPoints | Specifies the maximum number of data points to a series. This is used to determine the number of vertical grid segments. If this parameter is not present then the applet will automatically calculate this figure from the data supplied. Range of Values : Positive Integer |
File Example : nPoints: 12 Html Code Example : <PARAM name="nPoints" value="12"> |
| nRows | Specifies the number of horizontal grid rows. If this parameter is not present then a value of 10 will be used. Range of Values : Positive Integer |
File Example : nRows: 5 Html Code Example : <PARAM name="nRows" value="8"> |
Scale Properties
| Name | Description | Example |
| autoscale | Specifies whether automatic scaling should be used Range of Values : true or false |
File Example : autoscale: true Html Code Example : <PARAM name="autoscale" value="false"> |
| chartScale | If "autoscale" if off then this specifies the value each y-grid line represents. Range of Values : Positive Double / Float / Decimal |
File Example : chartScale: 100 Html Code Example : <PARAM name="chartScale" value="0.2"> |
| chartStartY | If "autoscale" if off then this specifies the starting value for the y-axis. Range of Values : Positive or Negative Double / Float / Decimal |
File Example : chartStartY: 0 Html Code Example : <PARAM name="chartStartY" value="-500"> |
3D Properties
| Name | Description | Example |
| 3D | Specifies whether the graph should be drawn in 2D or 3D Range of Values : true or false |
File Example : 3D: false Html Code Example : <PARAM name="3D" value="true"> |
| depth3D | depth of the 3D effect Range of Values : Positive Integer |
File Example : depth3D: 15 Html Code Example : <PARAM name="depth3D" value="25"> |
| outline | Specifies whether the 3D line segments should be outlined. This parameter has no effect if the chart is running in 2D mode. Range of Values : true or false |
File Example : outline: true Html Code Example : <PARAM name="outline" value="false"> |
Legend Properties
| Name | Description | Example |
| legend | Turns the automatic legend on or off. Range of Values : true or false |
File Example : legend: true Html Code Example : <PARAM name="legend" value="true"> |
| legendfont | Defines the font for the legend. Range of Values : Font Definition (click here for More on Defining fonts) |
File Example : legendfont: Arial,N,10 Html Code Example : <PARAM name="legendfont" value="Arial,B,12"> |
| legendposition | Defines the x,y position of the top left of the legend. Range of Values : integer number (X value), integer number (Y value) |
File Example : legendposition: 50,15 Html Code Example : <PARAM name="legendposition" value="345,15"> |
| legendtitle | The text for legend title. Range of Values : Text |
File Example : legendtitle: Products Html Code Example : <PARAM name="legendtitle" value="Products"> |
| legendBackground | Legend background color Range of Values : Color Definition (click here for More on Defining colors) |
File Example : legendBackground: #CCEEFF Html Code Example : <PARAM name="legendBackground" value="#EEEEEE"> |
| legendBorder | Legend border color Range of Values : Color Definition (click here for More on Defining colors) |
File Example : legendBorder: light grey Html Code Example : <PARAM name="legendBorder" value="#A0A0A0"> |
| legendtextColor | Legend text color Range of Values : Color Definition (click here for More on Defining colors) |
File Example : legendtextColor: black Html Code Example : <PARAM name="legendtextColor" value="#000000"> |
X axis Labels
|
The x-axis labels are supplied by the labelN parameter, where N represents an integer number starting with 1. There should be the same number of labels as the number of data points in each series (ie. as specified by the nCols parameter above). For example if there are 2 series of data each with 4 data values, File Example : label1: Quarter 1 label2: Quarter 2 label3: Quarter 3 label4: Quarter 4 Html Code Example : <PARAM name="label1" value="Quarter 1"> <PARAM name="label2" value="Quarter 2"> <PARAM name="label3" value="Quarter 3"> <PARAM name="label4" value="Quarter 4"> |
| Name | Description | Example |
| labelOrientation | Defines the orientation of the x labels Range of Values : one of the following:- 0 - Horizontal Left to Right 1 - Vertical Top to Bottom 2 - 45 degree angle LtoR, BtoT 3 - Vertical Bottom to top 4 - Horizontal (common end) 5 - 45 degree LtoR TtoB 6 - Vertical (common end) |
File Example : labelOrientation: 0 Html Code Example : <PARAM name="labelOrientation" value="2"> |
| labelsY | Specifies the vertical position of the x-axis labels Range of Values : Integer Value. If this value is set to -1 then the applet will calculate this figure based upon the grid position. |
File Example : labelsY: 250 Html Code Example : <PARAM name="labelsY" value="-1"> |
| xFont | Defines the font for the x labels Range of Values : Font Definition (click here for More on Defining fonts) |
File Example : xFont: Arial,I,14 Html Code Example : <PARAM name="xFont" value="Arial,N,10"> |
| labelcolor | Specifies the color of the x-axis labels. Range of Values : Color Definition (click here for More on Defining colors) |
File Example : labelcolor: black Html Code Example : <PARAM name="labelcolor" value="#000000"> |
Y axis Labels
| Name | Description | Example |
| ylabels | Specifies whether y-axis labels should be displayed. Range of Values : true or false |
File Example : ylabels: true Html Code Example : <PARAM name="ylabels" value="true"> |
| yFont | Defines the font for the y labels Range of Values : Font Definition (click here for More on Defining fonts) |
File Example : yFont: Arial,N,10 Html Code Example : <PARAM name="yFont" value="Arial,N,10"> |
| Ycolor | Specifies the color of the y axis labels Range of Values : Color Definition (click here for More on Defining colors) |
File Example : Ycolor: blue Html Code Example : <PARAM name="Ycolor" value="#3333FF"> |
| labelsYpre | Specifies any characters to placed at the beginning of the Y axis labels e.g. a currency symbol. Range of Values : Alphanumeric |
File Example : labelsYpre: £ Html Code Example : <PARAM name="labelsYpre" value="$"> |
| labelsYpost | Specifies any characters to placed at the end of the Y axis labels e.g. a measurement or percent symbol. Range of Values : Alphanumeric |
File Example : labelsYpost: Kg Html Code Example : <PARAM name="labelsYpost" value="%"> |
Graph Titles
| Name | Description | Example |
| title | Defines the main title for the graph. This parameter is made up of four elements each separated by a | character. The four elements represent, Title Text, Title Position, Font and Text Color. Range of Values : Text | Position | Font definition | Color definition |
File Example : title: Sales by Quarter|50,20|Arial,BI,18|grey Html Code Example : <PARAM name="title" value="Sales by Quarter|50,20|Arial,B,18|#888888"> |
| xtitle | Defines the x axis title for the graph. This parameter is made up of four elements each separated by a | character. The four elements represent, Title Text, Title Position, Font and Text Color. Range of Values : Text | Position | Font definition | Color definition |
File Example : xtitle: Year 2006|200,400|Arial,B,16|#A0A0A0 Html Code Example : <PARAM name="xtitle" value="Year 2006|200,400|Arial,B,16|grey"> |
| ytitle | Defines the y axis title for the graph. This parameter is made up of four elements each separated by a | character. The four elements represent, Title Text, Title Position, Font and Text Color. Range of Values : Text | Position | Font definition | Color definition |
File Example : ytitle: Value $|10,300|Arial,B,16|##44FF44 Html Code Example : <PARAM name="ytitle" value="Value $|10,300|Arial,B,16|green"> |
Series Specifications
|
For each series of data, 7 characteristics can be defined:- Line Color Point Style Point Size Fill Legend text Legend Link Legend Link Target frame or window These are supplied via the "seriesN" (where N is an integer ranging from 1 to the total number of series) parameter separated by a | character. Range of Values : Color definition |Integer between 1 & 7|Integer|true or false|Legend Text. (click here for More on Defining colors) For the Point style the following symbols are represented, 0 - Dot ( default ) 1 - Cross ( + ) 2 - Cross ( X ) 3 - Box 4 - Triangle 5 - Diamond 6 - Circle 7 - Hexagon Each of the symbols can be outline or solid by setting the fill element to false or true. For example if we have 3 series of the data, File Example : series1: #F00000|6|16|false|Series 1 series2: #F000F0|6|16|true|Series 2 series3: #00F000|0|10|false|Series 3 Html Code Example : <PARAM name="series1" value="#F00000|6|16|false|Series 1"> <PARAM name="series2" value="#F000F0|6|16|true|Series 2"> <PARAM name="series3" value="#00F000|0|10|false|Series 3"> |
Target Lines
|
The graph allows for the incorporation of up to 20 target lines. This is achieved via the "targetN" parameter, where N can range from 1 to 20. The targetN parameter is made up of 5 elements each separated by a | character. The 5 elements represent, Color, Line Style, Value, Label, Label Font. For example if we require a Green Target line with a value of 5500, with a label of "Target" we would have, File Example : target1: 0,125,0|4|5500|Target|Arial,N,10 Html Code Example : <PARAM name="target1" value="0,125,0|4|5500|Target|Arial,N,10"> |
Trend Lines
|
The graph allows for the incorporation of up to 20 trend lines. This is achieved via the "trendN" parameter, where N can range from 1 to 20. The trendN parameter is made up of seven elements each separated by a | character. The seven elements represent, Color, Start Point, End Point, Start Value, End Value, Label, Label Font. For example if we require a Red trend line to run from data point 3 to 10 with a starting value of 7500 and an end value of 10500 with a label of "Trend 1" we would have, File Example : trend: 175,0,0|3|10|7500|10500|trend 1|Arial,N,10 Html Code Example : <PARAM name="trend1" value="175,0,0|3|10|7500|10500|trend 1|Arial,N,10"> |
Free Form Text
|
In addition to the title parameter, the graph allows for an unlimited number of lines of text to be added to the graph image. This is achieved via the "textN" parameter, where N is a positive integer starting with 1. This feature is particularly useful where you wish to add notes or individual titles to each pie. As with the title, the textN parameter is made up of four elements each separated by a | character. The four elements represent, Text, Title Position, Font and Text Color. Range of Values : Text | Position | Font definition | Color definition. File Example : text1: Note :|80,60|TimesRoman,N,12|0,0,255 text2: New product range|80,80|TimesRoman,N,12|0,0,0 text3: launched during|80,100|TimesRoman,N,12|0,0,0 text4: quarter 2.|80,120|TimesRoman,N,12|0,0,0 Html Code Example : <PARAM name="text1" value="Note :|80,60|TimesRoman,N,12|0,0,255"> <PARAM name="text2" value="New product range|80,80|TimesRoman,N,12|0,0,0"> <PARAM name="text3" value="launched during|80,100|TimesRoman,N,12|0,0,0"> <PARAM name="text4" value="quarter 2.|80,120|TimesRoman,N,12|0,0,0"> |
Free Form Images
|
The graph allows for any number of images/icons to be added to the graph image. This is achieved via the "imageN" parameter, where N is a positive integer starting with 1. This feature is particularly useful where you wish to incorporate a company / product logo into the graph image. It can also be used to incorporate a custom designed legend into the graph image (in this case remember to turn off the automatic legend). The imageN parameter is made up of three elements each separated by a , (comma) character. The three elements represent, Image URL, X position, Y position. Range of Values : URL , X position , Y position. File Example : image1: ./images/logo.gif,0,0 image2: ./images/legend.gif,210,0 Html Code Example : <PARAM name="image1" value="./images/logo.gif,0,0"> <PARAM name="image2" value="./images/legend.gif,210,0"> |
