LineSeriesChart.mxml

LineSeriesChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
	 Copyright (c) 2009 Team Axiis

	 Permission is hereby granted, free of charge, to any person
	 obtaining a copy of this software and associated documentation
	 files (the "Software"), to deal in the Software without
	 restriction, including without limitation the rights to use,
	 copy, modify, merge, publish, distribute, sublicense, and/or sell
	 copies of the Software, and to permit persons to whom the
	 Software is furnished to do so, subject to the following
	 conditions:

	 The above copyright notice and this permission notice shall be
	 included in all copies or substantial portions of the Software.

	 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
	 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
	 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
	 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
	 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
	 OTHER DEALINGS IN THE SOFTWARE.
-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:charts="org.axiis.charts.*"
	xmlns:axiis="org.axiis.*"
	xmlns:series="org.axiis.charts.series.*"
	xmlns:groupings="org.axiis.charts.groupings.*"
	xmlns:degrafa="http://www.degrafa.com/2007"
	xmlns:states="org.axiis.states.*"
	xmlns:paint="org.axiis.paint.*"
	xmlns:Examples="Examples.*"
	xmlns:axis="org.axiis.charts.axis.*"
	xmlns:labels="org.axiis.charts.labels.*"
	xmlns:utils="org.axiis.utils.*" xmlns:scale="org.axiis.layouts.scale.*">

	
	<mx:Script>
		<![CDATA[
			import org.axiis.data.DataSet;

			private var ds:DataSet = new DataSet();
			
			/**
			 * This example is using xml data read from the file system. 
			 * In practical usage, you'ld have some data in a model that you want to display
			 * that may be XML or may be in arrayCollections or arrays. In most cases, you'll
			 * need to massage the data into a format that's suitable for the display you're
			 * trying to achieve. 
			 */
			public function start():void
			{
				funding.dataProvider = fundingData
				hAxis.invalidateDataProvider()
				vAxis.invalidateDataProvider()
				funding.invalidateDataProvider()
				// Has to be called any time the dataCanvas dp is changed
				dc.invalidateDisplayList();
			}

			/**
			 * The labelFunction property of the LineSeriesGroup, and other components, allow you to 
			 * to determine how each to format each label the component displays
			 */
			private function axisLabel(obj:Object):String
			{
				return formatter.format(Number(obj));
			}
		]]>
	</mx:Script>
	

	<mx:CurrencyFormatter currencySymbol="M"
		precision="0"
		id="formatter"
		alignSymbol="right"
		useThousandsSeparator="true"/>

	<!--  GLOBAL VARIABLES -->
	<mx:Object id="fundingData"/>
	<mx:Object id="years"/>
	<mx:String id="verticalField"/>
	<mx:Number id="percentGap">.02</mx:Number>

	
	<!--  
	A scale that deals with linear numeric data.
	-->
	<scale:LinearScale id="vScale"
		minLayout="0"
		maxLayout="{funding.height}"
		/>
	
	<!--
	A scale that converts categorical (String) data into layout space. The categories are assumed to be sorted alphabetically. 
	-->
	<scale:CategoricalScale id="hScale"
		dataProvider="{years}"
		minLayout="0"
		maxLayout="{funding.width}"
	 />

	<!--
	DataCanvas manages the placement and the rendering of layouts.
	They can have backgroundGeometries, foregroundGeometries, and layouts.
	They inherit from Canvas
	-->
	<axiis:DataCanvas width="80%"
		id="dc"
		top="120"
		bottom="100"
		horizontalCenter="0"
		strokes="{strokes}"
		fills="{fills}"
		palettes="{palettes}"
		showDataTips="true">

		<!-- Background -->
		<!-- backgrounds appear behind the graph. There are also foregroundGeometries for doing annotations on top of the graph 
			verticalScale="{vScale}"			The vertical scale used for scaling data to actual screen units		
			tickStroke="{axisStroke}"			The stroke used to put the hash or tick marks on an axis
			width="{dc.width}"
			height="{funding.height}"
			showDataTips="false"				A flag that indicates to DataCanvas that it should listen for mouse events that signal the need to create a data tip.
			showGridArea="false"				Whether or not the grid cells are displayed
			showGridLine="false"				Whether or not lines are drawn between grid cells
			showLabels="false"					Whether or not to show labels on the axis
			fontFamily="Myriad Pro"
			fontColor="0"
			fontSize="14"
			tickGap="5"
			majorTickSpacing="50"				The space between successive major tick marks. There is also a minorTickSpacing. Length of marks can be adjusted as well majorTickLength
			labelFunction="{axisLabel}"			A function that is used to determine how each item in the dataProvider should be labeled along the axis.
		-->
		<axiis:backgroundGeometries>
			<!--
			VAxis renders values from bottom to top between a minimum and maximum value, and is intended to be rendered to the left of other layouts to provide a point of reference for those visualizations.
			VAxis can optionally label each major tick mark or render gridlines aligned to the axis itself. 
			-->
			<axis:VAxis 
				id="vAxis"
				verticalScale="{vScale}"
				tickStroke="{axisStroke}"
				width="{dc.width}"
				height="{funding.height}"
				showDataTips="false"
				fontFamily="Myriad Pro"
				fontColor="0"
				fontSize="14"
				tickGap="5"
				majorTickSpacing="50"
				labelFunction="{axisLabel}"/>
			<!--
			HCategoryAxis renders values from left to right between a indexed collection of string values and is intended to be rendered beneath other layouts to provide a point of reference for those visualizations.
			HCategory Axis trys to optmize its layout based on the maximum widht/length of all labels in collection 
			-->
			<axis:HCategoryAxis 
				id="hAxis"
				x="{funding.x}"
				categoryScale="{this.hScale}"
				width="{funding.width}"
				dataProvider="{hScale.dataProvider}"
				height="50"
				y="{funding.height}"/>
			<!-- this is the actual x axis line -->
			<degrafa:Line 
				x="0"
				x1="{funding.x+funding.width}"
				y="{funding.height}"
				y1="{funding.height}"
				stroke="{axisStroke}"/>
		</axiis:backgroundGeometries>

		<!-- Layouts -->
		<!--
				Layouts are composite components consisting of ReferenceRepeaters (the
				loop that defines a repeated bounding pattern)  DrawingGeometries
				(what you are going to draw) and Layouts (child layouts) 
		-->
		<axiis:layouts>
		
			<!-- LineSeriesGroup
				 Line series group renders multiple lines for a series of data points. This can be used to create visualizations that use curved surfaces such as stream graphs and line charts.
				 
					x="12"											x-location relative to paren
					y="0"											y-location relative to parent
					height="{dc.height-70}"							height of display essentially
					width="{dc.width}"								width
					tension="{tension.value}"						The tension used to render the curves in this chart. A value of 0 results in straight lines while a value of 1 results in exaggerated Bezier curves.
					markerColor="{areaPalette.currentColor}"		The color at the center of the markers.		
					dataFilterFunction="{filterRows}"				This provides a way to further refine a layouts dataProvider by providing access to a custom filter data filter function. 
																	This allows developers to easily visualize subsets of the data without having to change the underlying data structure. 
					showArea="{area.selected}"						Whether the area beneath the lines should be filled.
					plotFilterFunction="{filterColumns}"			A filter function that will be used to determine whether a given data point should be included in the rendering.			
					markerSize="8"									The diameter in pixels of the markers shown at each data point.			
					showMarker="{showMarker.selected}"				Whether or not markers should be displayed at each data point
					mode="{int(layoutGroup.selectedValue)}"			The layout mode used to render the lines. One of {MODE_BASELINE,MODE_STACK_ZERO,MODE_STACK_FLOW}.	
					dataProvider="{dataProvider}"					EG: var myLines is an ArrayCollection || Array of Line
																		Line is an object that has a name property, a plotPointsCollection property of PlotPoint, and an optional index which would be it's order in myLines
																		PlotPoint is an object with an index property, an xvalue property used for display of text or the x-value, and a yvalue property which is the y-value
					plotCollection="columns"						The name of the property on the objects in the dataProvider that contains the data to plot 
																	It is expected that the plot collection is a collection of objects - like Array or ArrayCollection and contains the series of data to be plotted. 
																	i.e. dataProvider=myLines is Array || ArrayCollection myLines[0].myPlotCollection is Array || ArrayCollection
					dataField="value"								The property within each item in the dataProvider that contains the field used to determine the value of the item. (essentially the y value)							
					labelField="pivotName"							The property within each item in the dataProvider that contains the field used to determine the label for the item.
					xDataField="name"								The property within each item in the dataProvider that contains the field used to determine the value of the item on the horizontal axis.
					plotLabelField="name"							The property on the items in the dataProvider that contains the label field for the entire plot.				
					verticalScale="{vScale}"						The vertical scale, IScale, used to scale data values to chart values 
					horizontalScale="{hScale}"						The horizontal scale, IScale, used to scale data values to chart values
					stroke="{myStroke}"								The stroke used to render lines
					fill="{areaFill}"								The fill used to render the area beneath the lines if area rendering is enabled.
					enableRollOver="true"							Turns on/off the default roll-over state
					currentDatum									The item in the dataProvider that the layout is currently rendering.
					currentIndex									The index of the item in the dataProvider that the layout is currently rendering.
					currentLabel									The label of the item in the dataProvider that the layout is currently rendering, as determine by taking currentDatum[labelField], if a labelField is defined.
					currentReference								The geometry that is being used to render the current data item as it appears after the necessary iterations of the referenceRepeater have been executed.
					currentValue									The value of the item in the dataProvider that the layout is currently rendering, as determined by taking currentDatum[dataField], if a dataField is defined.								
			-->
			<groupings:LineSeriesGroup id="funding"
				x="12"
				y="0" 
				autoAdjustScale="true"
				height="{dc.height-70}"
				width="{dc.width}"
				tension=".04"
				markerColor="{areaPalette.currentColor}"	
				showArea="true"
				markerSize="8"
				showMarker="{false}"
				mode="{LineSeriesGroup.MODE_STACK_ZERO}"
				dataProvider="{fundingData}"
                plotCollection="columns"
                dataField="value"
                xDataField="name"
				plotLabelField="value"
				verticalScale="{vScale}"
				horizontalScale="{hScale}"
				stroke="{myStroke}"
				fill="{areaFill}"
				enableRollOver="true"/>
				 
		</axiis:layouts>
		
	</axiis:DataCanvas>

	<!--  PALLETTES & FILLS & STROKES -->

	<!--
	LayoutPalette will generate an Array of colors based on a Layout. The produced colors will be equally distributed between two given anchor colors 
	and will contain x values where x is the number of objects in the Layout's dataProvider. As the Layout renders and its currentIndex property is incremented, 
	the LayoutPalette's currentColor will be incremented as well. Binding on the currentColor allows you vary the color of a fill or stroke used 
	in the Layout's drawingGeometries  as the Layout renders. Very cool.	
	
	LayoutPalette will generates an Array of colors for a Layout. By default, LayoutPalette uses the Flex 3 Halo color scheme, but this can be overridden using 
	the colors property. As the currentIndex of the Layout driving this palette changes, the currentColor property is updated to the color at the currentIndex in
	the array. If the layout needs more colors than the array contains, the colors wraps around the array using the mod operator.
	
	NOTE: The major difference between Layout and LayoutAuto: 
			Layout works off of currentIndex for a layout so you only get as many colors as there are for that index values
			LayoutAuto works off the length of the dataProvider to decide how manu colors to generate so there will be many more colors
			If you want a series with repeating colors from series to series use Layout. 
			If you want different colors for all bars, use LayoutAuto
	-->
	<mx:Array id="palettes">
		<paint:LayoutAutoPalette id="outerPalette" layout="{funding}" colorFrom="0xCC3333" colorTo="0x3333CC"/>
		<paint:LayoutAutoPalette id="clusterPalette" layout="{funding}" colorFrom="{outerPalette.currentColor}" colorTo="{outerPalette.currentColor | 0x337f00}"/>
		<paint:LayoutAutoPalette id="areaPalette" layout="{funding}" colorFrom="0x3333CC" colorTo="0xCC3333"/>
	</mx:Array>
	
	<!--
	A LinearGradientFill lets you specify a gradient fill
	angle defines the transition across the content
	A GradientStop defines the objects that control a transition as part of a gradient fill. Stops will be equally spaced unless ratio is specified
	-->
	<mx:Array id="fills">
		<degrafa:LinearGradientFill id="areaFill" angle="90" enableEvents="false">
			<degrafa:GradientStop color="{areaPalette.currentColor}" alpha=".95"/>
			<degrafa:GradientStop color="{areaPalette.currentColor | 0x999933}" alpha=".65"/>
		</degrafa:LinearGradientFill>
		<degrafa:LinearGradientFill id="clusterFill" angle="45" enableEvents="false">
			<degrafa:GradientStop color="{clusterPalette.currentColor}"/>
			<degrafa:GradientStop color="{clusterPalette.currentColor | 0xFFFFFF}" alpha=".85"/>
		</degrafa:LinearGradientFill>
	</mx:Array>
	
	<!--
	LinearGradientStroke is gradient filled stroke as opposed to just one color. pixelHinting is used to hint strokes to full pixels.
	SolidStroke is typicaly solid stroke. caps define line ends and can put additional lenght on a line. Useful where lines overlap
	-->
	<mx:Array id="strokes">
		<degrafa:LinearGradientStroke id="colStroke" pixelHinting="true" angle="45" enableEvents="false">
			<degrafa:GradientStop color="0xFFFFFF" alpha=".7"/>
			<degrafa:GradientStop color="0xFFFFFF" alpha=".3"/>
		</degrafa:LinearGradientStroke>
		<degrafa:SolidStroke 
			color="0xFFFFFF" 
			alpha=".3"/>
		<degrafa:SolidStroke 
			id="axisStroke" 
			color="0x222222"  
			pixelHinting="true"/>
		<degrafa:SolidStroke
			id="myStroke"
			color="{areaPalette.currentColor}"
			weight="1"
			alpha="1"
			caps="none"
			pixelHinting="true"/>
	</mx:Array>

</mx:Canvas>