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

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.

Looks fantastic! Have you tried it with a shadow effect?

It is the next step of my experiment.

Shadow, shadow and shadow everywhere

Lookin good. Only I don't think the shadow should show between the pie pieces. Is there a way to change the direction?

how about a diff against flot 0.4

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.

It's really cool. If you can provide the uncompressed version of modified flot.js i'll be very thankful to you.

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?

Here is the unpack version of modified jquery.flot.js

It seems that the pie graph cannot work with one series of data? Am I missing something?

It seems that the pie graph cannot work with one series of data? Am I missing something?

Comment deleted

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 );

How can we get the location i mean the label when mouseover on particular arc ?

anyone have idea?

how can i change the color of any specific series

Does the latest flot version 0.5 support pie charts?

same question - does .5 support pie charts? anybody want to answer this one?

No, I haven't had time to work on flot since the latest patch I made in Feb.

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.

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?

It is a highly desirable feature....

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.

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.

Comment deleted

Comment deleted

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.

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.

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)

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.

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.

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.

Here the updated version (r136) of the patch

The X labels on multibar charts are not offset correctly. Quite frustrating.

I've created a new patch based upon r136 and the code in Comment 34 by fabrizio.ciacchi that adds some new features that I needed.

Pies now support hovering if "hoverable" is set to true in the grid options, though it doesn't work in IE because excanvas doesn't support the isPointInPath function (just never gives a hover event or effect). options.pies supports two new options, "highlightColor" and "highlightOpacity" which control the look of the hover effect. The datapoint passed in the item to the hover event handler will have the first value as the percentage, and the second value as the actual summarized value.

The series data can now be either a raw number or a normal data array that is summarized. The percentage that is calculated is also stored on the series object as "percent" during rendering for later reference.

options.pies now supports an optional "labelFormatter" function that formats the label that is displayed for each series. The first parameter is the calculated percentage, the second parameter is the series object. If no function is supplied, the label is formatted the same as before (just a percent sign).

Hi guys,

I really like that so many people try to improve and extend this but let's have a simple pie chart thing in Flot before making even more changes. If you really want to extend the current base, I suggest you open an account on bitbucket or github with a patch queue so the new additions can be marked clearly. The current attachment flood is a mess.

I did not have the time to review Fabrizio's changes but in my repository (http://oss.schwarz.eu/cgi-bin/hgwebdir.cgi/flot_charts/) you find nicely separated patches by feature. Let's work in a structured way otherwise this will never be done.

Based on felix's comment above, I checked out github and found another branch of flot that seems to have more functionality at http://github.com/thenduks/flot/tree/master. There was some discussion there about adding pie charts, and the conclusion was that due to size flot should probably be broken out into multiple modules for different chart types. I've forked the project at http://github.com/btburnett3/flot/tree/master while I work on it. I'll hopefully have something in a few days.

Hi all, I have updated the patch to r139. There are some bug i have no time to fix: - the X labels on multibars are not aligned (yes, I know that is very frustrating); - for piechart i disable the points valutation in for-cicle (I try to pass from data to datapoints);

I have made a bit of refactoring, so all the "new" functions are at the end of the file, and the other patched part contains "added" part, not sostitution, so I think could be simpler to mantain the future patch.

I'm thinking about mantaining this patch and I wish to fix the multibar chart, that is "orrible" coded. I dont understand however, why pie-chart are not merged into flot, I use this patched version of flot for a webanalytics project and pie-chart seems not to be affected by bugs.

I wish to find a way to mantain a patched version, perhaps I need to think to a way of using different chart with a sort of plugin system, so we can have the core flot regulary updated by this svn, and the patched version only as an adding file to use. I talk about this, cause there are a lot of functionality developed by good programmer (have you seen flot on github?), but is stupid not to mantain link to original project. Another good reason is also that, for example, btburnett3 is adpating flot for YUI framework, not Jquery, so could be beautiful to make flot js-platform-independent.

The first step in getting this merged is a critical review. The code must be in good condition, and it needs to be on par with the rest of Flot when it comes to API quality/usage.

In this weeks I try to bring pie chart to this level and I will give you a patch. For multibar I think it need a complete redesign.

