Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Support for rendering pie charts with gradients #853

Open
wants to merge 1 commit into from

2 participants

@mtr
mtr commented

I have now added support for rendering pie chart with gradients, either radial or linear. This should fix #355. Please merge this with the master branch in the base repo,

@mtr
mtr commented

An example default chart with radial gradient:

Default chart with gradient

An example donut chart with radial gradient:

Donut chart with gradient

@DanielHoffmann

With this patch the radial gradients work great, but the linear gradient is not working properly. It is set to only cover half the pie and leave the other half in a fixed color. To fix change this line:

gradient = ctx.createLinearGradient(0, top 0, bottom);

to

gradient = ctx.createLinearGradient(0, bottom/2, 0, bottom/2);

Also, note that this doesn't use the top property anymore so I'm unsure if it will fix 100% on charts that are not on the center of the plot (maybe add half the top to both non-zero parameters?). Anyway the gradient is also set to start from the bottom of the plot area not the start of the pie making it bad on charts in which the pie does not cover the plot area fully.

Also thanks for the patch, it makes my pie charts look amazing:
pie

To make this graph use this gradient:
gradient= [
{ brightness: 0.75 },
{ brightness: 0.75 },
{ brightness: 0.75 },
{ brightness: 0.75 },
{ brightness: 0.75 },
{ brightness: 0.75 },
{ brightness: 0.75 },
{ brightness: 0.70 },
{ brightness: 0.65 },
{ brightness: 0.60 },
{ brightness: 0.80 },
{ brightness: 0.60 },
{ brightness: 0.48 },
{ brightness: 0.42 },
{ brightness: 0.42 },
{ brightness: 0.60 },
{ brightness: 0.60 },
{ brightness: 0.60 },
{ brightness: 0.60 },
{ brightness: 0.60 },
];

Cool pseudo 3d-effect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 2, 2012
  1. @mtr
This page is out of date. Refresh to see the latest.
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);
+//
Something went wrong with that request. Please try again.