OFC-2 - Pie Chart Example
This example demonstrates several of the things that you can do with Pie Charts. You can specify an array of "colours" to use as auto-colours. You can specify the colour of the labels and with the patch below you can have the labels automatically pick up the colour of its pie slice. You can also specify whether or not to even display the labels.
You can now set a fixed size radius for your pie chart so that it will not automatically adjust in size to fit the display area. This can be useful if you have several charts you want to be the same size. This is handy sometimes if you have lots of labels because it may do some strange things to try to make them all visible and this allows you to add some sanity to the chart.
TIP: You can include the magic value #radius# during development in a tooltip to help figure out what size radius you want. Make a sizeable chart that you can adjust until you find that perfect size and then check the tooltip to see what the radius shoud be set to.
This example is NOT compatible with the OFC2-Hyperion release but most of it is already included in the OFC2 Development version.
Patch Information
ID #2436345 - Pie Auto-Colour Labels
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 16 December 2008:
Pie Auto-Colour Labels has NOT been included in OFC2
ID #TBD - Pie Highlight by Breakout or Alpha change
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 31 December 2008:
Pie Highlight by Breakout or Alpha change has NOT been included in OFC2
Sample Chart
Here is a link to view the JSON and here is the chart:
Below is a partial listing of the JSON for the Pie Chart shown above.
{
"tip" : "#val# of #total#<br>#percent#\npie radius = #radius#",
"colours" : [
"0x336699", "0x88AACC", "0x999933", "0x666699",
"0xCC9933", "0x006666", "0x3399FF", "0x993300",
"0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC",
"0x663366", "0x9999CC", "0xAAAAAA", "0x669999",
"0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC",
"0x99CCCC", "0x999999", "0xFFCC00", "0x009999",
"0x99CC33", "0xFF9900", "0x999966", "0x66CCCC",
"0x339966", "0xCCCC33" ],
"alpha" : "0.7",
"start-angle" : -90,
"radius":200,
"no-labels":false,
"animate" : true,
"highlight" : null, // null for breakout or "alpha" to change alpha on mouse over
//"label-colour":0, // leave out or set to null for auto-colour labels
"values" : [
{
"value" : 135,
"label" : "Label Num 1 - click to google",
"label-colour":"0xFF0000", // Override the label colour
"on-click":"http://www.google.com"
},
{
"value" : 135,
"label" : "Label Num 2"
},
{
"value" : 0,
"label" : "zero label 3",
"highlight":"alpha"
},
{
"value" : 135,
"label" : "" // Do not display a label for this slice
},
The "tip" allows you to specify what you want displayed in the tool tip that pops up when you mouse over a pie slice or its label and line. These are the magic values that are available:
#label# - The label text for this pie slice
#percent# - The percentage this pie slice represents of the whole pie
#radius# - The radius of the pie
#total# - The total of all the pie slice values added together
#val# - The value of this pie slice
"colours" is an array of colour values to assign to the pie slices in order. If the number of slices is more than the number of colours then they start repeating. There are 30 colours in this array so you will notice that they start repeating at "label Num 31". These 30 colours are based on the Oracle BLAF (Browser Look And Feel) Colour Pallette.
"alpha" lets you change the transparency of the entire pie nd ranges from 0 to 1. 0 = invisible and 1 = opaque
"start-angle" lets you define where the edge of the first slice should start. Default is 90 degrees which start the pie drawing at the bottom of the chart. This one is set to -90 degrees so the first slice starts at the top of the chart. Zero degrees start the pie on the right side at "3 O'Clock".
"radius" allows you to force the radius of the pis to a certain size. If this is left out of the JSON then the pie will resize itself so that it and all of its labels fit in the display area (as best as it can). Here is a resizeable pie that you can experiment with.
"animate" specifies whether or not to perform the initial animation where the slices spin into place. It does not control the slices popping out when moused over.
"highlight" specifies whether or not a mouse over should cause the slice to break out of the pie or if the pie slice should change its alpha to 1. Valid values are null or "alpha". Notice that pie slices 2, 38, 39 and 40 change their alpha on mouse over instead of breaking out of the pie.
"no-labels" set to true indicates that no labels should be displayed. You can still display them in the tool tips with the #label# magic value. You can turn off an individual pie slice label by setting it to an empty string "" but then it is not available in the tool tip... we might need to implement a "visible" property!!
"label-colour" allows you to specify the colour of all of the labels. If you leave it out of the JSON or set it to null then the labels will be the same colour as its pie slice (using this patch). You can also override an individual pie slice label colour as is done in the "Label Num 1 - click to google" pie slice definition.
Notice the "on-click" property in the definition of the first label. When you mouse over that pie slice the mouse changes to a hand to indicate that it can be clicked on. When you do click on it, your browser will open the Google web site.
Each Pie Slice must have a "value" paramater or the pie will not display. The value can be any number:
negative values - are not displayed but they do use the next auto-colour
zero value - is displayed as a hair line with a label
positive values - are displayed as slice taking up its value percentage of all slice summed
Each Pie Slice can have a "label" that can be displayed as a label and/or in a tool tip.
Each Pie Slice can define an "on-click" URL or event that is invoked when clicked on.
Each Pie Slice can also override many of the values defined for the pie as whole such as colour, label-colour, alpha, etc.
There are other parameters that can be defined such as "font-size" and "gradient-fill" and probably others. Stay tuned and I will try to get them all documented.
(8-Mar-2009) Use the new "on-click-window" property to specify where an on-click URL should be displayed
(slices 31, 35, 36, and 37).
The valid values are:
"_blank" = open URL in a new window (default)
"_parent" = open URL in the parent of the current frame
"_self" = open URL in the current frame in the current window
"_top" = open URL in the top-level frame in the current window