Pie Charts

Default pie chart

 

The default pie chart with no options set.

Source Code

$.plot('#placeholder', data, {
    series: {
        pie: {
            show: true
        }
    }
});

Pie Options

• option: default value - Description of option
• show: false - Enable the plugin and draw as a pie.
• radius: 'auto' - Sets the radius of the pie. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length. If set to 'auto', it will be set to 1 if the legend is enabled and 3/4 if not.
• innerRadius: 0 - 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.
• startAngle: 3/2 - 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).
• tilt: 1 - 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).
• shadow:
  • top: 5 - Vertical distance in pixel of the tilted pie shadow.
  • left: 15 - Horizontal distance in pixel of the tilted pie shadow.
  • alpha: 0.02 - Alpha value of the tilted pie shadow.
• offset:
  • top: 0 - Pixel distance to move the pie up and down (relative to the center).
  • left: 'auto' - Pixel distance to move the pie left and right (relative to the center).
• stroke:
  • color: '#FFF' - Color of the border of each slice. Hexadecimal color definitions are prefered (other formats may or may not work).
  • width: 1 - Pixel width of the border of each slice.
• label:
  • show: 'auto' - Enable/Disable the labels. This can be set to true, false, or 'auto'. When set to 'auto', it will be set to false if the legend is enabled and true if not.
  • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
  • threshold: 0 - Hides the labels of any pie slice that is smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will hide all slices 3% or less of the total.
  • formatter: [function] - This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function. The labels can also still be styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1 .pieLabel").
  • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
  • background:
    • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the slice.
    • opacity: 0 - Opacity of the background for the positioned labels. Acceptable values range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.
• combine:
  • threshold: 0 - Combines all slices that are smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will combine all slices 3% or less into one slice).
  • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the first slice to be combined.
  • label: 'Other' - Label text for the combined slice.
• highlight:
  • opacity: 0.5 - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date.

Changes/Features

• v1.0 - November 20th, 2009 - Brian Medendorp
• The pie plug-in is now part of the Flot repository! This should make it a lot easier to deal with.
• 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).
• 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.
• Included a bug fix submitted by btburnett3 to display a slightly smaller slice in the event that the slice is 100% and being rendered with Internet Explorer. I haven't experienced this bug myself, but it doesn't seem to hurt anything so I've included it.
• The tilt value is now used when calculating the maximum radius of the pie in relation to the height of the container. This should prevent the pie from being smaller than it needed to in some cases, as well as reducing the amount of extra white space generated above and below the pie.
• Hover and Click functionality are now availabe!
  • Thanks to btburnett3 for the original hover functionality and Anthony Aragues for the modification that makes it compatable with excanvas, this was a huge help!
  • Added a new option (highlight opacity) to modify the highlight created when mousing over a slice. Currently this just uses a white overlay, but an option to change the hightlight color will be added when the appropriate functionality becomes available.
  • I had a major setback that required me to practically rebuild the hover/click events from scratch one piece at a time (I discovered that it only worked with a single pie on a page at a time), but the end result ended up being virtually identical to the original, so I'm not quite sure what exactly made it work.
  • Warning: There are some minor issues with using this functionality in conjuction with some of the other more advanced features (tilt and donut). When using a donut hole, the inner portion still triggers the events even though that portion of the pie is no longer visible. When tilted, the interactive portions still use the original, untilted version of the pie when determining mouse position (this is because the isPointInPath function apparently doesn't work with transformations), however hover and click both work this way, so the appropriate slice is still highlighted when clicking, and it isn't as noticable of a problem.
• Included a bug fix submitted by Xavi Ivars to fix array issues when other javascript libraries are included in addition to jQuery