Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Ability to customize tilted pie shadow #78

Merged
merged 2 commits into from

2 participants

@julthomas

Hi,

This patch provides ability to customize top/left offset and alpha level of tilted Pie shadow. I have updated the documentation (pie example). Following is how to use it :

$.plot(
    $('#overall-state-summary div.pie-state'),
    state, 
    {    series: {
            pie: {
                show: true,
                startAngle: 4/9,
                radius: 3/4,
                innerRadius: 0.27,
                tilt: 0.5,
                shadow: {
                    left: 1,
                    top: 12,
                    alpha: 0.1,
                },
                offset: {
                    top: -5
                },
                stroke: {
                    color: '#585858',
                    width: 1
                },
                label: {
                    show: false,
                }
            }
        },
        legend: {
            show: false, 
        }
    }
);

Regards,
Julien

@dnschnur
Owner

I like this patch a lot; the commits are just the right size, clearly organized, and nicely labeled, making my job much easier.

I also like the way you've added the 'shadow' option; this is exactly how I'd see it being used more broadly. In case you're interested in expanding on this, or implementing it for other plot types, my main suggestion would be to add a 'size' option. This would map nicely to the existing 'shadowSize' options for some of the other plot types. Another option might be 'color', to override the default #000.

Thanks for submitting this!

@dnschnur dnschnur merged commit 53d6112 into flot:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 17 additions and 7 deletions.
  1. +5 −0 examples/pie.html
  2. +12 −7 jquery.flot.pie.js
View
5 examples/pie.html
@@ -671,6 +671,11 @@
<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><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>
View
19 jquery.flot.pie.js
@@ -310,10 +310,10 @@ More detail and specific examples can be found in the included HTML file.
function drawShadow()
{
- var shadowLeft = 5;
- var shadowTop = 15;
+ var shadowLeft = options.series.pie.shadow.left;
+ var shadowTop = options.series.pie.shadow.top;
var edge = 10;
- var alpha = 0.02;
+ var alpha = options.series.pie.shadow.alpha;
// set radius
if (options.series.pie.radius>1)
@@ -586,10 +586,10 @@ More detail and specific examples can be found in the included HTML file.
triggerClickHoverEvent('plothover', e);
}
- function onClick(e)
+ function onClick(e)
{
triggerClickHoverEvent('plotclick', e);
- }
+ }
// trigger click or hover event (they send the same parameters so we share their code)
function triggerClickHoverEvent(eventname, e)
@@ -612,7 +612,7 @@ More detail and specific examples can be found in the included HTML file.
// highlight the slice
if (item)
- highlight(item.series, eventname);
+ highlight(item.series, eventname);
// trigger any hover bind events
var pos = { pageX: e.pageX, pageY: e.pageY };
@@ -712,6 +712,11 @@ More detail and specific examples can be found in the included HTML file.
innerRadius:0, /* for donut */
startAngle: 3/2,
tilt: 1,
+ shadow: {
+ left: 5, // shadow left offset
+ top: 15, // shadow top offset
+ alpha: 0.02, // shadow alpha
+ },
offset: {
top: 0,
left: 'auto'
@@ -744,7 +749,7 @@ More detail and specific examples can be found in the included HTML file.
}
}
};
-
+
$.plot.plugins.push({
init: init,
options: options,
Something went wrong with that request. Please try again.