manewcActionscript Snippets

Median Chart of Google Dashboard Analytics XML and Yahoo Astra Charts

1 comment so far

A friend of mine was looking for a way to chart out Google Analytics with a median value embedded within the graph. I opted to use Yahoo! charts for to demo this as I wanted to learn a little more about their charting features. So, I took a websites Google Analytics report, went to the Dashboard in GA and exported the file. Here are the results:

The Document Class:

package
{
	import flash.display.Sprite;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.xml.XMLDocument;
	import com.yahoo.astra.fl.charts.*;
	import com.yahoo.astra.fl.charts.series.LineSeries;
	import com.yahoo.astra.fl.charts.NumericAxis;
	import fl.controls.Label;
	import flash.text.TextFieldAutoSize;

	public class MedianGraph extends Sprite
	{
		private var documentTitle:Label;
		private var dateRange:Label;
		private var xml:XML;
		private var pointList:XMLList;
		private var timeList: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 MedianGraph()
		{
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, xmlDisplay);
			loader.load(new URLRequest("/path/to/xml/file.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 pointList:XMLList = xml.Report.Graph[0].Serie.Point.Value.text();
			var timeList:XMLList =  xml.Report.Graph[0].Serie.Point.Label.text();

			var xPoint:Array = new Array;

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

			var tPoint:Array = new Array;

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

			var graphArray:Array = new Array;

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

			// chart.dataProvider = graphArray;

			// addChild( chart );

			// sort the array from lowest to highest
			var medianArray:Array = new Array();
			medianArray = graphArray.sortOn("point", Array.NUMERIC);

			/*
			for (var m:uint; m < medianArray.length; m++)
			{
				trace (medianArray[m].point);
			}
			*/

			// check to see if there is an even or odd numbers in the list
			var evenOdd:uint = medianArray.length%2;

			if ( evenOdd == 1 )
			{
				/* odd number */
				/* take the middle value */
				medianArrIndex = medianArray[Math.floor(medianArray.length / 2)].point;
			}
			else
			{
				/* even number */
				/* take the 2 middle numbers, add them together and divide by 2 */
				var middle:Number = medianArray.length / 2;

				var lowMiddle:Number = medianArray[middle - 1].point;
				var highMiddle:Number = medianArray[middle].point;
				medianArrIndex = (highMiddle + lowMiddle) / 2;
			}

			// var median:LineSeries = new LineSeries();

			var medianPoint:Array = new Array();

			/* ------------------------------------------- */
			for (var x:uint; x < medianArray.length; x++)
			{
				// medianPoint.push( medianArrIndex )
				medianPoint.push ({point:medianArrIndex, time:tPoint[x]})
			}
			/* ------------------------------------------- */

			// If we want to add a LineSeries as well, we can do
			// it very easily by passing it as part of the data provider.
			var median:LineSeries = new LineSeries();
			median.dataProvider = medianPoint;

			chart.dataProvider = [ median, graphArray ];

			// since the profits field refers to monetary values, we should
			// format them appropriately
			var yAxis:NumericAxis = chart.verticalAxis as NumericAxis;

			// by default, a NumericAxis always displays zero.
			// the data is all crunched up at the top in this example, so we'll
			// turn this feature off.
			yAxis.alwaysShowZero = false;

			// make the points on the line series a bit smaller
			// the 30 represents the bar chart width and the 10 represents the dot sizes
			chart.setStyle( "seriesMarkerSizes", [ 2, 24 ] );

			// 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";

			/* Add the Text Fields */
			documentTitle = new Label();
            documentTitle.htmlText = "" + xml.Report.Title[0].ProfileName.text() + "";
			documentTitle.move(60, 30);
            documentTitle.autoSize = TextFieldAutoSize.LEFT;
            addChild(documentTitle);

			dateRange = new Label();
            // dateRange.htmlText = "" + xml.Report.Title[0].PrimaryDateRange.text() + "";
			dateRange.htmlText = "";
			dateRange.move(60, 55);
            dateRange.autoSize = TextFieldAutoSize.LEFT;
            addChild(dateRange);

		}
	}
}

Tuesday, April 29th, 2008 at 8:08 am 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.