We should really work on coming up with a good plug-in system for flot. It would be nice to just be able to add a js file like 'flot.chart.pie.js after 'flot.core.js' and be able to call $('#placeholder').plot('pie', data, options).

I will use jfreechart and keep on my interest on javascript charting.

Yeah, I agree with a complete redesign to learn some from jfreechart and from dojox.charting. I think if it is depedent on jquery is a good idea.

I have updated the patch to r144. I wish this week I can send the patch for pie chart only.

Updated to r146. The r144 has a bug that make flot not working under IE.

Updated to r147. Attached also a minified version.

Hi Fabrizio, it seems that the patch 147 is ... the source of JQuery. flot is a great lib btw. congrats.

Congratulations for this great job.

I used it the simply way : var data_pie_0 = [ { label: 'Niveau A', data: [[0,2]]}, { label: 'Niveau B', data: [[1,2]]}, { label: 'Niveau C', data: [[2,1]]}, { label: 'Niveau D', data: [[3,0]]} ]; $.plot($('#pie_graph_0'), data_pie_0, { pies: {show: true, labelWidth: 30, fontSize: 10, autoScale: true, fillOpacity: 1} });

You noticed the ZERO data value ---> The last slice recover all the over (under IE) if the zero value is the last data entry, and will be slightly present under the others if it is the first data enry.

I corrected this in the drawMyPieSeries functions: ... startAngle=endAngle; if (series[j].data == 0) endAngle+=0.0001*(2*Math.PI); else endAngle+=pct*(2*Math.PI); ...

Hope this help.

Hi, I'm developing flot wrapper of Ext JS http://code.google.com/p/extflot/

Now, I'm working to migrate pie chart support. I use pathed r148. But it does not work well.

• The series[i].data is overwrited internally, but my wrapper recycles series that is got by getData(), and calls plot() many times... So I propose that the calcurated values from data are hold in another member.

{{{ function preparePieData(series) { for(i = 0; i < series.length; i++) { var ratio = 0; for(j = 0; j < series[i].data.length; j++) ratio += parseInt(series[i].data[j][1]);

            series[i].ratio = ratio;
        }
    }

}}}

• The bar graph does not work well in patched r148. Grid and ticks calcurations are wrong. Please see the following demo... http://extflot.googlecode.com/svn/trunk/pie.html

I think the pie chart support is very good job. So I hope that it is released as official.

I'm sorry my poor English. Thanks,

Hi Fabrizio,

As you may see that I initiated multi bar and pie chart support code, I would like to jump back to the board again because I have a project which involves with graph presentation. Do you want to work together on the "to do" list to improve the code? If so please shoot me email at trieutn@gmail.com. Thanks.

Since the pie chart support doesn't appear to be in a release version, I felt I should post an issue here rather than creating a new issue.

In IE8, excanvas_r3, and flot.r147.patched the last data series color on the pie chart appears gray even though the legend shows a different color for that series. I've attached two screen shots. Not sure if this is a issue with flot or excanvas. Any input would be appreciated.

Thanks, Kyle

Seems like no one talked about how to use the patched js file or apply patch to the current release. Could someone give some instruction?

I tried to attached the patched flot js file together or use patched alone, and it did not work.

Thanks lot!

Hi all, Does any patch will work for pie with tool tip? (in IE)

please help!!! excanvs does not support isPointOnPath,so what will be the solution

Hi all, I made a stripped version of the patch of comment #46 and comment #48.

Thank you guys

• It contains only diff for pie charts.
• Aligned to flot's coding style (bracket placement, tab/space usage).
• Added options.pies.startAngle.

The sample html is also stripped down.

Now, please review this patch and include it in flot release version if it's ok.

Thanks, Hiroaki

Hi

I merged some patches of comment #46, #48, #49, #55 into flot r153.

