Donut Charts in AS3

Most of what I write comes from goals that I must achieve through my work and when I search the web to figure out how to do those I find very little information. So usually once I have figured it out I write a post about it. I was looking to create some donut charts which are basically pie charts but with a mask on them to make a hole in the middle. All I could find on the web was solutions that you had to pay for, bundles of charts that looked really bad. So I thought it shouldn’t be that bad to just to them from scratch.

Well I actually didn’t do them from scratch, first I translated some old ActionScript 2 found here to make the donut mask and I used Lee Brimelow wedge class to create the subdivision of the chart. So here are four examples of what you can do with it:

 

This movie requires Flash Player 9

 

And here is the code used to create them:

var wedgeVector:Vector.<ChartWedgeInfo> = new Vector.<ChartWedgeInfo>();
wedgeVector.push(new ChartWedgeInfo(0.3, 0x70ddff));
wedgeVector.push(new ChartWedgeInfo(0.21, 0x56baec));
wedgeVector.push(new ChartWedgeInfo(0.3, 0x2b78d2));
 
_donut1 = new DonutChart(50, 20, 0x1e457a, wedgeVector);
_donut1.x = 60;
_donut1.y = 60;
addChild(_donut1);
 
var wedgeVector2:Vector.<ChartWedgeInfo> = new Vector.<ChartWedgeInfo>();
wedgeVector2.push(new ChartWedgeInfo(0.5, 0xfca25a));
 
_donut2 = new DonutChart(40, 10, 0x821626, wedgeVector2);
_donut2.x = 180;
_donut2.y = 60;
addChild(_donut2);
 
_donut3 = new DonutChart(30, 25, 0x56baec);
_donut3.x = 300;
_donut3.y = 60;
addChild(_donut3);
 
var wedgeVector3:Vector.<ChartWedgeInfo> = new Vector.<ChartWedgeInfo>();
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xfca25a));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xfd8332));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xde4649));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xaa2c34));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0x821626));
 
_donut4 = new DonutChart(50, 30, 0x821626, wedgeVector3);
_donut4.x = 420;
_donut4.y = 60;
addChild(_donut4);

I think it is pretty easy to use. Here are some considerations; if you don’t give in any wedge info, it will just draw a donut, you can give more than 100% for your chart it will just loop, and the chart 0,0 is at the center of the donut. So here you go, you can just download the files below. I think it could be improved a little and there is no options to put labels or anything but it should fit more use cases that way.

DonutChartsSource

, , , ,

  1. #1 by Shaun - April 13th, 2011 at 09:52

    Ah hah! You just made my flash-day.

  2. #2 by polyGeek - April 15th, 2011 at 13:06

    Ummmmm donuts! :-)

    Nice work. I’m already thinking of a place to use this, with slight modifications, in 3D.

  3. #3 by nolia - May 6th, 2011 at 14:12

    Any idea of how to do a half donut?

  4. #4 by Flash Stock Files - July 21st, 2011 at 07:02

    Eat the other half :) . kidding. give it a smaller percentage 50% or a background color. Am i right?

  5. #5 by Jim - March 7th, 2012 at 10:50

    I want to use this! Call me dumb, but where you’ve got Vector. – am I supposed to replace with something? I get an error “expecting identifier before lessthan”

  6. #6 by Jim - March 7th, 2012 at 10:53

    @Jim
    Erm. Vector.<ChartWedgeInfo> I mean.
    Do I need to replace the <ChartWedgeInfo>

  7. #7 by @ryanpudloski - July 16th, 2012 at 22:39

    Are we free to use this code on a site for a client? Great start for me – I am not great with math and circles.

  8. #8 by Amber - February 24th, 2014 at 07:45

    Amber : my donut placed at left side of the screen and only 1/4 of the donut showed? what should i do? i only copy and paste the code. thanks for the help

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.