Saturday, February 12, 2011

Creating charts using AS3: Part 20

Today we'll fill the sections of our brick chart with colors!

Here's how it is going to look like:


The first thing we do is add the col2 parameter to the main data array:

var myData:Array = [{val:51,col:0x00CCFF,col2:0x07ABD4,lab:"Internet Explorer"},{val:31,col:0xCC0000,col2:0xB10101,lab:"Firefox"},{val:10,col:0x00CC66,col2:0x03A654,lab:"Chrome"},{val:4,col:0xFF9966,col2:0xE2723A,lab:"Safari"},{val:3,col:0x999999,col2:0x777575,lab:"Other"}];

We don't need to draw our green-ish base for the brick anymore. We simply draw the sections separately and fill them. Here's the full code:

import flash.display.Shape;

var myData:Array = [{val:51,col:0x00CCFF,col2:0x07ABD4,lab:"Internet Explorer"},{val:31,col:0xCC0000,col2:0xB10101,lab:"Firefox"},{val:10,col:0x00CC66,col2:0x03A654,lab:"Chrome"},{val:4,col:0xFF9966,col2:0xE2723A,lab:"Safari"},{val:3,col:0x999999,col2:0x777575,lab:"Other"}];

var myChart:Shape = new Shape();
addChild(myChart);

drawChart(300, 140, 200, 380, 40);

function drawChart(theHeight:Number, theWidth:Number, baseCenterX:Number, baseCenterY:Number, closure:Number):void
{
myChart.graphics.clear();

var totalVal:Number = 0;

for (var i:int = 0; i<myData.length; i++)
{
totalVal +=  myData[i].val;
}

var heightPerVal:Number = theHeight / totalVal;
var previousHeight:Number = baseCenterY;

for (var a:int = 0; a<myData.length; a++)
{
myChart.graphics.beginFill(myData[a].col);
myChart.graphics.moveTo(baseCenterX-theWidth/2, previousHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.lineTo(baseCenterX+theWidth/2, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.lineTo(baseCenterX+theWidth/2, previousHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, previousHeight);
myChart.graphics.endFill();
myChart.graphics.beginFill(myData[a].col2);
myChart.graphics.moveTo(baseCenterX+theWidth/2, previousHeight);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, previousHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, previousHeight - myData[a].val * heightPerVal - closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.endFill();
previousHeight = previousHeight - myData[a].val * heightPerVal;
}

myChart.graphics.beginFill(myData[myData.length-1].col);
myChart.graphics.moveTo(baseCenterX+theWidth/2, baseCenterY-theHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, baseCenterY-theHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.endFill();

}

Thanks for reading!

Related:

Creating charts using AS3: Part 1
Creating charts using AS3: Part 2
Creating charts using AS3: Part 3
Creating charts using AS3: Part 4
Creating charts using AS3: Part 5
Creating charts using AS3: Part 6
Creating charts using AS3: Part 7
Creating charts using AS3: Part 8
Creating charts using AS3: Part 9
Creating charts using AS3: Part 10
Creating charts using AS3: Part 11
Creating charts using AS3: Part 12
Creating charts using AS3: Part 13
Creating charts using AS3: Part 14
Creating charts using AS3: Part 15
Creating charts using AS3: Part 16
Creating charts using AS3: Part 17
Creating charts using AS3: Part 18
Creating charts using AS3: Part 19
Creating charts using AS3: Part 21

No comments:

Post a Comment