Open Flash Chart Version 2 – JSON File Definition

Tags Series Type Attributes Object

NOTE: Items in bold red represent patches that may or may not be added to OFC-2.

The “tags” plot type is used to place a set of tags at user specified (X, Y) points. The tags are independent of the other plots but can be positioned at the same points as the other plots so that the tags are aligned with them. Of course a tag can be placed anywhere in the chart whether or not it is near a point or bar of another plot.

{

"type":"tags",

"font":"Verdana",

"font-size":10,

"colour":"#000000",

"pad-x":4,

"pad-y":4,

"rotate":0,

"align-x":"center",

"align-y":"above",

"text":"$#y#\n#x#",

"values":[

{"x":0,"y":9},

{"x":1,"y":6, "align-y":"below"},

{"x":5,"y":7, "font":"Arial", "bold":true},

{"x":6,"y":6, “on-click”:”http://www.google.com”},

{"x":7,"y":9}

OBJECT	ATTRIBUTE	VALID VALUES	DEFAULT	NOTES
				This table defines attributes for a tags element object
	“type”	“tags”	undefined	Must be set to “tags” to define a tags series.
	“text”	User defined text	“[#x#,#y#]”	User defined text to apply as default for all tags. Magic Values will be replaced based on the X and Y value of the tag location. * See the Magic Values section below
	“colour”	“#RRGGBB” hex string	“#000000”	Defines the color of the text (default black)
	“font”	Name of a font	Verdana	Defines the font to be used for the text
	“font-size”	Number	12	Defines the font size
	“bold”	true or false	false	Specifies whether the text should be bold
	“underline”	true or false	false	Specifies whether the text should be underlined
	“align-x”	“center” “left” “right”	“center”	“center” aligns the tag centered horizontally on the X line “left” aligns the tag to the left of the X line “right” aligns the tag to the right of the X line
	“align-y”	“above” “below” “center”	“above”	“above” aligns the tag above the Y line “below” aligns the tag below the Y line “center” aligns the tag centered vertically on the Y line
	“pad-x”	number	4	Number of pixels to move the tag left or right after it has been aligned (ignored if aligned center)
	“pad-y”	number	4	Number of pixels to move the tag up or down after it has been aligned (ignored if aligned center)
	“background”	“#RRGGBB” hex string	undefined	Defines the color of the background of the text field
	“alpha”	0 to 1	1	Specifies the alpha value for the tag. 0 is invisible to 1 is opaque
	“border”	true or false	false	Specifies whether or not to draw the border around the text field
	“on-click”	URL action	undefined	Specifies a URL or action to invoke when clicked
	“values”	Array of value objects defining tags	[...]	Defines an array of tags to be placed * See “values” definition table below.

Definition of the “values” array of tag objects within the “tags” type element object. Any of the values above can be overridden for each individual tag.

OBJECT	ATTRIBUTE	VALID VALUES	DEFAULT	NOTES
				This table defines tag objects within the “values” array for a tags element object
	“x”	Any number	undefined	Specifies the X component for the tag.
	“y”	Any number	undefined	Specifies the Y component for the tag.
	“radius”	Any number	undefined	Specifies the radius from the center of a pie chart for positioning a tag. * Do NOT specify an “x” or “y” when working with a pie chart.
	“angle”	Any number	undefined	Specifies the angle for positioning a tag on a pie chart. (0 is to the right at 3 O'Clock) * Do NOT specify an “x” or “y” when working with a pie chart.
	“text”	User defined text	“[#x#,#y#]”	User defined text to apply as default for all tags. Magic Values will be replaced based on the X and Y value of the tag location. * See the Magic Values section below
	“colour”	“#RRGGBB” hex string	“#000000”	Defines the color of the text (default black)
	“font”	Name of a font	Verdana	Defines the font to be used for the text
	“font-size”	Number	12	Defines the font size
	“bold”	true or false	false	Specifies whether the text should be bold
	“underline”	true or false	false	Specifies whether the text should be underlined
	“align-x”	“center” “left” “right”	“center”	“center” aligns the tag centered horizontally on the X line “left” aligns the tag to the left of the X line “right” aligns the tag to the right of the X line
	“align-y”	“above” “below” “center”	“above”	“above” aligns the tag above the Y line “below” aligns the tag below the Y line “center” aligns the tag centered vertically on the Y line
	“pad-x”	number	4	Number of pixels to move the tag left or right after it has been aligned (ignored if aligned center)
	“pad-y”	number	4	Number of pixels to move the tag up or down after it has been aligned (ignored if aligned center)
	“background”	“#RRGGBB” hex string	undefined	Defines the color of the background of the text field
	“alpha”	0 to 1	1	Specifies the alpha value for the tag. 0 is invisible to 1 is opaque
	“border”	true or false	false	Specifies whether or not to draw the border around the text field
	“on-click”	URL action	undefined	Specifies a URL or action to invoke when clicked

Magic Values

Replacement variables can be used in the definition of tool tips and labels so that each one does not have to be individually defined. When the text is actually displayed, the variables below will be replaced with its appropriate value (assuming the variable is valid in the context it is used).

Magic Value	Description
#date#	Formats the X Value as a date string using the local time with format Y-m-d such as: 2008-10-23
#date:_____#	Formats the X Value as a date/time string using the local time with user defined formatting. * See Date Formatting below
#gmdate#	Formats the X Value as a date string using GMT/UTC time with format Y-m-d such as: 2008-10-23
#gmdate:_____#	Formats the X Value as a date/time string using GMT/UTC time with user defined formatting. This is useful for formatting elapsed time in hours, minutes and seconds. * See Date Formatting below
#ydate#	Formats the Y Value as a date string using the local time with format Y-m-d such as: 2008-10-23
#ydate:_____#	Formats the Y Value as a date/time string using the local time with user defined formatting. * See Date Formatting below
#ygmdate#	Formats the Y Value as a date string using GMT/UTC time with format Y-m-d such as: 2008-10-23
#ygmdate:_____#	Formats the Y Value as a date/time string using GMT/UTC time with user defined formatting. This is useful for formatting elapsed time in hours, minutes and seconds. * See Date Formatting below

#x#	Inserts the X Value into the label text at the indicated location(s).
#y#	Inserts the Y Value into the label text at the indicated location(s).

Date Formatting

The user defined date format is implemented to match the formatting performed by the PHP date function. The following table lists the valid format characters and their descriptions.

Format Character	Description	Example returned Values
Day
d	Day of the month, 2 digits with leading zeros	01 to 31
D	A textual representation of the day, three letters	**Mon through Sun**
j	Day of the month without leading zeros	1 to 31
l (lower case L)	A full textual representation of the day of the week	**Sunday through Saturday**
N	ISO-8601 numeric representation of the day of the week	1 (for Monday) through 7 (for Sunday)
S	English ordinal suffix for the day of the month, 2 characters	st, nd, rd or th. Works well with j
w	Numeric representation of the day of the week	0 (for Sunday) through 6 (for Saturday) * Not Implemented
z	The day of the year (starting from 0)	0 through 365 * Not Implemented
Week
W	ISO-8601 week number of year, weeks starting on Monday	Example: 42 (the 42^nd week in the year) * Not Implemented
Month
F	A full textual representation of a month	**January through December**
m	Numeric representation of a month, with leading zeros	01 through 12
M	A short textual representation of a month, three letters	**Jan through Dec**
n	Numeric representation of a month, without leading zeros	1 through 12
t	Number of days in the given month	28 through 31 * Not Implemented
Year
L	Whether its a leap year	1 if it is a leap year, 0 otherwise * Not Implemented
o	ISO-1806 year number. This has the same value as Y, except that if the ISO week number (W) belongs to the previous or next year, that year is used instead.	* Not Implemented
Y	A full numeric representation of a year, 4 digits	Examples: 1999 or 2003
y	A two digit representation of a year	Examples: 99 or 03
Time
a	Lower case Ante meridiem and Post meridiem	am or pm
A	Upper case Ante meridiem and Post meridiem	AM or PM
B	Swatch Internet time	**000 through 999** * Not Implemented
g	12-hour format of an hour without leading zeros	1 though 12
G	24-hour format of an hour without leading zeros	0 through 23
h	12-hour format of an hour with leading zeros	01 through 12
H	24-hour format of an hour with leading zeros	00 through 23
i	Minutes with leading zeros	00 through 59
s	Seconds with leading zeros	00 through 59
u	Microseconds	Example: 54321 * Not Implemented
Timezone
e	Timezone identifier	Examples: UTC, GMT * Not Implemented
I	Whether or not the date in in daylight saving time	1 if Daylight Saving Time, 0 otherwise * Not Implemented
O	Difference to Greenwich time (GMT) in hours	Example: +0200
P	Difference to Greenwich time (GMT) in hours with colon between hours and minutes	Example: +02:00 * Not Implemented
T	Timezone abbreviation	Examples: EST, MDT * Not Implemented
Z	Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east is always positive.	**-43200 through 50400**
Full Date.Time
c	ISO 8601 date	Example: 2004-02-12T15:19:21+00:00 * Not Implemented
r	RFC 2822 formatted date	Example: Thu, 21 Dec 2000 16:0107 +0200
U	Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)	Example: 1185080400 is July 22 2007 00:00:00

Any character that is not one of the above format characters is printed as-is.

* Escaping a format character with a backslash so that it passes through and prints is Not Implemented

Examples:

#date:Y-m-d at H:i# would format X as 2008-09-18 at 09:46

#date:g:i:s a# would format X as 2:14:52 pm

#ygmdate:H:i# would format Y as 02:14