• Rename options.makeRandomColor to options.shuffleColors
• Skip findNearByItem in pie chart
• Modify pie options and rendering of percent labels. pies: { show: false, radius: null, // or number by px labelRadius: null, // or number by px startAngle: 0, fill: true, fillColor: null, fillOpacity: 0.85, fontStyle: "font-size: normal; font-weight: bold; color:#545454", adjustPosition: true },

I tested it on demo and the following sample.

http://extflot.googlecode.com/svn/trunk/pie.html

Thanks

Hi all

Today, I modified the pie chart support again.

pies: { show: false, radius: null, // or number by px labelRadius: null, // or number by px startAngle: 0, fill: true, fillColor: null, // null or fn or 'value', 'percent', 'label', 'full' // fn: (label, value, percent, textValue, pie, serie, options) -> html labelFormatter: null, labelStyle: 'font-size: normal; font-weight: bold; color:#545454;', bias: [0.3, -1.4, 0.1], // [init, step, threshold] }

"radius" is the radius of pie. If you specify it by number, it passed as the pie radius. If you specify it by null or nothing, the flot determines it by plot area. If legend is shown, radius become smaller.

"labelRadius" is the radius or label area. If you specify it by number, it passed as the label radius. If you specify it by null or nothing, the flot determines it by pie radius.

"labelFormatter" is formatter of each series label. If you specify it by function, like the followings: labelFormatter: function(label, value, percent, textValue, pie, serie, options) { return textValue + '%
' + label + '
(' + value + ')';

}

• label: the label of the serie
• value: the raw value of the serie
• percent: the raw percent value
• textValue: the percent to show. you should add '%' after it.
• pie: the pie informations to show. it contains the following members. radius labelRadius sumSeries anchorX anchorY labelX labelY startAngle endAngle sliceMiddle
• serie: the serie to show in this pie

• options: flot options which is parsed

  "labelStyle" is the style of label div. You can specify it in .pieLabel class
  
  "bias" is the option to ajust position of small pie. You specify it as Array.

• 0: initial value of bias
• 1: the bias for the next bias
• 2: threshold to apply bias. if the percent is smaller than it, the pecent will be biased.
• If you specify null, bias is disabled.

Please see the following example and the attached demo. http://extflot.googlecode.com/svn/trunk/pie.html

Thanks

Nothing beyond r132 (from Feb 18, 2009) seems to work in IE. I have tested all of the versions since then, and they all fail to draw anything and give the javascript error:

'parentNode' is null or not an object

This seems to hold true for both IE6 and IE7 (and nothing seems to work in IE8, see issue #160).

Since the code here didn't seem to work in IE at all, I started with a different pie patch from the Google Group, in this thread: http://groups.google.com/group/flot-graphs/browse_thread/thread/9b1e73e4025b376c/b56101eb1375d1da?pli=1 (So this is an entirely different version than that in the previous comments)

Then I merged those changes into the latest copy of flot from the SVN (since the IE8 issues are fixed in there), and then had to make some tweaks to make it work. Then, since I was at it and had figured out how it worked at that point, I extended it and added some new features including:

* The pie is now centered
* Improvements to the positioned labels/backgrounds
* Pie will be shrunk if the labels would be outside the canvas
* The visual size of the pie can be adjusted
* Slices smaller than a specified percentage can be combined

See the HTML file included in the attached archive for more detail and examples. I included everything needed in the archive including the base version of flot that I started from and the corresponding patch file.

Since flot now has a plugin system, I rewrote my earlier pie patch as a plugin and made a few minor adjustments to it. Should be much easier to use now.

I've included two zip archives, one containing the normal version of the plugin, and one containing a minified version of the plugin (and the most recent -- at the time of this writing -- version of flot).

The included html file is the same as that contained in each of the zip archives, but with all of the minified javascript included, so it should be fully contained and allow you to preview the plugin without having to download the archives.

I must say, this looks very good! (Both the pluginability and the pie plugin itself)

Is there going to be created a place where Flot Plugins are collected and downloadable, or will plugins like these go into the SVN repository ?

Thank you for your great job!

I'll detach my pie chart support from my maintenance. I plan to ask it to users of my pie chart support.

And I'd also like to ask you. Can I take in your pie chart support into my Ext.ux.Flot?

http://code.google.com/p/extflot/ http://extjs.com/forum/showthread.php?t=63364

Thanks

Sure, go right ahead. I mostly needed pie charts for a project and figured I'd give back what I had.

Great stuff! I downloaded the latest and the only issue I have is that I can't create a separate legend container (see attached screenshot).

Now when I try to use the default legend :(

This code that currently works with an older release and creates the provided screenshot pie chart.

        $.plot($("#bond-chart"), data, {
                legend: {
                    show: true,
                    labelFormatter: function(label, series) {
                        return label + ' (' + series.percent.toFixed(2) + '%)';
                    },
                    noColumns: 3,
                    container: $('#bond-legend')
                },
                // series: {
                pie: {
                    show: true,
                    showLabel: false,
                    labelOffsetFactor: 1,
                    radiusLimitFactor: 4 / 5,
                    labelFormatter: function(label, series) {
                        return label;
                    }
                }
                //}
        });

However when I switch to series: { }, legend { } no legend shows I also tried series: { pie: { }, legend: { } } that also didn't produce the required results.

Any help is appreciated and thanks for all the hard work!

Unfortunately, that's a side effect of being a plugin. In order to get flot to not show the grid (i.e. the axis, ticks, and grid lines) I had to end up sending back an empty dataset, which also means no legend. I'm hoping that this can be fixed at a later date but with the current plugin system I haven't been able to find a way to make it work.

What I would need (and which would be fantastic) would be to either add a grid option to hide the grid, or to make the insertLegend function public.

I created a new version of the pie plugin today; this version re-enables the flot legend, but it does require slight modification of the jquery.flot.js file (detailed in the attached examples.html file)

Thanks to Ole Laursen, some suggestions I had made regarding plugins have been added to the SVN so I was able to make the pie plugin a little more intuitive and enable the legend by default again.

Cheers!

This plugin is awesome!

Nevertheless, I guess there is a minor issue with it: it does not support zero (0) values. For instance, a (20, 30, 50, 0) pie. Is this a known limitation?

Thanks!

Nope, that's a new bug, nice catch. I guess I (stupidly) never considered that any of the data values would be set to zero.

Here is a patched file (v0.3.1):

Fixed a minor bug that was causing the pie to be shifted too far left or right when the legend is showing in some cases.

v0.3.2

The value 0 has been omitted in the 0.3.2 ? I hope it can be listed in legend even it's 0 and can see nothing in the pie.

I also fund the value 0 issue in 0.3, I check data before add it to avoid this issue.

Thanks for the flot.pie plugin, it save me from the complex extflot.:)

Since the legend is generated by flot itself, that particular issue is really outside the scope of the pie plugin. If the value is zero, it won't show on the pie, or in the legend (because it assumes there is no data). The issue that was fixed is that it will no longer generate javascript errors that cause nothing to be drawn.

New version (0.4): I was able to figure out that the reason the series weren't being shown when the value was zero was a combination of the way the data is passed in to the plugin, and some weirdness that Flot does in the case that the series is zero, which I was able to handle.

Other changes in this version: * data can now be passed in using the normal Flot method (an array of data points, rather than a single value), and the plugin will simply use the first y-value it finds. The old method still works too. (This should make it easier to transition from other graph types to a pie) * the pie can now be tilted at an angle using a new "tilt" option. Additionally, a drop shadow will be added in most cases.

In some of the previous revisions of this issue, I made some modifications that allowed hovering and highlights on non-IE browsers (excanvas doesn't support isPointInPath, so it won't work in IE).

For everyone's review, I'm posting a modification to version 0.4 that adds support for this to the new plugin version of pie. It adds a little bloat with some duplicated code from flot core, particularly the duplication of the color functionality. Hopefully the core will be updated to make this easier and smaller in the future. It would be particularly easy to make the color functionality accessible from outside core.

Anyway, hopefully if everyone likes this you'll merge it into the version being revised in this thread. Thanks.

That's funny because I was just talking to a co-worker about how mousehovers might work with the pies. I'll take a look at the code when I have a little more time.

Just curious why you would need to duplicate the Flot color functionality, because it seems like all you would need to do is make a lighter (or darker) version of the existing color for the particular series (which is trivial to obtain), in which case you would only need a very small subset of the code that performs that action.

I'm using the parseColor function and Color class to parse the color string, apply an opacity to it, and turn it back into a string to assign to fillColor on the overlay context. There might be a better way to do this using less code, this is just how I was doing it before with the previous hover code in the non-plugin version.

My issue was more or less that I didn't know how to detect if the mouse was over a particular slice or not (and I hadn't really looked into it), but it seems that you have figured that out. I'm thinking that it might be easier to just use a duplicate arc with say a 25% opacity white background directly over top the original in the overlay. I'll have a look at what you have and maybe play around with that.

Hi,

Is it possible to print the graphs to a PDF file?

Anybody?

Hi,

I think it's cool you're working on this. About the color stuff: if it's needed and you figure out what it takes to pull out, just send a patch (e.g. in a new issue) and I'll get it merged.

I think it makes sense to put the pie plugin code in the Flot repository if you want to maintain it. If you're interested, I'll figure out how to add you as a developer so you can write changes directly to SVN.

Printing: I think the best bet is the browser print command. At least Firefox on Linux has a "output to PDF" option.

Hi,

I found a minor issue in the pie when using excanvas with IE. If the graph only has 1 series for 100%, excanvas isn't drawing the graph. I've put a quick patch in by drawing for slightly less than 100% on IE. Currently I'm using $.browser.msie to test for this, but I'm assuming that there's a better way to test if excanvas is being used if anyone has any suggestions.

I've attached the patch here, based on my previous revision that added hover support.

Also, I think it would be a great idea to get the pie support as an extension into the SVN repository. Working with it here in an issue is cumbersome.

Brant

This is SO ridiculous! I love working with jquery and javascript. I'm happy to contribute and release projects but this thing is very frustrating. I need a recent / relatively stable version with pie + hover + horizontal bars. Between the all inclusive branches and plugin branches all appended in this thread it's difficult to know what's what. I have many additions that I expect people would appreciate such as an optional border layout for pie labels and a world map, but I don;t even know which version to use as a base, I currently made my changes to the all inclusive branches. Does anyone have a suggestion for me? I'm about to abandon my work on this plugin alltogether and start searching for something that is better maintained, even if it's a little further back, I might even have to use Flash! ACK! :)

I included my pie updates to those of btburnett3 and posted them here: http://suddendevelopment.com/?p=59

all of the updates are optional. They are: Border layouts for labels. Inner Radius for Donut hole. Created a workaround to allow hover in IE.

Sorry I am a newcomer to Flot Pie charts. I got a wonderful fine working presentation: http://suddendevelopment.com/?p=59 However it conflicts with jquery-ui-1.7.2.custom.min.js which I actually also need.

Could anybody teach me the best library download set for: - excanvas - jquery - jquery-ui - jquery.flot - jquery.flot.pie - jquery.rightClick

Now if I try jquery.flot.pie, I get a mess of libraries. How can I make them work friendly?

Sincerely, Yury.

Has anyone done any work on making the pie slices themselves clickable, and not just the labels?

If anyone has done something like this, or has ideas on where to start on making this happen, let me know at ljarmin@umich.edu Thanks!

before pie slice click event is created, I want to know how to add click event for the label, with or w/o legend.

Thanks, Benjamin

Can I ask why this plugin is not yet into the SVN?

It would be much easier to have the latest version if it was...

I haven't had any time to work on this lately, as I've been frantically working on the project that originally prompted my need for the pie graphs, but that it nearing completion and I should hopefully have some time to devote to this in the near future.

I agree, adding the plugin to the repository would be great, let me know if there is anything that you need from me in terms of getting that set up.

It looks like doing the mouse hovers isn't going to be too difficult, and I'd like to also add the ability to use click events on the pie slices as well, but I haven't looked into the base code for that portion at all yet, so I don't know how difficult that is going to be.

Thanks for having time to answer my question!

I think that "bugs" of the plugin are acceptable, because the plugin works well (except the known-issues), and it would be great to have it in the SVN as it is now (maybe with a "known-issues" text).

That way, this issue could be closed (pie charts DO exist now for flot), and it would be much easier for you and for everyone else to continue developing the plugin (just sending patches agains svn version when an improvement is done or a bug is fixed), and of course it would be much easier to download last version without the need of reading all issue's thread to find where are last patches applied (currently, if I'm not wrong, they're at comment #82 ( http://code.google.com/p/flot/issues/detail?id=5#c82 )

the.dOrp (sorry, I don't know your name): do you think it's a good idea to send last version (in comment #82) to Ole Laursen and ask him to include it in svn?

It was actually Ole Laursen's idea to add the plugin to the repository. I think its a great idea, and will do what I can with it.

My name is actually Brian Medendorp (and you can probably see where the username came from), but apparently there is no way to change the display name in google code? I haven't been able to find anyway to do that.

Comment deleted

Hi guys, love the work you've done on flot by adding a pie chart. It took me a while, but I've added the ability to use gradient fills in the pie chart. When I have time I'll work on reflecting that in the legend area (right now it just shows the begin gradient color).

I implemented it by using the regular slice color and using the colors specified in the gradient option to form a gradient. It looks okay when two colors are used and less nice when multiple colors are used.

Anyways, I'm including the changes I made, incase someone wants to use them or make it better. Thanks to Brian Medendorp, Anthony Aragues, and everyone who made this plugin possible.

Issue 67 has been merged into this issue.

Brian: I'm going to add you as developer right now. I'm not going to try to guess which one of the files here I need to add. :) If you just add the plugin code alongside the other plugins in the root and stick the example in examples/ with a link from index.html, then let's take it from there. We can always figure out whether another structure is better later.

I'll assign bug reports about the pie plugin code, if any :), to you in the future. Once the feedback on this issue is incorporated, we should probably close it.

Yesterday, I found a bug in the pie plugin.

It's a conflict if you have prototype on the same page. ([off-topic] it's a wordpress plugin that needs prototype, so I'm wondering if disabling it because too many javascript libraries..)

Prototype adds some functions to extend the native array object, and that's why for(... in ...) stops working as it worked before.

So what they propose is instead of using

for(var item in myArray) { // Your code working on item here... }

use

for (var index = 0; index < myArray.length; ++index) { var item = myArray[index]; // Your code working on item here... }

or, still better in very large arrays

for (var index = 0, len = myArray.length; index < len; ++index) { var item = myArray[index]; // Your code working on item here... }

I attach the modified file, and a diff with the old version.

Sorry, I forgot to attach the files

Ole: Thanks for adding me as a developer!

I've been working on adding a number of the patches into the base of the pie plug-in, but I think I am going to wait until I get all of them incorporated before committing the first version (which should be sometime next week).

Right now I've added a number of the bug fixes and the donut hole option, and still need to add and test the hover functionality (and I see no reason why I can't add clicks at the same time), and possibly the gradient options. I don't see any reason to add in the label border options because that can already be accomplished with a labelFormatter function and/or CSS.

Unless my versions are all out of whack, pie chart hovers/mouseovers do not seem to work properly in current versions of Chrome and Safari. Playing around with the pie code, it looks like isPointInPath returns false for most points in Webkit where Firefox returns true. There's an open bug or two in webkit about this right now which could be the source of this issue (haven't put on my thinking cap tight enough to run through the full math of the code).

https://bugs.webkit.org/show_bug.cgi?id=30402

My solution for the moment was simply to always fall back on the in-code function isPointInPoly for all browsers. Probably slower, but works in all of them.

Comment deleted

There are so many versions of the pie code right now I don't think I'll add another file to the mix until it's actually committed. My fix was simply to replace the line (in my copy, it's on line 544):

if(ctx.isPointInPath){

with

if(false && ctx.isPointInPath){

This is certainly not the desired functionality in the long run, just a simple workaround to meet a deadline :)

Hi, Brian, waiting for you.

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

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.

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.

Thanks, Brian!

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

sorry, it is my mistake. :(.

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

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.

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...

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

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?

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}]

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

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

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.

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.

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.

honglilai, great patches!

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. :)

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

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 ;)

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

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?

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?

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?

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

@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

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

Comment deleted

@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

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

Comment deleted

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

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.)

Attached a patch to support a custom label.

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

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.

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?

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

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;