1142 lines
37 KiB
HTML
1142 lines
37 KiB
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>
|