JPowered.com

Active Graphs and Charts

Active Graphs and Charts

 

Parameter Reference

The graphing software allows many of the properties to be set in order to tailor an implementation. The following parameters are all optional and if not set then default values will be used.

General Graph Properties

Parameter Description Values Example
width The width of the graph area Positive integer number 600
height The height of the graph area Positive integer number 400
threeD specifies whether the graph should be drawn in 3D or not Boolean 'true' or 'false' true
depth depth of the 3D effect positive integer 20
animationTime Time in milliseconds for the animation effects to complete upon start Positive integer number 750
ndecplaces The number of decimal places to display for numeric values Positive integer or zero 2
ndecplaces2 The number of decimal places to display for numeric values of items attached to the second scale Positive integer or zero 0
displayValues Switch which tells the chart whether to display values on the bars/points Boolean - true or false true
backgroundColor Background color of the chart area Color Value (see Color Definitions for formats. #FFFFFF
backgroundImage Set a background image for the chart area URL to Image file ./images/background.jpg

Graph Title

Parameter Description Values Example
title The graph main title Text Sales by Quarter
titleFontSize Title font size Positive integer 18
titleFontWeight Sets the font weight normal, lighter, bolder normal
titleFontStyle Sets the font style normal, bold, italic bold
titleFontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
titleFontColor Sets the font color Color Value (see Color Definitions for formats. #222222

X Axis Title

Parameter Description Values Example
xTitle X-Axis title Text Months - 2012
xTitleFontSize Title font size Positive integer 18
xTitleFontWeight Sets the font weight normal, lighter, bolder normal
xTitleFontStyle Sets the font style normal, bold, italic bold
xTitleFontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
xTitleFontColor Sets the text color Color Value (see Color Definitions for formats. #444444

Y Axis Title

Parameter Description Values Example
yTitle The text for the left hand y-axis scale Text string Sale value
yTitleFontSize Title font size Positive integer 18
yTitleFontWeight Sets the font weight normal, lighter, bolder normal
yTitleFontStyle Sets the font style normal, bold, italic bold
yTitleFontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
yTitleFontColor text color Color Value (see Color Definitions for formats. #000

Second Y Axis Title

Parameter Description Values Example
y2Title The text for the left hand y-axis scale Text string Sale value
y2TitleFontSize Title font size Positive integer 18
y2TitleFontWeight Sets the font weight normal, lighter, bolder normal
y2TitleFontStyle Sets the font style normal, bold, italic bold
y2TitleFontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
y2TitleFontColor text color Color Value (see Color Definitions for formats. #000

Grid

Parameter Description Values Example
gridBackgroundColor the background color of the grid area Color Value (see Color Definitions for formats. #222222
gridBanding if true the every other grid row will be a darker shade of the background color Boolean, true or false true
gridOpacity specifies the opacity of the grid area, 0.0 is totally transparent and 1.0 is totally opaque decimal number between 0.0 and 1.0 0.7
gridBackgroundImage allows and image to be set as the background to the grid area a URL to an image file ./images/theBacground.jpg
gridLineWidth specifies the line width of the grid lines positive integer 3
gridLineStyle sets the line drawing style. a text string made of charscter '-', '.' and ' ' (space) which define the stroke of the line. A solid line would be set with a single dash '-' whilst a dotted line would be '..' - . -
gridAxisWidth width of the axis lines positive integer 3
gridAxisStyle sets the line drawing style. a text string made of charscter '-', '.' and ' ' (space) which define the stroke of the line. A solid line would be set with a single dash '-' whilst a dotted line would be '..' - . -
gridNRows The number of grid rows positive integer 10
gridNCols The number of grid columns positive integer 6
gridColSpacing the width of each grid column positive integer 30
gridRowSpacing the width of each grid row positive integer 40
gridxPos the x position of the bottom left corner of the grid positive integer 75
gridyPos the position of the bottom left corner of the grid. 0 represents the top of the drawing canvas. positive integer 425

Graph Scales

This set of parameters are all optional. By default the graph software will automatically calculate the best fit scale for the data being supplied. However if you wish to provide a fixed scale then use the following parameters to override the auto scale.

Parameter Description Values Example
ystart the start value for the left hand y axis scale Decimal value 0.00
yinterval the increment by which the scale will increase for each grid line Decimal value 2.50
y2start the start value for the right hand y axis scale Decimal value 0.00
y2interval the increment by which the scale will increase for each grid line Decimal value 2.50
xstart the start value for the botton x axis scale Decimal value 0.00
xinterval the increment by which the scale will increase for each grid line Decimal value 2.50
x2start the start value for the top x axis scale Decimal value 0.00
x2interval the increment by which the scale will increase for each grid line Decimal value 2.50

Pre and Post Value additions

Parameter Description Values Example
xLabelPre a character or text string to prepend the x label values text string $
xLabelPost a character or text string to append the x label values text string Kg
yLabelPre a character or text string to prepend the y label values text string $
yLabelPost a character or text string to append the y label values text string m/s
x2LabelPre a character or text string to prepend the x label values of the second scale text string $
x2LabelPost a character or text string to append the x label values of the second scale text string Kg
y2LabelPre a character or text string to prepend the y label values of the second scale text string $
y2LabelPost a character or text string to append the y label values of the second scale text string m/s

X axis Labels

Parameter Description Values Example
xLabels Sets the column labels for vertical style charts a set of text items separated by the | (pipe) character January|February|March|April|May|June|July|August|September|October|November|December
xfontColor text color of the x labels Color Value (see Color Definitions for formats. #333
xopacity specifies the opacity of the grid area, 0.0 is totally transparent and 1.0 is totally opaque decimal number between 0.0 and 1.0 0.7
xfontSize sets the font size in pixels positive integer 12
xfontWeight Sets the font weight normal, lighter, bolder normal
xfontStyle Sets the font style normal, bold, italic bold
xfontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
xtextAnchor tells the graph which part of the text to line up start, middle or end end
xrotation the angle of text rotation of the labels a positive integer between 0 and 360 315

Legend Properties

Parameter Description Values Example
legendXpos x position of the top left of the legend area positive integer 450
legendYpos y position of the top left of the legend area positive integer 50
legendPadding the padding in pixels between the legend border and the text positive integer 6
legendRoundRadius the size of the rounded corners, set this to 0 for square corners positive integer 6
legendOpacity specifies the opacity of the grid area, 0.0 is totally transparent and 1.0 is totally opaque decimal number between 0.0 and 1.0 0.5
legendBackground specifies whether to draw a graph legend boolean, true or false true
legendBackgoundColor background color of the legend area Color Value (see Color Definitions for formats. #ddd
legendBorderColor border color of the legend Color Value (see Color Definitions for formats. #888
legendBorderWidth line width of the border positive integer 2
legendStyle set the legend to be drawn either vertically or horizontally vertical or horizontal horizontal
legendTitle the legend title text, leave blank if no title is required text string Widget Types
legendTitleFontSize set the font size for the legend title text positive integer 14
legendTitleFontWeight Sets the font weight normal, lighter, bolder normal
legendTitleFontStyle Sets the font style normal, bold, italic normal
legendTitleFontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
legendTitleFontColor text color for the legend title Color Value (see Color Definitions for formats. #000
legendFontSize font size of the legend text positive integer 12
legendFontWeight Sets the font weight normal, lighter, bolder normal
legendFontStyle Sets the font style normal, bold, italic bold
legendFontFamily Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
legendFontColor text color of the legend text Color Value (see Color Definitions for formats. #000
legendLabels for most chart style the legend labels are set by setting the title element of the series parameter. However for for Pie and Doughnut style charts the labels should be set with this parameter. String of [title] : [color] pairs Product A : #88c; Product B : #2c3; Product C : #c23;

Target Lines

Target lines can be added the graph via the 'targetN' parameter, where N is a positive integer.

The target line parameter allows many properties of the line to be set (see table below) for each line added.

For example to add 2 target lines to a graph which represent and Upper and Lower limit the following would be supplied in the config:-

Property Description Values Example
value Value at which the target line should be drawn Decimal value: 450.6;
color the color of the target line A color definition color: #e94933;
text text to be displayed with the line String text: Upper limit;
linewidth the line thickness Integer linewidth: 3;
scale whether the target line should be draw with reference to the 'left' or 'right' y axis scale (default is left). String scale: left;
fontSize Size of the text Integer fontSize: 12;
fontFamily font face of the text String fontFamily: Helvetica, Arial, sans-serif;
fontWeight Weight of the text font, 'normal' or 'bold' String fontWeight: normal;

Bar Properties

Parameter Description Values Example
barWidth for bar style graphs this parameter specifies the width of the bars positive integer 30
barGap for bar style graph this is the gap between groups of bars positive integer 20

Pie, Ring and Doughnut Properties

Parameter Description Values Example
ringWidth for Ring and Doughnut style charts this parameter specifies the width of the rings positive integer 30
pieTitleSize font size of the Title text positive integer 12
pieTitleWeight Sets the font weight normal, lighter, bolder normal
pieTitleStyle Sets the font style normal, bold, italic bold
pieTitleFont Sets the font face valid font face text Helvetica, Arial, Verdana, sans-serif
pieTitleColor text color of the legend text Color Value (see Color Definitions for formats. #333