<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:heatmap="ardisia.charts.heatmap.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:data1="ardisia.components.colorizer.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorizer="ardisia.components.colorizer.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]protected var dp:ArrayCollection;
protected var minMax:Array;
public function creationComplete():void
{
dp = new ArrayCollection();
for each (var item:XML in xml.Nation)
{
var name:String = item["@name"];
var population:Number = parseFloat(item["@population"]);
var GDP_Nominal:Number = parseFloat(item["@GDP_Nominal"]);
var Area:Number = parseFloat(item["@Area"]);
var LifeExpectancy:String = item["@LifeExpectancy"];
var OilReserves:String = item["@OilReserves"];
var Market_Cap:String = item["@Market_Cap"];
var GDP_Per_Capita:String = item["@GDP_Per_Capita"];
var InternetUsers:String = item["@InternetUsers"];
var NuclearElectricty:String = item["@NuclearElectricty"];
var AdultObesity:String = item["@AdultObesity"];
dp.addItem({
name:name ? name : 0,
population: population ? population : 0,
GDP_Nominal: GDP_Nominal ? GDP_Nominal : 0,
Area: Area ? Area : 0,
LifeExpectancy: LifeExpectancy ? LifeExpectancy : 0,
OilReserves: OilReserves ? OilReserves : 0,
Market_Cap: Market_Cap ? Market_Cap : 0,
GDP_Per_Capita: GDP_Per_Capita ? GDP_Per_Capita : 0 ,
InternetUsers: InternetUsers ? InternetUsers : 0,
NuclearElectricty: NuclearElectricty ? NuclearElectricty : 0,
AdultObesity: AdultObesity ? AdultObesity : 0
});
}
minMax = [
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE]
];
for (var i:int = 0; i < dp.length; i++)
{
var dpData:Object = dp[i];
var pop:Number = dpData.population; if (!isNaN(pop)){minMax[0][0] = 0; minMax[0][1] = Math.max(pop, minMax[0][1]);}
var gdp:Number = dpData.GDP_Nominal; if (!isNaN(gdp)){minMax[1][0] = Math.min(gdp, minMax[1][0]); minMax[1][1] = Math.max(gdp, minMax[1][1]);}
var areaNation:Number = dpData.Area; if (!isNaN(areaNation)){minMax[2][0] = Math.min(areaNation, minMax[2][0]); minMax[2][1] = Math.max(areaNation, minMax[2][1]);}
var le:Number = dpData.LifeExpectancy; if (!isNaN(le)){minMax[3][0] = Math.min(le, minMax[3][0]); minMax[3][1] = Math.max(le, minMax[3][1]);}
var oil:Number = dpData.OilReserves; if (!isNaN(oil)){minMax[4][0] = Math.min(oil, minMax[4][0]); minMax[4][1] = Math.max(oil, minMax[4][1]);}
var mc:Number = dpData.Market_Cap; if (!isNaN(mc)){minMax[5][0] = Math.min(mc, minMax[5][0]); minMax[5][1] = Math.max(mc, minMax[5][1]);}
var ppp:Number = dpData.GDP_Per_Capita; if (!isNaN(ppp)){minMax[6][0] = Math.min(ppp, minMax[6][0]); minMax[6][1] = Math.max(ppp, minMax[6][1]);}
var iu:Number = dpData.InternetUsers; if (!isNaN(iu)){minMax[7][0] = Math.min(iu, minMax[7][0]); minMax[7][1] = Math.max(iu, minMax[7][1]);}
var ne:Number = dpData.NuclearElectricty; if (!isNaN(ne)){minMax[8][0] = Math.min(ne, minMax[8][0]); minMax[8][1] = Math.max(ne, minMax[8][1]);}
var ao:Number = dpData.AdultObesity; if (!isNaN(ao)){minMax[9][0] = Math.min(ao, minMax[9][0]); minMax[9][1] = Math.max(ao, minMax[9][1]);}
}
for (i = 0; i < dp.length; i++)
{
dpData = dp[i];
dpData.populationPercent = (dpData.population - minMax[0][0]) / (minMax[0][1] - minMax[0][0]);
dpData.GDP_NominalPercent = isNaN(dpData.GDP_Nominal) || !dpData.GDP_Nominal ? null : (dpData.GDP_Nominal - minMax[1][0]) / (minMax[1][1] - minMax[1][0]);
dpData.AreaPercent = isNaN(dpData.Area) || !dpData.Area ? null : (dpData.Area - minMax[2][0]) / (minMax[2][1] - minMax[2][0]);
dpData.LifeExpectancyPercent = isNaN(dpData.LifeExpectancy) || !dpData.LifeExpectancy ? null : (dpData.LifeExpectancy - minMax[3][0]) / (minMax[3][1] - minMax[3][0]);
dpData.OilReservesPercent = isNaN(dpData.OilReserves) || !dpData.OilReserves ? null : (dpData.OilReserves - minMax[4][0]) / (minMax[4][1] - minMax[4][0]);
dpData.Market_CapPercent = isNaN(dpData.Market_Cap) || !dpData.Market_Cap ? null : (dpData.Market_Cap - minMax[5][0]) / (minMax[5][1] - minMax[5][0]);
dpData.GDP_Per_CapitaPercent = isNaN(dpData.GDP_Per_Capita) || !dpData.GDP_Per_Capita ? null : (dpData.GDP_Per_Capita - minMax[6][0]) / (minMax[6][1] - minMax[6][0]);
dpData.InternetUsersPercent = isNaN(dpData.InternetUsers) || !dpData.InternetUsers ? null : (dpData.InternetUsers - minMax[7][0]) / (minMax[7][1] - minMax[7][0]);
dpData.NuclearElectrictyPercent = isNaN(dpData.NuclearElectricty) || !dpData.NuclearElectricty ? null : (dpData.NuclearElectricty - minMax[8][0]) / (minMax[8][1] - minMax[8][0]);
dpData.AdultObesityPercent = isNaN(dpData.AdultObesity) || !dpData.AdultObesity ? null : (dpData.AdultObesity - minMax[9][0]) / (minMax[9][1] - minMax[9][0]);
}
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="xml"
source="data/EUdata.xml"/>
<colorizer:GradientColorizer id="colorizerA"
rangeMinimum="0" rangeMaximum="1">
<data1:GradientColorizerData ratio="0" color="{colorizerAColor0.selectedColor}" />
<data1:GradientColorizerData ratio="1" color="{colorizerAColor1.selectedColor}" />
</colorizer:GradientColorizer>
<colorizer:GradientColorizer id="colorizerB"
rangeMinimum="0" rangeMaximum="1">
<data1:GradientColorizerData ratio="0" color="{colorizerBColor0.selectedColor}" />
<data1:GradientColorizerData ratio="1" color="{colorizerBColor1.selectedColor}" />
</colorizer:GradientColorizer>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="Heatmap Description"
description="Chart designed to display data via colorizers. Extends and fully supports the Spark DataGrid's API."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Selection Mode:">
<s:DropDownList id="selModeSelect"
width="100"
requireSelection="true"
selectedIndex="1"
labelField="label">
<s:ArrayCollection>
<fx:Object label="cell" value="singleCell" />
<fx:Object label="row" value="singleRow" />
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Colorizer 1:"/>
<s:FormItem label="Lowest Value Color:">
<colorPicker:ColorPicker id="colorizerAColor0"
showColorSpacePicker="true"
selectedColor="#FFE6D5"
change="dp.refresh()"/>
</s:FormItem>
<s:FormItem label="Greatest Value Color:">
<colorPicker:ColorPicker id="colorizerAColor1"
showColorSpacePicker="true"
selectedColor="#FF6600"
change="dp.refresh()"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Colorizer 2:"/>
<s:FormItem label="Lowest Value Color:">
<colorPicker:ColorPicker id="colorizerBColor0"
showColorSpacePicker="true"
selectedColor="#D7E9FF"
change="dp.refresh()"/>
</s:FormItem>
<s:FormItem label="Greatest Value Color:">
<colorPicker:ColorPicker id="colorizerBColor1"
showColorSpacePicker="true"
selectedColor="#004080"
change="dp.refresh()"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>EU Nation Data Example</data:tabLabel>
<data:exampleDescription>Data on nations of the European Union. This example uses multiple colorizers to illustrate that each column of the Heatmap can use a custom colorizer. The example below will show data tips for numerical values. Click on column headers to sort on that column.</data:exampleDescription>
<data:primaryContent>
<s:VGroup top="20" right="20" bottom="20" left="20"
verticalCenter="0">
<heatmap:Heatmap id="heatmap"
showDataTips="true"
width="100%" height="100%"
selectionMode="{selModeSelect.selectedItem.value}"
dataProvider="{dp}">
<heatmap:seriesColumn>
<s:GridColumn dataField="name"
headerText="EU Nation"
showDataTips="false"/>
</heatmap:seriesColumn>
<heatmap:dataColumns>
<heatmap:HeatmapDataColumn dataField="NuclearElectrictyPercent" dataTipField="NuclearElectricty" headerText="Nuclear Electricty" colorizer="{colorizerA}"/>
<heatmap:HeatmapDataColumn dataField="Market_CapPercent" dataTipField="Market_Cap" headerText="Market Cap" colorizer="{colorizerA}"/>
<heatmap:HeatmapDataColumn dataField="InternetUsersPercent" dataTipField="InternetUsers" headerText="Internet Users" colorizer="{colorizerA}"/>
<heatmap:HeatmapDataColumn dataField="GDP_Per_CapitaPercent" dataTipField="GDP_Per_Capita" headerText="GDP Per Capita" colorizer="{colorizerB}"/>
<heatmap:HeatmapDataColumn dataField="populationPercent" dataTipField="population" headerText="Population" colorizer="{colorizerB}"/>
<heatmap:HeatmapDataColumn dataField="GDP_NominalPercent" dataTipField="GDP_Nominal" headerText="GDP (nominal)" colorizer="{colorizerB}"/>
<heatmap:HeatmapDataColumn dataField="AreaPercent" dataTipField="Area" headerText="Area" colorizer="{colorizerB}"/>
<heatmap:HeatmapDataColumn dataField="LifeExpectancyPercent" dataTipField="LifeExpectancy" headerText="Life Expectancy" colorizer="{colorizerB}"/>
<heatmap:HeatmapDataColumn dataField="OilReservesPercent" dataTipField="OilReserves" headerText="Oil Reserves" colorizer="{colorizerB}"/>
<heatmap:HeatmapDataColumn dataField="AdultObesityPercent" dataTipField="AdultObesity" headerText="Adult Obesity" colorizer="{colorizerB}"/>
</heatmap:dataColumns>
</heatmap:Heatmap>
<s:VGroup width="100%"
horizontalAlign="right">
<s:HGroup verticalAlign="middle"
right="0">
<s:Label text="Less"
fontWeight="bold"/>
<s:Rect height="10" width="250"
right="0">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="{colorizerAColor0.selectedColor}" />
<s:GradientEntry color="{colorizerAColor1.selectedColor}" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label fontWeight="bold" text="More" width="50"/>
</s:HGroup>
<s:HGroup verticalAlign="middle"
right="0">
<s:Label text="Lower"
fontWeight="bold"/>
<s:Rect right="0"
height="10"
width="250">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="{colorizerBColor0.selectedColor}" />
<s:GradientEntry color="{colorizerBColor1.selectedColor}" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label width="50"
fontWeight="bold"
text="Higher"/>
</s:HGroup>
</s:VGroup>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>