Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added support for rendering pies with gradients, either radial or lin…

…ear. This should fix #355.
  • Loading branch information...
commit 7132d3eda9856c6c813e5bf0d7160a6315fba7b0 1 parent 63266b3
@mtr authored
Showing with 149 additions and 8 deletions.
  1. +94 −4 examples/pie.html
  2. +55 −4 jquery.flot.pie.js
View
98 examples/pie.html
@@ -46,7 +46,24 @@
}
}
});
-
+
+ // DEFAULT
+ $.plot($("#default_gradient"), data,
+ {
+ series: {
+ pie: {
+ show: true,
+ gradient: {
+ radial: true,
+ colors: [
+ {opacity: 0.5},
+ {opacity: 1.0}
+ ]
+ }
+ }
+ }
+ });
+
// GRAPH 1
$.plot($("#graph1"), data,
{
@@ -252,7 +269,28 @@
}
});
- // INTERACTIVE
+ // DONUT GRADIENT
+ $.plot($("#donut_gradient"), data,
+ {
+ series: {
+ pie: {
+ innerRadius: 0.5,
+ show: true,
+ gradient: {
+ radial: true,
+ colors: [
+ {opacity: 1.0},
+ {opacity: 1.0},
+ {opacity: 1.0},
+ {opacity: 0.5},
+ {opacity: 1.0}
+ ]
+ }
+ }
+ }
+ });
+
+ // INTERACTIVE
$.plot($("#interactive"), data,
{
series: {
@@ -376,6 +414,27 @@
</code>
</label>
+ <h2>Default with Legend And Gradient</h2>
+ <div id="default_gradient" class="graph"></div>
+ <label for="default_gradient">
+ Default pie graph with a radial gradient.
+ <code>
+ $.plot($("#default"), data,<br/>
+ {<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;series: {<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pie: { <br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show: true,<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>gradient: {<br />
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radial: true,<br />
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colors: [ {opacity: 0.5}, {opacity: 1.0} ]<br />
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</b><br />
+
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>
+ });<br/>
+ </code>
+ </label>
+
<h2>Default without Legend</h2>
<div id="graph1" class="graph"></div>
<label for="graph1">
@@ -639,7 +698,28 @@
});<br/>
</code>
</label>
-
+
+ <h2>Donut with Gradient</h2>
+ <div id="donut_gradient" class="graph"></div>
+ <label for="donut_gradient">
+ A gradient can be added to the donut.
+ <code>
+$.plot($("#donut_gradient"), data,<br/>
+{<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;series: {<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pie: { <br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;innerRadius: 0.5,<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show: true,<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>gradient: {<br />
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radial: true,<br />
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colors: [ {opacity: 1.0}, {opacity: 1.0}, {opacity: 1.0}, {opacity: 0.5}, {opacity: 1.0} ]<br />
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</b><br />
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>
+});<br/>
+ </code>
+ </label>
+
<h2>Interactive</h2>
<div id="interactive" class="graph"></div>
<label for="interactive">
@@ -707,7 +787,17 @@
<h2>Changes/Features</h2>
<ul>
- <li style="list-style: none;"><i>v1.0 - November 20th, 2009 - Brian Medendorp</i></li>
+ <li
+ style="list-style: none;"><i>v1.1 - November 2nd, 2012 - Martin Thorsen Ranang</i></li>
+ <li>Added support for rendering pies with gradients, either radial or
+ linear. The changes are based on combination of the suggestions
+ proposed by <a
+ href="http://stackoverflow.com/users/3485/hoffmann">Hoffman
+ </a> in an answer on <a
+ href="http://stackoverflow.com/questions/12844159/gradients-on-flot">Stack Overflow</a> and <a href="http://code.google.com/p/flot/issues/attachmentText?id=276&aid=-7836171024142142196&name=jquery.flot.pie.js.diff&token=zvwDds_wCA3X0PhU3RXRO33iVNs%3A1351815189916">a patch</a> suggested in <a href="https://github.com/flot/flot/issues/355">reported issue #355</a> by <a href="http://code.google.com/u/lucboudreau/">Luc Boudreau</a>.
+ </li>
+
+ <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>
View
59 jquery.flot.pie.js
@@ -50,6 +50,10 @@ series: {
}
highlight: {
opacity: 0-1
+ },
+ gradient: {
+ radial: true/false, indicating radial or linear gradient, respectively.
+ colors: either an array of string color values ( ["#fff", "#000"] ) to use as color steps for the gradient or an object with the following structure that tells what modifications to apply to the default series color : { brightness:1, opacity:1}. Consult the bar chart specifications about gradient fill for more examples.
}
}
}
@@ -392,13 +396,55 @@ More detail and specific examples can be found in the included HTML file.
// restore to original state
ctx.restore();
+ function getColorOrGradient(spec, bottom, top, defaultColor, radius) {
+ // Most of this code is copied from the function with the
+ // same name in jquery.flot.js. I therefore believe that
+ // this (common) code should be restructured to avoid
+ // duplication of errors and an increase in maintenance
+ // efforts. However, I hope that one of the project
+ // maintainers can do that.
+ if (typeof spec === 'string') {
+ return spec;
+ } else if ((spec === null) || (spec.colors === null)) {
+ return defaultColor;
+ }
+ else {
+ // assume this is a gradient spec; IE currently only
+ // supports a simple vertical gradient properly, so that's
+ // what we support too
+ var gradient;
+
+ if (radius) {
+ gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
+ } else {
+ gradient = ctx.createLinearGradient(0, top, 0, bottom);
+ }
+
+ for (var i = 0, l = spec.colors.length; i < l; ++i) {
+ var c = spec.colors[i];
+ if (typeof c !== 'string') {
+ var co = $.color.parse(defaultColor);
+ if (c.brightness != null)
+ co = co.scale('rgb', c.brightness);
+ if (c.opacity != null)
+ co.a *= c.opacity;
+ c = co.toString();
+ }
+ gradient.addColorStop(i / (l - 1), c);
+ }
+
+ return gradient;
+ }
+ }
+
function drawSlice(angle, color, fill)
{
if (angle <= 0 || isNaN(angle))
return;
- if (fill)
- ctx.fillStyle = color;
+ if (fill) {
+ ctx.fillStyle = getColorOrGradient(options.series.pie.gradient, plot.height(), 0, color, options.series.pie.gradient.radial && radius);
+ }
else
{
ctx.strokeStyle = color;
@@ -715,7 +761,7 @@ More detail and specific examples can be found in the included HTML file.
shadow: {
left: 5, // shadow left offset
top: 15, // shadow top offset
- alpha: 0.02, // shadow alpha
+ alpha: 0.02 // shadow alpha
},
offset: {
top: 0,
@@ -745,7 +791,11 @@ More detail and specific examples can be found in the included HTML file.
highlight: {
//color: '#FFF', // will add this functionality once parseColor is available
opacity: 0.5
- }
+ },
+ gradient: {
+ radial: true, // boolean, indicating radial or linear gradient
+ colors: null // e.g., [{opacity: 0.1, brightness: 1.0}, {opacity: 1.0, brightness: 1.0}]
+ }
}
}
};
@@ -757,3 +807,4 @@ More detail and specific examples can be found in the included HTML file.
version: "1.0"
});
})(jQuery);
+//
Please sign in to comment.
Something went wrong with that request. Please try again.