Pie Charts

[GoogleCodeExporter]

I didn't notice pie charts in the todo. I think they would be a great addition.

Original issue reported on code.google.com by mmihajlo...@gmail.com on 6 Dec 2007 at 6:39

[GoogleCodeExporter]

Any update on the pie chart issue with hovers/clicks?  The problem seems to be 
with
isPointInPath(x,y) always returning false.

Original comment by jason.ro...@gmail.com on 18 Nov 2009 at 3:36

[GoogleCodeExporter]

I'm currently working on it, and am very close to having a fully working 
version. I apologize for the delay, I haven't had much time to work on this 
recently because among 
other things, I spent a little over two weeks serving on jury duty. I'll have 
something 
to upload as soon as I verify that it works properly across the board.

Original comment by the.d...@gmail.com on 18 Nov 2009 at 3:50

[GoogleCodeExporter]

I have completed my first version of the pie plugin and committed it to the
repository! Sorry that it took so long, I had a significant setback this week 
by a
bug that required me to rewrite certain portions from the ground up, but 
everything
seems to be working now!

We should be able to close out this issue, and can start a new one for any bugs 
that
people find or patches they wish to submit. 

It would also be advantageous to add parseColor to the list of public functions 
from
within flot itself, so that plugins have access to that rather useful little 
feature.

Original comment by the.d...@gmail.com on 20 Nov 2009 at 11:40

[GoogleCodeExporter]

Thanks, Brian!

I run the example and find many many   . Could we get a better design for it?

Original comment by gbainao...@gmail.com on 21 Nov 2009 at 11:32

[GoogleCodeExporter]

