Chart Background, Annotation Drawing

chart.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" initialize="initial(event)"
  		   xmlns:test="test.*">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;

			[Bindable]
			private var data:ArrayCollection;

			[Embed(source="graph.json", mimeType="application/octet-stream")]
			public static var JSONFile:Class;

			private function initial(event:FlexEvent):void {
				var bytes:ByteArray=new JSONFile;
				data=new ArrayCollection(JSON.parse(bytes.readMultiByte(bytes.length, "utf-8")).list);
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="0" horizontalAlign="left" verticalAlign="top"/>
	</s:layout>

	<mx:ColumnChart showDataTips="true" dataProvider="{data}" width="100%" height="100%">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="Category"/>
		</mx:horizontalAxis>

		<mx:series>
			<mx:ColumnSeries xField="Category" yField="Data1" displayName="Data1"/>
			<mx:ColumnSeries xField="Category" yField="Data2" displayName="Data2"/>
			<mx:ColumnSeries xField="Category" yField="Data3" displayName="Data3"/>
			<mx:ColumnSeries xField="Category" yField="Data4" displayName="Data4"/>
		</mx:series>

		<mx:backgroundElements>
			<test:CustomChartElement />
			<!--<mx:GridLines/>
			<mx:GridLines horizontalChangeCount="1" verticalChangeCount="8" verticalShowOrigin="false" gridDirection="both">
				<mx:horizontalStroke>
					<mx:SolidColorStroke color="#191970" weight="2" alpha=".3"/>
				</mx:horizontalStroke>
				<mx:verticalStroke>
					<mx:SolidColorStroke color="#191970" weight="2" alpha=".3"/>
				</mx:verticalStroke>
			</mx:GridLines>-->
		</mx:backgroundElements>

	</mx:ColumnChart>
</s:Application>

CustomChartElement.as

package test {
import avmplus.getQualifiedClassName;

import mx.charts.chartClasses.CartesianChart;
import mx.charts.chartClasses.ChartElement;
import mx.core.mx_internal;

use namespace mx_internal;

public class CustomChartElement extends ChartElement {
  /**
	 * @private
	 */
	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
		super.updateDisplayList(unscaledWidth, unscaledHeight);

		trace("-------------------------------------------------------------------------------");
		trace("test.CustomChartElement.updateDisplayList(", unscaledWidth, unscaledHeight, ")");
		trace("test.CustomChartElement.updateDisplayList(", getAllDataPoints(), ")");
		trace("test.CustomChartElement.updateDisplayList(", getQualifiedClassName(chart), ")");
		trace("test.CustomChartElement.updateDisplayList(", CartesianChart(chart).horizontalAxisRenderer.ticks, ")");
		trace("test.CustomChartElement.updateDisplayList(", CartesianChart(chart).verticalAxisRenderer.ticks, ")");

		graphics.clear();
		graphics.beginFill(0x000000, 0.2);
		graphics.drawRect(10, 10, unscaledWidth - 20, unscaledHeight - 20);
		graphics.endFill();

		graphics.lineStyle(5);
		graphics.beginFill(0x000000);
		graphics.moveTo(unscaledWidth / 2, 0);
		graphics.lineTo(unscaledWidth / 2, unscaledHeight);
		graphics.endFill();

		graphics.lineStyle(0);
		
		var ticks:Array=CartesianChart(chart).horizontalAxisRenderer.ticks;
		
		var f : int = -1;
		var fmax : int = ticks.length;
		while(++f < fmax) {
			graphics.beginFill(0x000000);
			graphics.drawRect(unscaledWidth * ticks[f], 1, 1, 1);
			graphics.endFill();
		}
		
		ticks=CartesianChart(chart).verticalAxisRenderer.ticks;
		
		f = -1;
		fmax = ticks.length;
		while(++f < fmax) {
			graphics.beginFill(0x000000);
			graphics.drawRect(1, unscaledWidth * ticks[f], 1, 1);
			graphics.endFill();
		}
	}

	//--------------------------------------------------------------------------
	//
	//  Overridden methods: ChartElement
	//
	//--------------------------------------------------------------------------

	/**
	 * @private
	 */
	override public function mappingChanged():void {
		invalidateDisplayList();
	}

	/**
	 * @private
	 */
	override public function chartStateChanged(oldState:uint, newState:uint):void {
		invalidateDisplayList();
	}
}
}