Flex/AS Component - actionscript-3

Question

Hi i want to make a component to draw a Graph like this:
However, the Area under the Graph should be filled with red color. I have 2 different types of values i use on x value i want to use time and on the y i want to use money value both ints but how should i start? My Idea on start was to draw Sprites with Vector but that dont work, because he starts on top left regular zero point and i cant fill the complete area under the graph.
package
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.geom.Point;
[SWF(backgroundColor="0xFFFFFF" , width="500" , height="500")]
public class Highprofil extends Sprite
{
public function Highprofil()
{
var drawSprite:Sprite = new Sprite();
var localPoint:Point = drawSprite.localToGlobal(new Point(0,999));
var money:Array = new Array(1,2,10,20,10,2,1);
var time:Array = new Array(12,58,52,41,66,98,3);
var geo:Shape=new Shape();
var testdata:Vector.<Number>=new Vector.<Number>;
for(var i:int=0;i<money.length;i++){
testdata.push(money[i]);
testdata.push(time[i]);
}
var commands:Vector.<int> = new Vector.<int>();
for(var j:int=0;j<money.length;j++){
commands.push(j);
}
drawSprite.graphics.beginFill(0xFFFF0000); // Color Red
drawSprite.graphics.drawPath(commands, testdata); // Draw the path
drawSprite.graphics.endFill();
addChild(drawSprite);
}
}
}
This will be a Uicomponent dont know if its easier to realize in flex component, but actually it doesnt even look close like a graph.

Answer 1

The code you have there misses some points clearly stated in the docs of Graphics.drawPath() and has some indentation issues ;) .
The most important part is, that the commands Vector should contain values from GraphicsPathCommand, in your case 2 for LINE_TO to draw lines between the coordinates.
Then to get the desired graph, you need to order the X values (and the Y values accordingly). I ordered those values manually in the code and made up my own Y values for testing.
Then in your loop you first added the Y values and then the X values to testdata, but it needs to be the other way around [x, y, x, y, x, y,...].
Only doing this gave me a great graph that pointed downwards. So I continued with tweaking the code a little bit (see comments)and came up with this:
http://wonderfl.net/c/6BrY
(there you can fork it and play with it seeing the result instantly)
for direct/later reference here is the code only:
package {
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.GraphicsPathCommand;
public class FlashTest extends Sprite {
public function FlashTest() {
var drawSprite:Sprite = new Sprite();
//the values for the X axis need to be sorted!
var time:Array = new Array( 3, 12, 41, 52, 58, 66, 98);
var money:Array = new Array( 4, 3, 9, 20, 10, 8, 15);
var testdata:Vector.<Number>=new Vector.<Number>();
var commands:Vector.<int> = new Vector.<int>();
var currentY:Number, maxY:Number = 0;
//some "scaling" for the values, otherwise those are pixels
const scaleX:int = 3, scaleY:int = 10;
for(var i:int=0;i<money.length;i++){
//first X values!
testdata.push(time[i]*scaleX);
//then Y values
currentY = money[i]*scaleY;
testdata.push(-currentY);//adding negative values so the graph goes upwards
if(currentY > maxY){
maxY = currentY;//keep track of highest point in graph
}
commands.push(GraphicsPathCommand.LINE_TO);
}
//get the graph back to zero maxX/0 so it gets filled correctly (independent of last X value)
testdata.push(time[time.length-1]*scaleX, 0);
commands.push(GraphicsPathCommand.LINE_TO);
drawSprite.graphics.beginFill(0xFFFF0000);
drawSprite.graphics.drawPath(commands, testdata);
drawSprite.graphics.endFill();
addChild(drawSprite);
drawSprite.y = maxY + 10;//moving the sprite down so the graph is completely visible (+10 pixel padding)
drawSprite.x = 10;//(+10 pixel padding)
}
}
}