manewcActionscript Snippets

[AS 3] Yahoo! Column Chart with External XML File

3 comments so far

I just wanted to create a bar graph with the data from an XML file.

So I have an XML file called graph.xml with the below contents and placed the ColumnChart component in the library.

<Graph>
<Report>
<Point>
<Value>48</Value>
<Label>January 25, 2008</Label>
</Point>
<Point>
<Value>26</Value>
<Label>January 26, 2008</Label>
</Point>
<Point>
<Value>29</Value>
<Label>January 27, 2008</Label>
</Point>
<Point>
<Value>42</Value>
<Label>January 28, 2008</Label>
</Point>
<Point>
<Value>40</Value>
<Label>January 29, 2008</Label>
</Point>
<Point>
<Value>43</Value>
<Label>January 30, 2008</Label>
</Point>
<Point>
<Value>38</Value>
<Label>January 31, 2008</Label>
</Point>
<Point>
<Value>38</Value>
<Label>February 1, 2008</Label>
</Point>
<Point>
<Value>13</Value>
<Label>February 2, 2008</Label>
</Point>
</Report>
</Graph>

Here is my document class YahooColumnChart.as:

package
{
	import flash.display.Sprite;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
	import com.yahoo.astra.fl.charts.*;

	public class YahooColumnChart extends Sprite
	{
		private var xml:XML;
		private var valueList:XMLList;
		private var labelList:XMLList;
		private var xPoint:Array;
		private var tPoint:Array;
		private var graphArray:Array;
		private var medianArray:Array;
		private var medianArrIndex:uint;
		private var medianPoint:Array;

		public function YahooColumnChart()
		{
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, xmlDisplay);
			loader.load(new URLRequest("graph.xml"));
		}

		private function xmlDisplay(e:Event):void
		{
			var chart:ColumnChart = new ColumnChart();
			chart.x = 0;
			chart.y = 0;
			chart.width = stage.stageWidth;
			chart.height = stage.stageHeight;

			xml = new XML(e.target.data);

			var valueList:XMLList = xml.Report.Point.Value.text();
			var labelList:XMLList =  xml.Report.Point.Label.text();

			var xPoint:Array = new Array;

			for each (var graphPoints:XML in valueList)
			{
				xPoint.push( graphPoints );
			}

			var tPoint:Array = new Array;

			for each (var timePoints:XML in labelList)
			{
				tPoint.push ( timePoints );
			}

			var graphArray:Array = new Array;

			for (var c:uint; c < xPoint.length; c++){
				graphArray.push ({point:xPoint[c], time:tPoint[c]})
			}

			// adjust the points on the line series a bit smaller
			chart.dataProvider = [ graphArray ];
			chart.setStyle( "seriesMarkerSizes", [ 30 ] );

			// add the chart
			addChild( chart );

			// if the data items are complex objects we need to tell the chart
			// how to access the data it needs to display
			chart.verticalField = "point"
			chart.horizontalField = "time";
		}
	}
}

Tuesday, February 26th, 2008 at 12:23 pm and is filed under Actionscript 3, Yahoo! Components. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.