OFC-2 - Keys Legend Enhancements
This patch implements the capability to show a keys legend for Pie Charts just like any other type of chart. This patch also allows you to position the keys legend at the top as it is currently in OFC2 or you can position to the right side of the chart. The right side chart is further configurable as to background color and whether or not it should be shadowed.
18 Jan 2009 - New enhancement - Clickable key tags allow you to invoke an action when the user clicks on a key label. A specialized one ("toggle-visibility") will hide and show the associated plot. You can also include an "id" property to each elements series and create groups that will all hide or show at the same time. This allows you to tie plots, shapes and tags together so that they hide and show as a group. When a series is hidden, the key is changed to a gray colour... I guess this does not help much if the series colour is gray to begin with. The clickable tags work for both the right side legend and the top of chart legend (See the Tags patch for an example with a clickable top of chart legend.)
Acknowledgement: dferbas has an implementation with some cool check boxes which control the visiblity of the associated series. Thanks for the inspiration and I may have to incorporate those check boxes!
Patch Information
ID #TBD - Keys Legend Enhancements
I will generate a patch after the next release of OFC2 because it impacts several files and changes to the infrastructure are in progress.
Download a prebuilt SWF and source code on the Downloads page.
As of 17 January 2009:
Keys Legend Enhancements HAVE NOT been included in OFC2 Development
Sample Charts
This first chart demonstrates a pie chart with a keys legend. You can specify labels that are different from the keys if desired. The keys legend allows you to display a pie chart without any labels but still have a way for the viewer to determine what each slice represents.
Notice that you can click on the key label to show and hide the associated chart elements.
Here is a link to view the JSON. Here is a quick look at the JSON:
"legend":{"position":"right", "visible":true, "bg_colour" : "#FAFAFA"},
"elements" : [
{ "font-size":12,
"tip" : "#key#<br>#val# of #total#\n#percent#\npie radius = #radius#",
"key-on-click":"toggle-visibility",
"values" : [
{"value" : 135.4,
"label" : "Label Num 1",
"text" : "Slice 1"},
{"value" : 135.4,
"text" : "Slice 2"},
{"value" : 135.4,
"label" : "Label Num 3",
"text" : "Slice 3"},
{"value" : 135.4,
"text" : "Slice 4"},
...
By default, the legend is not visible for pie charts so you must set visible to true.
"position":"right" places the legend to the right side of the chart while any other value or if it is left out places the legend at the top of the chart below the title.
"font-size":12 defines the font size that will be used to display the key in the legend. This value can also be overridden at the slice level.
#key# is a new magic value that lets you put the new key in the tooltip.
"text":"key text" defines the key for each slice. The "key text" will be displayed in the keys legend in the same colour as the slice.
"key-on-click":"toggle-visibility" defines the action for clicked labels to be the toggle visibility function. You can also invoke web pages and external callbacks just like the on-click feature for chart elements.
-----
This next chart demonstrates a stacked bar and a bar chart a right side keys legend. Notice that you can click on the key labels to show and hide the associated chart elements. When the "Contracts" bar is hidden or shown it also does the same for the tags element which displays the text above the bars because they both have their "id" property set to the same value.
Here is a link to view the JSON. Here is a quick look at the JSON:
"legend":{"position":"right"},
"elements":[
{"type": "bar_stack",
"colours": ["#FF0000","#0000FF","#000000"],
"id":1
"key-on-click":"toggle-visibility",
"keys": [
{"colour":"#FF0000", "text":"Cost of Goods", "font-size": 12},
{"colour":"#0000FF", "text":"Labor Cost"},
{"colour":"#000000", "text":"Profit"}
],
"font-size":12,
"tip":"#key#<br>#val# / #total#",
"values": [
[1000,{"val":500}, 200],
[1400,{"val":600}, 300],
[800,{"val":300}, 100],
[1400,{"val":600}, 300,
{"val":100, "text":"Bonus :)", "colour":"#00FF00"}],
]
},
{"type": "bar",
"id":2,
"key-on-click":"toggle-visibility",
"colour": "#9933CC",
"text": "Contracts",
"font-size": 12,
"values" : [900,1600,null,1900]
},
{"type":"tags",
"id":2,
...
"values":[{"x":0.2,"y":900,"text":"$900"},
{"x":1.2,"y":1600,"text":"$1,600"},
{"x":3.2,"y":1900,"text":"$1,900"} ],
},
...
"position":"right" places the legend to the right side of the chart while any other value or if it is left out places the legend at the top of the chart below the title.
The "keys" array is how OFC2 defines the keys to display in the legend. The official OFC2 requires that all three properties (colour, text and font-size) be defined. This patch allows the font-size to be defined at the one higher level. Of course the colour and the text have to be defined.
The "text" property for a slice defines the key for each slice. This patch also allows the "keys" array to be filled in with data from the slice definitions. Notice the green "Bonus :)" key is not defined in the "keys" array. It is pulled in while processing the slice definitions.
Another enhancement this patch implements is using the "keys" array to set the key for a slice based on its colour. If the slice does not define a "text" property then the slice's colour is used to look up the appropriate key text.
#key# is a new magic value that lets you put the key in the tooltip.
"key-on-click":"toggle-visibility" defines the action for clicked labels to be the toggle visibility function. You can also invoke web pages and external callbacks just like the on-click feature for chart elements.
"id":2 defines the ID for grouping series for visibility toggling. Notice that both the "Contracts" bar series and the "tags" series both are set to the value 2 so that they both show and hide when the "Contracts" key label is clicked.
-----
The chart below demonstrates the right side legend used with a line chart. Notice that you can click on the key labels to show and hide the associated chart elements.
Here is a link to view the JSON. Here is a quick look at the JSON:
"legend":{"position":"right",
"shadow":false,
"padding":4,
"border":true,
"stroke":2,
"border_colour":"#808080",
"bg_colour":"#f8f8d8",
"alpha":1,
"margin":4,
},
"position":"right" places the legend to the right side of the chart while any other value or if it is left out places the legend at the top of the chart below the title.
"shadow" defines whether or not to display a shadow around the right side legend box.
"padding" defines a number of pixels to place between the labels and the border of the right side legend.
"border" defines whether or not to draw a border line around the right side legend box.
"stroke" defines the size of the border line around the right side legend box.
"border_colour" defines the colour of the border line around the right side legend box.
"bg_colour" defines the background colour inside the right side legend box.
"alpha" defines the alpha value for the right side legend box.
"margin" defines the number of pixel spacing around the outside of the right side legend box. This can be used to adjust how close the legend appears to the edge of the window and to the right side Y legend or right edge of the chart if there is no right side legend.
-----