Pie Charts #84

dnschnur · 2012-09-28T20:08:28Z

Original author: mmihajlo...@gmail.com (December 06, 2007 18:39:18)

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

Original issue: http://code.google.com/p/flot/issues/detail?id=5

dnschnur · 2012-09-28T20:08:29Z

From trie...@gmail.com on February 07, 2008 21:22:07
I have added pie chart + multiple bars chart support functions. Please take a look
at demo.html, and also svn diff in diff.txt file.

dnschnur · 2012-09-28T20:08:29Z

From mmihajlo...@gmail.com on February 07, 2008 21:31:36
Looks fantastic! Have you tried it with a shadow effect?

dnschnur · 2012-09-28T20:08:30Z

From trie...@gmail.com on February 07, 2008 21:35:28
It is the next step of my experiment.

dnschnur · 2012-09-28T20:08:30Z

From trie...@gmail.com on February 27, 2008 21:02:03
Shadow, shadow and shadow everywhere

dnschnur · 2012-09-28T20:08:30Z

From mmihajlo...@gmail.com on February 28, 2008 05:18:36
Lookin good. Only I don't think the shadow should show between the pie pieces. Is
there a way to change the direction?

dnschnur · 2012-09-28T20:08:30Z

From mainstre...@gmail.com on March 11, 2008 15:53:09
how about a diff against flot 0.4

dnschnur · 2012-09-28T20:08:31Z

From trie...@gmail.com on March 11, 2008 20:17:02
Here is the diff. FYI, the code also has functionality to show data click point but
I don't have time to make a demo page.

dnschnur · 2012-09-28T20:08:31Z

From samithav...@gmail.com on March 26, 2008 03:26:53
It's really cool. If you can provide the uncompressed version of modified flot.js
i'll be very thankful to you.

dnschnur · 2012-09-28T20:08:31Z

From row....@gmail.com on April 01, 2008 18:26:26
What do you patch diff04.txt against? I tried patching the patched v0.3 version and
the current v0.4 version and both did not fully patch, can you provide a pre patched
unpacked version or instructions on what to patch and in what order?

dnschnur · 2012-09-28T20:08:31Z

From trie...@gmail.com on April 03, 2008 13:50:18
Here is the unpack version of modified jquery.flot.js

dnschnur · 2012-09-28T20:08:32Z

From mmihajlo...@gmail.com on July 16, 2008 11:27:16
It seems that the pie graph cannot work with one series of data? Am I missing something?

dnschnur · 2012-09-28T20:08:32Z

From mmihajlo...@gmail.com on July 16, 2008 11:28:05
It seems that the pie graph cannot work with one series of data? Am I missing something?

dnschnur · 2012-09-28T20:08:32Z

From jimmy...@gmail.com on July 23, 2008 11:01:56
var dataSet = [{label:"title1", data:[[0, 100]]},
{label:"title2", data:[[1, 200]]},
{label:"title3", data:[[2, 300]]}];
var options = {
pies: { show: true, autoScale: true, fillOpacity: 1 }
};
$.plot($("#pieChart"), dataSet, options );

dnschnur · 2012-09-28T20:08:33Z

From koneru.chowdary on August 25, 2008 10:04:52
How can we get the location i mean the label when mouseover on particular arc ?

anyone have idea?

dnschnur · 2012-09-28T20:08:33Z

From youak...@gmail.com on September 16, 2008 19:53:46
how can i change the color of any specific series

dnschnur · 2012-09-28T20:08:33Z

From ari...@gmail.com on November 21, 2008 10:13:56
Does the latest flot version 0.5 support pie charts?

dnschnur · 2012-09-28T20:08:34Z

From Luc.Pett...@gmail.com on December 08, 2008 22:27:10
same question - does .5 support pie charts? anybody want to answer this one?

dnschnur · 2012-09-28T20:08:34Z

From trie...@gmail.com on December 09, 2008 14:38:47
No, I haven't had time to work on flot since the latest patch I made in Feb.

dnschnur · 2012-09-28T20:08:34Z

From trie...@gmail.com on December 09, 2008 14:53:42
to change colors for any specific series, you can define option as follows:

var options = {colors: ["#9440ed","#4da74d", "#edc240","#afd8f8","#cb4b4b"]}

the order of colors corresponded of data order defined in data set variable.

dnschnur · 2012-09-28T20:08:34Z

From bertvand...@gmail.com on December 15, 2008 17:18:32
Would be really helpful if the code could be either supplied in a .js file that could
be used next to jquery.flot.js (version 0.5) or included in this file, so webapps can
use the pie chart together with the flot chart more easily. Is this do-able?

