D3js Pie Chart for ExtJs 4

Demo: http://antonfisher.com/extjs4-sandbox/

How to use

1. Copy sass file /sass/src/ux/chart/series/D3Pie.scss to your project;

2. Copy js file /app/ux/chart/series/D3Pie.js to your project;

3. Change class name 'Sandbox.ux.chart.series.D3Pie';

4. Add requires:

  requires: [
    ...
    'Sandbox.ux.chart.series.D3Pie'
  ]

5. Update chart config:

{
  xtype: 'chart'
  ...
  cls: 'ux-d3-pie',             // add css class for d3pie
  series: [
    {
      type: 'd3pie',            // change serie type
      d3: d3,                   // add link to d3 library
      angleField: 'value',
      radius: 90,
      donut: 60,
      label: {
        field: 'name',
        legendField: 'legend'
      }
    }
  ]
}

6. Try to change some options.

Options

Option	Description
d3: undefined	{Object} [required] link to D3 library object
radius: undefined	{Number} pie radius ('undefined' for auto)
donut: undefined	{Number} donut radius ('undefined' for auto)
centerX: undefined	{Number} pie center X coordinate ('undefined' for auto)
centerY: undefined	{Number} pie center Y coordinate ('undefined' for auto)
labelTextOffset: 15	{Number} labels offset
angleField: 'value'	{String} store property name for pie value
label: {...}	{Object} label properties
showItemDescription: true	{Boolean} show text description under value
totalTitle: 'TOTAL'	{String} total title
noDataText: 'NO DATA'	{String} no data text
highlightStyle: 'opacity: 0.1'	{String} highlight style for pie item's path
unHighlightStyle: 'opacity: 1'	{String} unhighlight style for pie item's path
filterAngle: 0.25	{Number} hide label when angle is less than this value
border: 0	{Number} pie border
pathStrokeWidth: 1	{Number} pie paths stroke width
pathStrokeColor: '#ffffff'	{String} pie paths stroke color
borderColor: '#eeeeee'	{String} pie border color (if border property > 0)
backgroundColor: '#ffffff'	{String} pie background color
emptyBackgroundColor: '#eeeeee'	{String} empty pie background color

Note: Additionally label object may contain legendField field to show it in legend:

label: {
  field: 'name',
  legendField: 'legend'
}

Renderers:

• totalValueRenderer: function (totalValue, store) {...} {Function} renderer for pie total value
• itemValueRenderer: function (dataItem, totalValue, store) {...} {Function} renderer for item value
• itemDescriptionRenderer: function (dataItem, totalValue, store) {...} {Function} renderer for pie item description

Libraries:

• ExtJs 4
• d3js

Thanks:

• Stephen Boak (@sboak) - http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html

License

Copyright (c) 2014 Anton Fischer

MIT License. Free use and change.