| Path : /var/www/html/moneyexchange/public/assets/libs/flot/examples/series-pie/ |
|
B-Con CMD Config cPanel C-Rdp D-Log Info Jump Mass Ransom Symlink vHost Zone-H |
| Current File : /var/www/html/moneyexchange/public/assets/libs/flot/examples/series-pie/index.html |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Pie Charts</title>
<link href="../examples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.demo-container {
position: relative;
height: 400px;
}
#placeholder {
width: 550px;
}
#menu {
position: absolute;
top: 20px;
left: 625px;
bottom: 20px;
right: 20px;
width: 200px;
}
#menu button {
display: inline-block;
width: 200px;
padding: 3px 0 2px 0;
margin-bottom: 4px;
background: #eee;
border: 1px solid #999;
border-radius: 2px;
font-size: 16px;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
#description {
margin: 15px 10px 20px 10px;
}
#code {
display: block;
width: 870px;
padding: 15px;
margin: 10px auto;
border: 1px dashed #999;
background-color: #f8f8f8;
font-size: 16px;
line-height: 20px;
color: #666;
}
ul {
font-size: 10pt;
}
ul li {
margin-bottom: 0.5em;
}
ul.options li {
list-style: none;
margin-bottom: 1em;
}
ul li i {
color: #999;
}
</style>
<!--[if lte IE 8
]><script
language="javascript"
type="text/javascript"
src="../../excanvas.min.js"
></script
><![endif]-->
<script
language="javascript"
type="text/javascript"
src="../../jquery.js"
></script>
<script
language="javascript"
type="text/javascript"
src="../../jquery.flot.js"
></script>
<script
language="javascript"
type="text/javascript"
src="../../jquery.flot.pie.js"
></script>
<script type="text/javascript">
$(function () {
// Example Data
//var data = [
// { label: "Series1", data: 10},
// { label: "Series2", data: 30},
// { label: "Series3", data: 90},
// { label: "Series4", data: 70},
// { label: "Series5", data: 80},
// { label: "Series6", data: 110}
//];
//var data = [
// { label: "Series1", data: [[1,10]]},
// { label: "Series2", data: [[1,30]]},
// { label: "Series3", data: [[1,90]]},
// { label: "Series4", data: [[1,70]]},
// { label: "Series5", data: [[1,80]]},
// { label: "Series6", data: [[1,0]]}
//];
//var data = [
// { label: "Series A", data: 0.2063},
// { label: "Series B", data: 38888}
//];
// Randomly Generated Data
var data = [],
series = Math.floor(Math.random() * 6) + 3;
for (var i = 0; i < series; i++) {
data[i] = {
label: "Series" + (i + 1),
data: Math.floor(Math.random() * 100) + 1,
};
}
var placeholder = $("#placeholder");
$("#example-1").click(function () {
placeholder.unbind();
$("#title").text("Default pie chart");
$("#description").text("The default pie chart with no options set.");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
},
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true",
" }",
" }",
"});",
]);
});
$("#example-2").click(function () {
placeholder.unbind();
$("#title").text("Default without legend");
$("#description").text(
"The default pie chart when the legend is disabled. Since the labels would normally be outside the container, the chart is resized to fit."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-3").click(function () {
placeholder.unbind();
$("#title").text("Custom Label Formatter");
$("#description").text(
"Added a semi-transparent background to the labels and a custom labelFormatter function."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: labelFormatter,
background: {
opacity: 0.8,
},
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" radius: 1,",
" label: {",
" show: true,",
" radius: 1,",
" formatter: labelFormatter,",
" background: {",
" opacity: 0.8",
" }",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-4").click(function () {
placeholder.unbind();
$("#title").text("Label Radius");
$("#description").text(
"Slightly more transparent label backgrounds and adjusted the radius values to place them within the pie."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
},
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" radius: 1,",
" label: {",
" show: true,",
" radius: 3/4,",
" formatter: labelFormatter,",
" background: {",
" opacity: 0.5",
" }",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-5").click(function () {
placeholder.unbind();
$("#title").text("Label Styles #1");
$("#description").text(
"Semi-transparent, black-colored label background."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: "#000",
},
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: { ",
" show: true,",
" radius: 1,",
" label: {",
" show: true,",
" radius: 3/4,",
" formatter: labelFormatter,",
" background: { ",
" opacity: 0.5,",
" color: '#000'",
" }",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-6").click(function () {
placeholder.unbind();
$("#title").text("Label Styles #2");
$("#description").text(
"Semi-transparent, black-colored label background placed at pie edge."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 3 / 4,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: "#000",
},
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" radius: 3/4,",
" label: {",
" show: true,",
" radius: 3/4,",
" formatter: labelFormatter,",
" background: {",
" opacity: 0.5,",
" color: '#000'",
" }",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-7").click(function () {
placeholder.unbind();
$("#title").text("Hidden Labels");
$("#description").text(
"Labels can be hidden if the slice is less than a given percentage of the pie (10% in this case)."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: labelFormatter,
threshold: 0.1,
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" radius: 1,",
" label: {",
" show: true,",
" radius: 2/3,",
" formatter: labelFormatter,",
" threshold: 0.1",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-8").click(function () {
placeholder.unbind();
$("#title").text("Combined Slice");
$("#description").text(
"Multiple slices less than a given percentage (5% in this case) of the pie can be combined into a single, larger slice."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
combine: {
color: "#999",
threshold: 0.05,
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" combine: {",
" color: '#999',",
" threshold: 0.1",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-9").click(function () {
placeholder.unbind();
$("#title").text("Rectangular Pie");
$("#description").text(
"The radius can also be set to a specific size (even larger than the container itself)."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 500,
label: {
show: true,
formatter: labelFormatter,
threshold: 0.1,
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" radius: 500,",
" label: {",
" show: true,",
" formatter: labelFormatter,",
" threshold: 0.1",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-10").click(function () {
placeholder.unbind();
$("#title").text("Tilted Pie");
$("#description").text("The pie can be tilted at an angle.");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
label: {
show: true,
radius: 1,
formatter: labelFormatter,
background: {
opacity: 0.8,
},
},
combine: {
color: "#999",
threshold: 0.1,
},
},
},
legend: {
show: false,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true,",
" radius: 1,",
" tilt: 0.5,",
" label: {",
" show: true,",
" radius: 1,",
" formatter: labelFormatter,",
" background: {",
" opacity: 0.8",
" }",
" },",
" combine: {",
" color: '#999',",
" threshold: 0.1",
" }",
" }",
" },",
" legend: {",
" show: false",
" }",
"});",
]);
});
$("#example-11").click(function () {
placeholder.unbind();
$("#title").text("Donut Hole");
$("#description").text("A donut hole can be added.");
$.plot(placeholder, data, {
series: {
pie: {
innerRadius: 0.5,
show: true,
},
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" innerRadius: 0.5,",
" show: true",
" }",
" }",
"});",
]);
});
$("#example-12").click(function () {
placeholder.unbind();
$("#title").text("Interactivity");
$("#description").text(
"The pie can be made interactive with hover and click events."
);
$.plot(placeholder, data, {
series: {
pie: {
show: true,
},
},
grid: {
hoverable: true,
clickable: true,
},
});
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true",
" }",
" },",
" grid: {",
" hoverable: true,",
" clickable: true",
" }",
"});",
]);
placeholder.bind("plothover", function (event, pos, obj) {
if (!obj) {
return;
}
var percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html(
"<span style='font-weight:bold; color:" +
obj.series.color +
"'>" +
obj.series.label +
" (" +
percent +
"%)</span>"
);
});
placeholder.bind("plotclick", function (event, pos, obj) {
if (!obj) {
return;
}
percent = parseFloat(obj.series.percent).toFixed(2);
alert("" + obj.series.label + ": " + percent + "%");
});
});
// Show the initial default chart
$("#example-1").click();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
// A custom label formatter used by several of the plots
function labelFormatter(label, series) {
return (
"<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" +
label +
"<br/>" +
Math.round(series.percent) +
"%</div>"
);
}
//
function setCode(lines) {
$("#code").text(lines.join("\n"));
}
</script>
</head>
<body>
<div id="header">
<h2>Pie Charts</h2>
</div>
<div id="content">
<h3 id="title"></h3>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
<div id="menu">
<button id="example-1">Default Options</button>
<button id="example-2">Without Legend</button>
<button id="example-3">Label Formatter</button>
<button id="example-4">Label Radius</button>
<button id="example-5">Label Styles #1</button>
<button id="example-6">Label Styles #2</button>
<button id="example-7">Hidden Labels</button>
<button id="example-8">Combined Slice</button>
<button id="example-9">Rectangular Pie</button>
<button id="example-10">Tilted Pie</button>
<button id="example-11">Donut Hole</button>
<button id="example-12">Interactivity</button>
</div>
</div>
<p id="description"></p>
<h3>Source Code</h3>
<pre><code id="code"></code></pre>
<br />
<h2>Pie Options</h2>
<ul class="options">
<li style="border-bottom: 1px dotted #ccc">
<b>option:</b> <i>default value</i> - Description of option
</li>
<li>
<b>show:</b> <i>false</i> - Enable the plugin and draw as a pie.
</li>
<li>
<b>radius:</b> <i>'auto'</i> - Sets the radius of the pie. If value is
between 0 and 1 (inclusive) then it will use that as a percentage of
the available space (size of the container), otherwise it will use the
value as a direct pixel length. If set to 'auto', it will be set to 1
if the legend is enabled and 3/4 if not.
</li>
<li>
<b>innerRadius:</b> <i>0</i> - Sets the radius of the donut hole. If
value is between 0 and 1 (inclusive) then it will use that as a
percentage of the radius, otherwise it will use the value as a direct
pixel length.
</li>
<li>
<b>startAngle:</b> <i>3/2</i> - Factor of PI used for the starting
angle (in radians) It can range between 0 and 2 (where 0 and 2 have
the same result).
</li>
<li>
<b>tilt:</b> <i>1</i> - Percentage of tilt ranging from 0 and 1, where
1 has no change (fully vertical) and 0 is completely flat (fully
horizontal -- in which case nothing actually gets drawn).
</li>
<li>
<b>shadow:</b>
<ul>
<li>
<b>top:</b> <i>5</i> - Vertical distance in pixel of the tilted
pie shadow.
</li>
<li>
<b>left:</b> <i>15</i> - Horizontal distance in pixel of the
tilted pie shadow.
</li>
<li>
<b>alpha:</b> <i>0.02</i> - Alpha value of the tilted pie shadow.
</li>
</ul>
</li>
<li>
<b>offset:</b>
<ul>
<li>
<b>top:</b> <i>0</i> - Pixel distance to move the pie up and down
(relative to the center).
</li>
<li>
<b>left:</b> <i>'auto'</i> - Pixel distance to move the pie left
and right (relative to the center).
</li>
</ul>
</li>
<li>
<b>stroke:</b>
<ul>
<li>
<b>color:</b> <i>'#FFF'</i> - Color of the border of each slice.
Hexadecimal color definitions are prefered (other formats may or
may not work).
</li>
<li>
<b>width:</b> <i>1</i> - Pixel width of the border of each slice.
</li>
</ul>
</li>
<li>
<b>label:</b>
<ul>
<li>
<b>show:</b> <i>'auto'</i> - Enable/Disable the labels. This can
be set to true, false, or 'auto'. When set to 'auto', it will be
set to false if the legend is enabled and true if not.
</li>
<li>
<b>radius:</b> <i>1</i> - Sets the radius at which to place the
labels. If value is between 0 and 1 (inclusive) then it will use
that as a percentage of the available space (size of the
container), otherwise it will use the value as a direct pixel
length.
</li>
<li>
<b>threshold:</b> <i>0</i> - Hides the labels of any pie slice
that is smaller than the specified percentage (ranging from 0 to
1) i.e. a value of '0.03' will hide all slices 3% or less of the
total.
</li>
<li>
<b>formatter:</b> <i>[function]</i> - This function specifies how
the positioned labels should be formatted, and is applied after
the legend's labelFormatter function. The labels can also still be
styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1
.pieLabel").
</li>
<li>
<b>radius:</b> <i>1</i> - Sets the radius at which to place the
labels. If value is between 0 and 1 (inclusive) then it will use
that as a percentage of the available space (size of the
container), otherwise it will use the value as a direct pixel
length.
</li>
<li>
<b>background:</b>
<ul>
<li>
<b>color:</b> <i>null</i> - Backgound color of the positioned
labels. If null, the plugin will automatically use the color
of the slice.
</li>
<li>
<b>opacity:</b> <i>0</i> - Opacity of the background for the
positioned labels. Acceptable values range from 0 to 1, where
0 is completely transparent and 1 is completely opaque.
</li>
</ul>
</li>
</ul>
</li>
<li>
<b>combine:</b>
<ul>
<li>
<b>threshold:</b> <i>0</i> - Combines all slices that are smaller
than the specified percentage (ranging from 0 to 1) i.e. a value
of '0.03' will combine all slices 3% or less into one slice).
</li>
<li>
<b>color:</b> <i>null</i> - Backgound color of the positioned
labels. If null, the plugin will automatically use the color of
the first slice to be combined.
</li>
<li>
<b>label:</b> <i>'Other'</i> - Label text for the combined slice.
</li>
</ul>
</li>
<li>
<b>highlight:</b>
<ul>
<li>
<b>opacity:</b> <i>0.5</i> - Opacity of the highlight overlay on
top of the current pie slice. Currently this just uses a white
overlay, but support for changing the color of the overlay will
also be added at a later date.
</li>
</ul>
</li>
</ul>
<h2>Changes/Features</h2>
<ul>
<li style="list-style: none">
<i>v1.0 - November 20th, 2009 - Brian Medendorp</i>
</li>
<li>
The pie plug-in is now part of the Flot repository! This should make
it a lot easier to deal with.
</li>
<li>
Added a new option (innerRadius) to add a "donut hole" to the center
of the pie, based on comtributions from Anthony Aragues. I was a
little reluctant to add this feature because it doesn't work very well
with the shadow created for the tilted pie, but figured it was
worthwhile for non-tilted pies. Also, excanvas apparently doesn't
support compositing, so it will fall back to using the stroke color to
fill in the center (but I recommend setting the stroke color to the
background color anyway).
</li>
<li>
Changed the lineJoin for the border of the pie slices to use the
'round' option. This should make the center of the pie look better,
particularly when there are numerous thin slices.
</li>
<li>
Included a bug fix submitted by btburnett3 to display a slightly
smaller slice in the event that the slice is 100% and being rendered
with Internet Explorer. I haven't experienced this bug myself, but it
doesn't seem to hurt anything so I've included it.
</li>
<li>
The tilt value is now used when calculating the maximum radius of the
pie in relation to the height of the container. This should prevent
the pie from being smaller than it needed to in some cases, as well as
reducing the amount of extra white space generated above and below the
pie.
</li>
<li>
<b>Hover and Click functionality are now availabe!</b>
<ul>
<li>
Thanks to btburnett3 for the original hover functionality and
Anthony Aragues for the modification that makes it compatable with
excanvas, this was a huge help!
</li>
<li>
Added a new option (highlight opacity) to modify the highlight
created when mousing over a slice. Currently this just uses a
white overlay, but an option to change the hightlight color will
be added when the appropriate functionality becomes available.
</li>
<li>
I had a major setback that required me to practically rebuild the
hover/click events from scratch one piece at a time (I discovered
that it only worked with a single pie on a page at a time), but
the end result ended up being virtually identical to the original,
so I'm not quite sure what exactly made it work.
</li>
<li>
<span style="color: red">Warning:</span> There are some minor
issues with using this functionality in conjuction with some of
the other more advanced features (tilt and donut). When using a
donut hole, the inner portion still triggers the events even
though that portion of the pie is no longer visible. When tilted,
the interactive portions still use the original, untilted version
of the pie when determining mouse position (this is because the
isPointInPath function apparently doesn't work with
transformations), however hover and click both work this way, so
the appropriate slice is still highlighted when clicking, and it
isn't as noticable of a problem.
</li>
</ul>
</li>
<li>
Included a bug fix submitted by Xavi Ivars to fix array issues when
other javascript libraries are included in addition to jQuery
</li>
<br />
<li style="list-style: none">
<i>v0.4 - July 1st, 2009 - Brian Medendorp</i>
</li>
<li>
Each series will now be shown in the legend, even if it's value is
zero. The series will not get a positioned label because it will
overlap with the other labels present and often makes them unreadable.
</li>
<li>
Data can now be passed in using the standard Flot method using an
array of datapoints, the pie plugin will simply use the first y-value
that it finds for each series in this case. The plugin uses this
datastructure internally, but you can still use the old method of
passing in a single numerical value for each series (the plugin will
convert it as necessary). This should make it easier to transition
from other types of graphs (such as a stacked bar graph) to a pie.
</li>
<li>
The pie can now be tilted at an angle with a new "tilt" option.
Acceptable values range from 0-1, where 1 has no change (fully
vertical) and 0 is completely flat (fully horizontal -- in which case
nothing actually gets drawn). If the plugin determines that it will
fit within the canvas, a drop shadow will be drawn under the tilted
pie (this also requires a tilt value of 0.8 or less).
</li>
<br />
<li style="list-style: none">
<i>v0.3.2 - June 25th, 2009 - Brian Medendorp</i>
</li>
<li>
Fixed a bug that was causing the pie to be shifted too far left or
right when the legend is showing in some cases.
</li>
<br />
<li style="list-style: none">
<i>v0.3.1 - June 24th, 2009 - Brian Medendorp</i>
</li>
<li>
Fixed a bug that was causing nothing to be drawn and generating a
javascript error if any of the data values were set to zero.
</li>
<br />
<li style="list-style: none">
<i>v0.3 - June 23rd, 2009 - Brian Medendorp</i>
</li>
<li>
The legend now works without any modifications! Because of changes
made to flot and the plugin system (thanks Ole Laursen!) I was able to
simplify a number of things and am now able to use the legend without
the direct access hack that was required in the previous version.
</li>
<br />
<li style="list-style: none">
<i>v0.2 - June 22nd, 2009 - Brian Medendorp</i>
</li>
<li>
The legend now works but only if you make the necessary changes to
jquery.flot.js. Because of this, I changed the default values for
pie.radius and pie.label.show to new 'auto' settings that change the
default behavior of the size and labels depending on whether the
legend functionality is available or not.
</li>
<br />
<li style="list-style: none">
<i>v0.1 - June 18th, 2009 - Brian Medendorp</i>
</li>
<li>
Rewrote the entire pie code into a flot plugin (since that is now an
option), so it should be much easier to use and the code is cleaned up
a bit. However, the (standard flot) legend is no longer available
because the only way to prevent the grid lines from being displayed
also prevents the legend from being displayed. Hopefully this can be
fixed at a later date.
</li>
<li>
Restructured and combined some of the options. It should be much
easier to deal with now.
</li>
<li>
Added the ability to change the starting point of the pie (still
defaults to the top).
</li>
<li>
Modified the default options to show the labels to compensate for the
lack of a legend.
</li>
<li>
Modified this page to use a random dataset.
<span style="color: red"
>Note: you may need to refresh the page to see the effects of some
of the examples.</span
>
</li>
<br />
<li style="list-style: none">
<i>May 21st, 2009 - Brian Medendorp</i>
</li>
<li>
Merged original pie modifications by Sergey Nosenko into the latest
SVN version <i>(as of May 15th, 2009)</i> so that it will work with
ie8.
</li>
<li>
Pie graph will now be centered in the canvas unless moved because of
the legend or manually via the options. Additionally it prevents the
pie from being moved beyond the edge of the canvas.
</li>
<li>
Modified the code related to the labelFormatter option to apply flot's
legend labelFormatter first. This is so that the labels will be
consistent, but still provide extra formatting for the positioned
labels (such as adding the percentage value).
</li>
<li>
Positioned labels now have their backgrounds applied as a seperate
element (much like the legend background) so that the opacity value
can be set independently from the label itself (foreground).
Additionally, the background color defaults to that of the matching
slice.
</li>
<li>
As long as the labelOffset and radiusLimit are not set to hard values,
the pie will be shrunk if the labels will extend outside the edge of
the canvas
</li>
<li>
Added new options "radiusLimitFactor" and "radiusLimit" which limits
how large the (visual) radius of the pie is in relation to the full
radius (as calculated from the canvas dimensions) or a hard-pixel
value (respectively). This allows for pushing the labels "outside" the
pie.
</li>
<li>
Added a new option "labelHidePercent" that does not show the
positioned labels of slices smaller than the specified percentage.
This is to help prevent a bunch of overlapping labels from small
slices.
</li>
<li>
Added a new option "sliceCombinePercent" that combines all slices
smaller than the specified percentage into one larger slice. This is
to help make the pie more attractive when there are a number of tiny
slices. The options "sliceCombineColor" and "sliceCombineLabel" have
also been added to change the color and name of the new slice if
desired.
</li>
<li>
Tested in Firefox (3.0.10, 3.5b4), Internet Explorer (6.0.2900,
7.0.5730, 8.0.6001), Chrome (1.0.154), Opera (9.64), and Safari
(3.1.1, 4 beta 5528.16).
</li>
</ul>
</div>
<div id="footer">Copyright © 2007 - 2014 IOLA and Ole Laursen</div>
</body>
</html>