dnschnur · 2012-09-28T20:08:35Z

From singh.gu...@gmail.com on January 05, 2009 06:27:56
It is a highly desirable feature....

dnschnur · 2012-09-28T20:08:35Z

From fabrizio...@gmail.com on January 08, 2009 10:45:42
I'm available to integrate the diff04.txt into the newer 0.5 jquery.flot.js.
Please write me to coordinate for this issue, cause I wish to know if is possible to
integrate directly in the development version.

dnschnur · 2012-09-28T20:08:35Z

From felix.sc...@oss.schwarz.eu on January 08, 2009 10:52:38
Hi Farbrizio, unfortunately I don't have any email address from you but I need pie
charts within the next week for flot so I will do at least port it to 0.5. If you
need help just contact me directly at felix.schwarz@oss.schwarz.eu. Resources like hg
repository with patch queue containing initial merge with 0.5 available at my site.

dnschnur · 2012-09-28T20:08:36Z

From fabrizio...@gmail.com on January 08, 2009 15:51:28
I have modified the r120 applying the patch. All seems to work perfectly.

Here the patch, jquery (r120) patched and a demo.

I have cutted the DrawBar improvement cause it doesnt work under the demo, so I
prefer to make pie chart working (and I dont need the Bar improvement).

Please advise me if this changes will be merged in the SVN, so I will continue to use
latest version insted of mine.

I suggest also to change the release number (0.6?), due to the fact that 0.5 has no
pie support.

dnschnur · 2012-09-28T20:08:37Z

From felix.sc...@oss.schwarz.eu on January 12, 2009 17:10:30
Fabrizio, thanks for your patch porting. I continued your work because your patch is
not fully aligned to flot's coding style (bracket placement, tab/space usage).
Furthermore it still contains some pieces from the bar chart patch. I also built an
HTML example page suitable (hopefully) for inclusion in flot's example directory
which just shows the pie chart usage.

I'm not yet finished with the cleanup but I wanted to avoid duplicate work so I
pushed my patches in a hg repository where you can always access the latest version:
http://oss.schwarz.eu/cgi-bin/hgwebdir.cgi/flot_charts/

My patches diffed against float 0.5 because I need this working on a stable version
but I think it is quite easy re-doing them against SVN trunk)

Issues still open:

pie chart patch still contains unrelated things (random color)
data interface for pie charts is not that nice: Currently it is the same as for
normal time series. But pie charts should imho just get a single value. There is
another pie chart implementation
(http://groups.google.com/group/flot-graphs/browse_thread/thread/9b1e73e4025b376c)
which gets this right. Probably I will try to port this interface.

dnschnur · 2012-09-28T20:08:37Z

From ciar...@gmail.com on January 30, 2009 21:20:41
Hi Felix, I can't seem to apply your patches to the released 0.5, is there something
special I should be doing :( ... even when I strip out the 'diff -r xxx' lines and
apply the patches individually in the order specified in 'series' I get invalid hunk
complaints :(

I'd really like to get the pie-charts working from your patch, with the gradient
support provided in the trunk. (p.s. I'm loving the new charts in Agilo)

dnschnur · 2012-09-28T20:08:37Z

From felix.sc...@oss.schwarz.eu on January 30, 2009 21:55:33
After looking at my patches, I noticed that - opposed to my previous post - I diffed
them against trunk (r122).

Btw: I did some serious cleanup on my patches so the only outstanding issue is the
data interface for piecharts.

dnschnur · 2012-09-28T20:08:38Z

From fabrizio...@gmail.com on February 18, 2009 14:49:45
Hi,
here I have worked on the patch diff for r132

There are some hacks for multibar, due to some bug i have found (like labels not
exactly under the bars), and for these reasons multibar is not perfect. I use
currently the pie-chart for my project and I have no side-effect (like the multi-bar
instead).

-Fabrizio.

dnschnur · 2012-09-28T20:08:38Z

From hui...@gmail.com on February 21, 2009 05:36:06
Can the pie chart support json data? :). I will test it.
Also, I suggest that we can make a change to the json data input to select the column
that will be plotted.

dnschnur · 2012-09-28T20:08:38Z

From fabrizio...@gmail.com on February 23, 2009 09:08:51
Here the updated version (r136) of the patch

dnschnur · 2012-09-28T20:09:05Z

From david.mc...@gmail.com on December 16, 2009 19:09:26
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.

dnschnur · 2012-09-28T20:09:06Z

From t.bub...@gmail.com on December 23, 2009 22:59:42
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...

dnschnur · 2012-09-28T20:09:06Z

From mulke...@gmail.com on December 24, 2009 09:20:48
Is it possible to display series percentage values with floating point?

dnschnur · 2012-09-28T20:09:07Z

From izi...@gmail.com on March 08, 2010 20:59:19
There is an issue (in IE, not FF), that when

tilt=0.5
graph box is small
only one Series

Then no pie chart displayed.

Any clue?

dnschnur · 2012-09-28T20:09:07Z

From gfborn@gmail.com on April 04, 2010 10:30:08
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}]

dnschnur · 2012-09-28T20:09:07Z

From bugmas...@gmail.com on April 08, 2010 00:27:28
Is there an easy way to arrange the pie slices clockwise, as opposed to the current
counterclockwise arrangement ?

dnschnur · 2012-09-28T20:09:08Z

From erchidam...@gmail.com on May 24, 2010 11:29:38
If only one Series Then no pie chart displayed.
Please let me know is this issue solved

dnschnur · 2012-09-28T20:09:08Z

From hongli...@gmail.com on May 28, 2010 10:01:16
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.

dnschnur · 2012-09-28T20:09:09Z

From hongli...@gmail.com on May 28, 2010 10:12:09
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.

dnschnur · 2012-09-28T20:09:09Z

From hongli...@gmail.com on May 28, 2010 10:33:00
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.

dnschnur · 2012-09-28T20:09:09Z

From xavi.ivars on May 28, 2010 10:56:38
honglilai, great patches!

dnschnur · 2012-09-28T20:09:10Z

From hongli...@gmail.com on May 29, 2010 08:32:54
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. :)

