The charting library that we initially released a couple years ago has now grown into a fully fledged data visualization library with Tiny Charts, Regular Charts, Gauges, Calendar, Treemap, and many more. In this release, the charts are all getting a facelift. The most amount of work went into the Pie Chart.

A number of API additions were made:

  •  
    • animationMode: fade,sweep,explode,explodeAndSweep. How to animate the pie chart. Supported modes are fade,sweep, and explode.
    • totalDegrees : The max degrees for this pie. Defaults to 360. Max 360.
    • startAngle : The angle for the first pie.
    • pieSelectedOffset : How far out to draw the selected pie slice.
    • pieSliceRadiusPercent : What percent of the overall chart should the pie take. If the chart is 50x50, and the pieSliceRadiusPercent is 50, then the pie will be of 25 radius. This is useful when you want to have large labels that sit outside the individual pie slices.
    • drawArcUsingGraphicsPath : Boolean flag that instructs the painter to use the Graphics path based drawing for regular charts. Only supported for 2d pie chart.
    • bezelBrightness : How much to darken the pie color by for the bezel. Only for 2d Pie charts.
    • bezelDistance : The distance of the bezel for 2d pie charts.
    • threeDShadeIntensity : Default shading intensity for the 3d pie painter
    • showLabelsOnPie : Flag to show text input labels with percentages on the pies.
    • pieLabelOffset : How far out (or in) to draw the label relative to the edge of the pie
    • pieLabelFunction : The label function for the label on the pie slice. Should take a PlotPoint, and return an String

For regular charts, we added support for a background striped pattern for all the Charts. The following properties were added to make this happen:

+                      /**

+                      *  The part that draws the background

+                      */                   

+                      public var backgroundPattern:Group;

+                      /**

+                      *  If this flag is set to true, the stripes are drawn vertically,

+                      * otherwise they are drawn horizontally.

+                      */                   

+                      public var backgroundStripesVertical:Boolean=false;

+                      /**

+                      * Flag to enable background stripes for this chart.

+                      */                   

+                      public var enableBackgroundStripes:Boolean=true;

We also added support to darken/lighten the series on rollover : +                      /**

+                      * If you set this to true, the  chart will darken the series on rollover.

+                      */                   

+                      public var darkenOnRollOver:Boolean=true;

+                      /**

+                      * If you set this darkenOnRollOver to true, the chart will darken the series on rollover.

+                      * The darkening will happen by this amount

+                      */                   

+                      public var darkenOnRollOverOffset:int=-0x30;

+                      /**

+                      * When using the default fills (which are colors), you can control apply a global alpha value.

+                      */                   

+                      public var defaultItemAlpha:Number=.8;

 

In addition, we added ability to show/hide series or items.

Lets take a quick look at what this looks like:

 

 

 

 

 

Below is a full flex project with sample code that is used in the screenshots above.

 

ChartSamples.zip (39.48 kb)