sorry, it is my mistake. :(.

Original comment by gbainao...@gmail.com on 21 Nov 2009 at 12:28

[GoogleCodeExporter]

Excellent work Brian,

The only issue I have noticed is a break with the flot events. plothover only 
appears
to be firing when the mouse is over the pie as opposed to when it is over the 
plot
area. This means that you can't do any processing for when the mouse moves off 
the
pie slices.

I've included a trivial patch if you agree with my reasoning above.

-Peter

Original comment by peter.tr...@gtempaccount.com on 27 Nov 2009 at 4:25

Attachments:

• jquery.flot.pie.js.r228.patch

[GoogleCodeExporter]

I'm trying to print out the pie chart in IE. The first slice in the first chart 
is
always hidden. I've tried this in IE 6, 7, and 8. 

I also tried the examples that are available in source control and found the 
same
problem. I tried hiding different charts, and the first slice of the first 
chart is
always hidden. For instance, I commented out the code for the first two charts
(default and graph1) and then graph2's first slice is hidden.

I've included two screenshots to illustrate what I mean. The first is from the
application I am working on. The second is using the examples from source 
control. 

Original comment by david.mc...@gmail.com on 16 Dec 2009 at 7:09

Attachments:

• ProductChart1.png
• FlotPieExample.png

[GoogleCodeExporter]

I probably found a bug in pie chart, which at least occurs on webOS (Palm Pre
smartphone) based upon webkit:

The problem is how the slice is drawn. You basically did:

  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.arc(0,0,radius,startAngle,endAngle,..);
  ctx.closePath();

However, this does not result in a slice, but in something looking like the bow 
of an
indian. I attached a screen shot showing the problem.

The correct way to draw a slice must be:

  ctx.beginPath();
  ctx.arc(0,0,radius,startAngle,endAngle,..);
  ctx.lineTo(0,0);
  ctx.closePath();

I attached a second screen shot, showing the correct output.

I also attached a patch fixing the stuff. It would be great, if you accept the 
patch
and apply it to your great pie chart...

Original comment by t.bub...@googlemail.com on 23 Dec 2009 at 10:59

Attachments:

• slice-broken.png
• slice-ok.png
• fix-slice-looking-like-a-bow.patch

[GoogleCodeExporter]

Is it possible to display series percentage values with floating point?

Original comment by mulke...@gmail.com on 24 Dec 2009 at 9:20

[GoogleCodeExporter]

There is an issue (in IE, not FF), that when
1. tilt=0.5
2. graph box is small
3. only one Series

Then no pie chart displayed.

Any clue?

Original comment by izi...@gmail.com on 8 Mar 2010 at 8:59

Attachments:

• small.png
• large.png

[GoogleCodeExporter]

Hello!

Thank you for support pie-chart in flot. How to show results if one of data is 
zero. 
For example: data = [{"label": first, "data": 23, "label": second, "data": 0}]

Original comment by gfborn@gmail.com on 4 Apr 2010 at 10:30

[GoogleCodeExporter]

Is there an easy way to arrange the pie slices clockwise, as opposed to the 
current
counterclockwise arrangement ?

Original comment by bugmas...@gmail.com on 8 Apr 2010 at 12:27

[GoogleCodeExporter]

If only one Series Then no pie chart displayed.
Please let me know is this issue solved

Original comment by erchidam...@gmail.com on 24 May 2010 at 11:29

[GoogleCodeExporter]

It took me a while to figure out how to use this plugin among the tons of 
outdated or
convoluted example HTML files. Here is a patch which improves the documentation,
based on r259.

Original comment by honglilai@gmail.com on 28 May 2010 at 10:01

Attachments:

• 0002-Improve-documentation-for-the-pie-chart-plugin.patch

[GoogleCodeExporter]

And I'm working on the ability to move a slice a little away from the center 
when
clicked on. Here is a patch which implements the 'distanceFromCenter' option 
for data
points. Example:

[
  { label: "Apples", data: 500, distanceFromCenter: 15 },
  { label: "Oranges", data: 400 }
]

The patch includes documentation for this option (to be applied on top of my 
previous
documentation patch). I've also attached a screenshot which shows this patch in
action. At this time moved slices don't fit within the canvas area but I'm 
working on
a solution.

Original comment by honglilai@gmail.com on 28 May 2010 at 10:12

Attachments:

• [Screen shot 2010-05-28 at 12.10.13 PM.png](https://storage.googleapis.com/google-code-attachments/flot/issue-5/comment-115/Screen shot 2010-05-28 at 12.10.13 PM.png)

[GoogleCodeExporter]

This patch adds support for a 'margin' pie option, which defines a margin 
around the
pie. This option allows slices with distanceFromCenter to be drawn without being
chopped off because of going past the canvas area. In the previous example, 
margin
should be set to 15 because that's the value of distanceFromCenter.

This patch is to be applied on top of my previous distanceFromCenter patch.

Original comment by honglilai@gmail.com on 28 May 2010 at 10:33

Attachments:

• 0001-Support-margin-option-for-pie-charts-so-that-slices-.patch
• [Screen shot 2010-05-28 at 12.31.24 PM.png](https://storage.googleapis.com/google-code-attachments/flot/issue-5/comment-116/Screen shot 2010-05-28 at 12.31.24 PM.png)

[GoogleCodeExporter]

honglilai, great patches!

Original comment by xavi.ivars on 28 May 2010 at 10:56

[GoogleCodeExporter]

Apparently I've been a bit too hasty and accidentally include a small part of my
app's code into 0001-Support-distanceFromCenter-data-point-option-in-pie-.patch.
Please ignore that. :)

Original comment by honglilai@gmail.com on 29 May 2010 at 8:32

[GoogleCodeExporter]

I've deleted the original
'0001-Support-distanceFromCenter-data-point-option-in-pie-.patch'; here is the 
good
one that doesn't contain my app's code. So to sum up, my patches need to be 
applied
in this order:

0002-Improve-documentation-for-the-pie-chart-plugin.patch
0001-Support-distanceFromCenter-data-point-option-in-pie-.patch
0001-Support-margin-option-for-pie-charts-so-that-slices-.patch

Original comment by honglilai@gmail.com on 29 May 2010 at 8:36

Attachments:

• 0001-Support-distanceFromCenter-data-point-option-in-pie-.patch

[GoogleCodeExporter]

I agree with anthony.aragues
It's quite frustrating trying to use this pie chart plugin with so many 
versions and
no obvious 'stable' version. I tried 2 of the more recent version from this 
thread
and they behaved totally differently to each other (WRT labels and legends) but 
the
one I preferred had issues with pies with only one slice in IE. So I just 
settled for
the other. 

I have to suggest that there is one official version that has changes merged to 
it
and a stable version of that which is only updated after testing in all 
browsers and
with various test data and options.

Then again I also feel bad about complaining when other people are awesome 
enough to
contribute their hard-written code, so feel free to ignore me ;)

Original comment by beetlef...@gmail.com on 2 Jun 2010 at 9:07

[GoogleCodeExporter]

beetlefeet, I'm just using the one in SVN.

Original comment by honglilai@gmail.com on 2 Jun 2010 at 9:09

[GoogleCodeExporter]

It took me a while to read comments from Dec 06, 2007.
Nice to see a lot of bright minds working for a common goal.

I have a simple question here. Is chart a part of latest build 0.6?

Original comment by aneeshab...@gmail.com on 3 Jun 2010 at 12:27

[GoogleCodeExporter]

I am trying to figure out how to show a tooltip when  mouse is over a slice. 
The .bind("plothover", function(){}) is not working for me. Am I missing 
something?

Original comment by tanja.pi...@gmail.com on 23 Jun 2010 at 5:35

[GoogleCodeExporter]

I didn't see the pie charts included in the 0.6 build and am using something 
from 08 
(http://groups.google.com/group/flot-graphs/browse_thread/thread/9b1e73e4025b376
c/b56101eb1375d1da?#b56101eb1375d1da). Is there a general way to get pie charts 
working with Flot?

Original comment by Josh.K...@gmail.com on 8 Jul 2010 at 6:24

[GoogleCodeExporter]

Is is possible to have more than one graph on a single page?

Original comment by stephen....@googlemail.com on 20 Jul 2010 at 1:26

[GoogleCodeExporter]

@Josh.Kehn I't using jquery.flot.pie.js from trunk, its working for me: 
http://code.google.com/p/flot/source/browse/trunk/jquery.flot.pie.js

@stephen.ellis1 sure it is, see attachment

Original comment by dmitry.g...@gmail.com on 9 Aug 2010 at 8:26

Attachments:

• analytics-demo.png

[GoogleCodeExporter]

I've applied my patches along some extra documentation to my temporary fork: 
http://github.com/FooBarWidget/flot/commit/97b9d76c7da15d54fee3f04f1356f43b1f936
523

Original comment by honglilai@gmail.com on 14 Aug 2010 at 3:33

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

@honglilai: Tried your distance-from-center-patch out.

I think it needs some more refinement as it does not work properly with a donut 
graph.
Think it would be a good idea to hide one pie and to draw a new one on top of 
it. Makes things perhaps a little easier.

Cheers
Michael

Original comment by mikelper...@googlemail.com on 14 Oct 2010 at 7:47

[GoogleCodeExporter]

hi all

is thier anyway so i have the legend as a seperate image ???
i wanna add more than one pie chart , and one legend for all 

thanx for help

Original comment by a.awad2...@gmail.com on 13 Dec 2010 at 10:57

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Try adding the legend control separately. For example,
yaxis:{
      ........
    },
legend: {
    show: true,
    position: "ne",
    container: document.getElementById('legendDiv')
    }

Original comment by elavazha...@gmail.com on 20 Dec 2010 at 10:42

[GoogleCodeExporter]

Attached is a simple patch against the trunk code for pie charts to prevent a 
JavaScript error if the data provided doesn't have numeric values (the data is 
empty).

Admittedly this is not a typical case, but it would be preferable to avoid the 
JS error. (Bar charts don't trigger an error for empty data.)

Original comment by arithmet...@gmail.com on 20 Dec 2010 at 4:47

Attachments:

• flot-fix_empty_pie.patch

[GoogleCodeExporter]

Attached a patch to support a custom label.

Example: http://www.quati.info/flot/pie2.html

Original comment by raphael....@gmail.com on 20 Jun 2011 at 10:15

Attachments:

• jquery.flot.pie-customLabel.diff

[GoogleCodeExporter]

Okay, this bug has just been growing. I'll close it now. For the record, it 
seems Brian disappeared more than a year ago. I've since then applied a couple 
of bug fixes that people reported elsewhere, but if anyone wants to do some 
more work on this plugin, feel free to turn up. I think we need someone who's 
happy to review incoming pie patches and test them thoroughly.

honglilai: It seems like you've collected a bunch of stuff including 
documentation fixes, if it applies cleanly to trunk feel free to send me a pull 
request on github.

Original comment by olau%iol...@gtempaccount.com on 21 Jun 2011 at 5:11

• Changed state: Fixed

[GoogleCodeExporter]

hi !
   i m creating a pie chart for my android app before tht i have created the graph using flot but i m not getting how can i do the same i.e. to plot a pie chart using flot in android.

can anyone tell me the procedure?

Original comment by ans...@sourcebits.com on 12 Aug 2011 at 2:00

[GoogleCodeExporter]

Hello sir
I used google pie chart to display according to the csv file. I want to add 
extra that is onmouseover I want display subdata of each slice. My problem is 
that on any one mouseover event all my fuctions are called..
I want only one function to be called of respective slice..
can you please help me ...
please reply soon...

thanks in advance

Original comment by vaishu....@gmail.com on 19 Jul 2013 at 10:00

[GoogleCodeExporter]

As a quick fix for the Pie Chart not working with 1 series, remove the check 
for msie in draw.  Example:

ctx.beginPath();
if (Math.abs(angle - Math.PI*2) > 0.000000001)
    ctx.moveTo(0, 0); // Center of the pie
    //else if ($.browser.msie)     // THIS WAS COMMENTED OUT TO MAKE 1 SERIES WORK
    angle -= 0.0001;
    //ctx.arc(0,0,radius,0,angle,false); // This doesn't work properly in Opera
    ctx.arc(0,0,radius,currentAngle,currentAngle+angle,false);
    ctx.closePath();
    //ctx.rotate(angle); // This doesn't work properly in Opera
    currentAngle += angle;

Original comment by clshe...@gmail.com on 21 Oct 2013 at 8:54

Attachments:

• jquery.flot.pie.js