OFC-2 - Tags!!
This patch implements a new "tags" type series. I called it "tags" because there are already so many "labels" in the JSON and the code that it would probably make things confusing. You might think of this as a scatter plot with text fields (I don't want to say labels!!) for the dot. You specify the "text" you want to display and an "x" and a "y" where it should be put. Remember that for bar charts and line plots the first bar and first point is on "x" = 0.
You have complete control of the characteristics of the text field such as font, size, colour, rotate and several others. You can specify alignment and padding so that you can position the text in relation to its location point. The most common alignment is probably "align-x":"center" and "align-y":"above" so that the label is positioned above the point (or top of a bar) and then you can specify a pad to move it further up or down from there.
The tags also implement an on-click event.
18 Jan 2009 - New enhancement - Clickable tags now change the cursor to a hand pointer to show that it is clickable. Also notice that the keys legend at the top of the chart are clickable and will toggle hiding and showing elements of the chart.
21 Feb 2009 - New enhancement - Set the new "italic" property to true to display the text in italics. ** Flash sometimes clips part of the last character in this mode so you might need to add a space at the end of the text.
Acknowledgement: islenny posted a modified OFC in October 2008 that implements labels attached to most of the different elements such as bars and line plot points. Thanks for the inspiration!
This example is NOT compatible with the OFC2-Hyperion.
Patch Information
ID #2452191 - Tags
Built with Rev #414 dated 16 December 2008. Patches are uploaded to the SourceForge SVN at OFC2 Patch Tracker
Download a prebuilt SWF and source code on the Downloads page.
As of 19 December 2008:
Tags has NOT been included in OFC2
Sample Chart
Here is a link to view the JSON and the chart is below. Notice the difference in the tags for February and September. The tag for February is actually under the bar because the "tags" series is before the "bar-glass" series in the elements array. You can still see the tag because the bar is semi-transparent but when you mouse over it the tag is hidden by the opaque bar. On the other hand the "tags" series that defines the September tag is after the "bar-glass" series in the elements array so it is always visible on top of the bar.
Here is the JSON for the Tags in the chart above:
{"type":"tags",
"font":"Verdana",
"font-size":10,
"colour":"#000000",
"padding":0,
"rotate":0,
"align-x":"center",
"align-y":"above",
"text":"$#y#",
"values":[
{"x":0,"y":9},
{"x":1,"y":6, "align-y":"below"},
{"x":2,"y":7},
{"x":3,"y":9},
{"x":4,"y":5},
{"x":5,"y":7, "font":"Arial", "bold":true},
{"x":6,"y":6},
{"x":7,"y":9},
// And one using the right axis just because we can
{"x":2,"y":78,"axis":"right", "padding":16, "font-size":20,
"colour":"#00BB00","font":"Arial Black", "rotate":0,
"text":"Click Tag to\nGoogle!!",
"on-click":"http://www.google.com",}
},
...
// Moved this tag to be last in "elements" so it shows up
// on top of the bars instead of under it
{"type":"tags",
"font":"Verdana",
"font-size":10,
"colour":"#000000",
"padding":0,
"rotate":0,
"align-x":"center",
"align-y":"above",
"text":"$#y#",
"values":[
{"x":8,"y":0.5, "rotate":270, "font-size":12,
"text":"click bar to\ngo to google" },
{"x":6,"y":80, "rotate":45, "font-size":14,
"text":"45 degrees\n(not aligned yet)",
"axis":"right", "background":"#AA99", "border":true },
],
},
// Example of annotated points using new "key" property for The_Jackal
{
"type":"tags",
"key":"A - Feb 2008\nWinter Storm",
"font":"Verdana",
"font-size":10,
"border":true,
"id":1,
"background":"#F9F011",
"colour":"#000066",
"pad-x":0,
"pad-y":5,
"rotate":0,
"align-x":"center",
"align-y":"above",
"values":[
{"x":1,"y":6,"text":"A", "font-size":16}
],
},
{
"type":"tags",
"key":"B - April 2008\nMany showers",
"font":"Verdana",
"font-size":10,
"border":true,
"id":1,
"background":"#F9F011",
"colour":"#000066",
"pad-x":15,
"pad-y":5,
"rotate":0,
"align-x":"left",
"align-y":"above",
"values":[
{"x":3,"y":9.5,"text":"B", "font-size":16}
],
},
...
// this is back at the top level of the chart object
"legend":{"position":"right"},
values - An array of points similar to the scatter chart. The points must specify the "x" and the "y" for the location. The "text" can be provided or defined at the higher level as above using magic values.
text - The text to display at each point. These are the magic values that are available:
#x# - The X value where the tag is located
#y# - The Y value where the tag is located
#date# - Treats the X value as a Unix timestamp and formats it like:
#date:___# - Treats the X value as a Unix timestamp with user date formatting
View info on the date formatting (end of page)
colour - The colour of the text.
font - The name of the font to use. If you rotate the tag then you are locked into an embedded Arial and this wil be ginored.
font-size - The size of the font.
bold - true or false
underline - true or false
align-x - How to position the tag relative to the X value:
"center" - The tag will be centered horizontally on the X line (default)
"left" - The tag will be moved to the left of the X line
"right" - The tag will be moved to the right of the X line
* Aligning is only guaranteed to work properly for tags
rotated 0, 90, 180, 270 or 360 degrees.
I don't have the math worked out for other angles :(
align-y - How to position the tag relative to the Y value:
"above" - The tag will be above the Y line (default)
"below" - The tag will be moved below the Y line
"center" - The tag will be centered vertically on the Y line
* Aligning is only guaranteed to work properly for tags
rotated 0, 90, 180, 270 or 360 degrees.
I don't have the math worked out for other angles :(
pad-x - Number of additonal pixels to move the tag left or right (ignored for center alignment)
pad-y - Number of additional pixels to move the tag up or down (ignored for center alignment)
background - Colour for the background of the tag.
alpha - The alpha value (0 to 1) to apply to the tag. 0 is transparent and 1 is totally opaque.
border - true or false - Displays the border around the text field
on-click - specify a URL or an action to invoke when the tag is clicked
axis - "right" indicates that the Y value is based upon the right Y axis.
key (Implemented 28-Feb-2009) specifies text to display in the keys legend ("text" is already used for something else). To make annotated points, specify a single tag in the desired location and then specify the "key" to display in the legened that goes with it. Notice also the top chart level "legend" property used to place the legend on the right side of the chart.
radius and angle (Implemented 15-Mar-2009) can be used with
pie charts to position labels relative to the center of the pie. To place a label in the
center of the pie use radius=0 and angle=0.
Do NOT specify an "x" and "y" if working with a pie chart..