dnschnur · 2012-09-28T20:09:10Z

From hongli...@gmail.com on May 29, 2010 08:36:17
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

dnschnur · 2012-09-28T20:09:11Z

From beetlef...@gmail.com on June 02, 2010 09:07:36
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 ;)

dnschnur · 2012-09-28T20:09:11Z

From hongli...@gmail.com on June 02, 2010 09:09:10
beetlefeet, I'm just using the one in SVN.

dnschnur · 2012-09-28T20:09:11Z

From aneeshab...@gmail.com on June 03, 2010 12:27:46
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?

dnschnur · 2012-09-28T20:09:12Z

From tanja.pi...@gmail.com on June 23, 2010 17:35:40
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?

dnschnur · 2012-09-28T20:09:12Z

From Josh.K...@gmail.com on July 08, 2010 18:24:46
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/9b1e73e4025b376c/b56101eb1375d1da?#b56101eb1375d1da). Is there a general way to get pie charts working with Flot?

dnschnur · 2012-09-28T20:09:13Z

From stephen....@gmail.com on July 20, 2010 13:26:23
Is is possible to have more than one graph on a single page?

dnschnur · 2012-09-28T20:09:13Z

From dmitry.g...@gmail.com on August 09, 2010 08:26:00
@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

dnschnur · 2012-09-28T20:09:13Z

From hongli...@gmail.com on August 14, 2010 15:33:05
I've applied my patches along some extra documentation to my temporary fork: http://github.com/FooBarWidget/flot/commit/97b9d76c7da15d54fee3f04f1356f43b1f936523

dnschnur · 2012-09-28T20:09:14Z

From mikelper...@gmail.com on October 14, 2010 07:47:28
@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

dnschnur · 2012-09-28T20:09:14Z

From a.awad2...@gmail.com on December 13, 2010 10:57:06
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

dnschnur · 2012-09-28T20:09:15Z

From elavazha...@gmail.com on December 20, 2010 10:42:04
Try adding the legend control separately. For example,
yaxis:{
........
},
legend: {
show: true,
position: "ne",
container: document.getElementById('legendDiv')
}

dnschnur · 2012-09-28T20:09:16Z

From arithmet...@gmail.com on December 20, 2010 16:47:10
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.)

dnschnur · 2012-09-28T20:09:16Z

From raphael....@gmail.com on June 20, 2011 22:15:42
Attached a patch to support a custom label.

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

dnschnur · 2012-09-28T20:09:16Z

From olau%iol...@gtempaccount.com on June 21, 2011 17:11:19
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.

dnschnur · 2012-09-28T20:09:17Z

From ans...@sourcebits.com on August 12, 2011 14:00:15
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?

dnschnur closed this as completed Sep 28, 2012

dnschnur mentioned this issue Sep 28, 2012

Interactivity is busted for Pie Pack code #146

Closed

Pie Charts #84

Pie Charts #84

Comments

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012

dnschnur commented Sep 28, 2012