Line Chart

[ruiganga]

Hi

I need to build my own line chart using AS3+XML, something like this: http://flashden.net/item/xml-graph-data/23028

Any tutorial or component or tip?

Thanks :)

[IQAndreas]

Just a lot of graphics.lineTo() and tweening.

That guy's component was pretty nice, but could use some work.

If you want, I can make something similar for you, as long as I keep the right to distribute the code freely. Just ask. I'm just about to head home and have 3 hours where I won't be doing anything...

[ruiganga]

HI

What I want to do is something easy, the only problem is that I've never donw a chart in flash:

//will be 2 Arrays

Array dates:new Array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);
Array euribor:new Array(2.123 , 2.234 , 2.453, 2.345, 2.975 , 2.234 , 2.453, 2.345, 2.975 , 2.234 , 2.453, 2.345, 2.975 , 1.345, 1.123);

the grafic should be a line, connecting dots

Thanks for your help

[IQAndreas]

Hey. I'm still working with this, I'm just a little occupied at work, so I'll pick it up again on the weekend.

[ruiganga]

HI. OK. Thanks a lot for your time.

[sebrofm]

ActionScript Code:

package{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import gs.TweenLite;

public class Main extends Sprite{

//private consts
private const xmlPath:String = "data.xml";

//public vars

//private vars
private var dates:Array = [];
private var euribors:Array = [];

private var nodeX:Array = [];

private var max:Number;

private var valueFormat:TextFormat;

//constructor
public function Main(){
loadXML();
}

//public methods

//private methods
private function loadXML() : void {
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, parseXML);
xmlLoader.load(new URLRequest(xmlPath));
}
private function parseXML(e:Event) : void {
var xml:XML = new XML(e.target.data);
var dateList:XMLList = xml.set.date;
var euriborList:XMLList = xml.set.euribor;

for each(var date:XML in dateList){
dates.push(date);
}
for each(var euribor:XML in euriborList){
euribors.push(euribor);
}
init();
}
private function createValueFields() : void {
valueFormat = new TextFormat();
valueFormat.color = 0x000000;
valueFormat.font = "Lucida Sans Unicode";
valueFormat.size = 16;
for(var i:uint = 0; i < dates.length; i++){
var tf:TextField = new TextField();
tf.defaultTextFormat = valueFormat;
//tf.rotation = 90;
tf.height = 30;
tf.x = ( (645 - dates.length*10)/dates.length )*i + 150;
tf.y = 460;
tf.autoSize = "left";
tf.text = dates;
addChild(tf);
nodeX.push(tf.x);
}
}
private function createScale() : void {
max = 0;
for(var i:uint = 0; i < euribors.length; i++){
if(euribors[i] > max) max = Math.ceil(euribors[i]);
}
var range:Number = max/5;
y1.text = Number(range).toFixed(2).toString();
y2.text = Number(range*2).toFixed(2).toString();
y3.text = Number(range*3).toFixed(2).toString();
y4.text = Number(range*4).toFixed(2).toString();
y5.text = Number(max).toFixed(2).toString();
addNodes();
}
private function addNodes() : void {
var LNode:Class = Object(Node).constructor;
for (var i:uint = 0; i < nodeX.length; i++){
var node:* = new LNode();
node.value = euribors[i];
node.x = nodeX[i];
node.y = 450;
var targetY:Number = 450 - (Number(euribors[i])/max)*400;
addChild(node);
TweenLite.to(node, 1, {y:targetY, delay:.3*i});
}
}

private function init() : void {
createValueFields();
createScale();
}

[I]//event listeners
}
}




attached fla :)

[sebrofm]

updated with lines between nodes :)

[ruiganga]

Hi

Thanks a lot. I saw the file and it is exactly what I need. I'll study and then use for my purpose.
Thanks once again.

Have a nice day

[sebrofm]

sure thing man, good luck