Skip to content

Instantly share code, notes, and snippets.

@mub

mub/columnChart.mxml

Created November 6, 2012 09:49
Show Gist options
  • Save mub/4023754 to your computer and use it in GitHub Desktop.
Save mub/4023754 to your computer and use it in GitHub Desktop.
Download ZIP
Flex trail
Raw
columnChart.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" viewSourceURL="srcview/index.html">
<mx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
/*mx|ColumnChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}*/
mx|ColumnChart {
chartSeriesStyles: seriesStyleAvg, seriesStyleSlg;
}
mx|ColumnSeries {
fills: #0066FF, #FFEEAA;
colors: blue, red;
}
.chartPanelTitle {
fontFamily: Times, serif;
fontSize: 22;
color:#660066;
fontWeight:bold;
fontStyle:italic;
}
.chartAxisTitle {
fontFamily: Tahoma, Arial, Helvetica, sans-serif;
fontSize:24;
fontWeight:bold;
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
letterSpacing: 5;
color:#009133;
}
.chartAxisDataH {
fontFamily: "Times New Roman", Times, serif;
fontSize:16;
color:#000066;
fontStyle:italic;
}
.chartAxisDataV {
fontFamily: "Courier New", Courier, monospace;
fontSize:24;
color:#663300;
}
.seriesStyleAvg {
color:#0033FF;
fill:#0066FF;
}
.seriesStyleSlg {
color:#66CCAA;
fill:#FFEEAA;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.charts.chartClasses.IAxis;
private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
return numberFormatter.format(item);
}
]]>
</mx:Script>
<mx:NumberFormatter id="numberFormatter" precision="3" />
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="Betelgeuse" obp=".353" slg=".445" avg=".300" />
<mx:Object name="Deneb" obp=".290" slg=".418" avg=".253" />
<mx:Object name="Altair" obp=".305" slg=".316" avg=".246" />
<mx:Object name="Spica" obp=".298" slg=".433" avg=".276" />
<mx:Object name="Sirius" obp=".295" slg=".343" avg=".218" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:Panel title="Coffee lovers per location" width="80%" height="90%" titleStyleName="chartPanelTitle">
<mx:ColumnChart id="columnChart"
showDataTips="true"
dataProvider="{arrColl}"
selectionMode="single"
itemRollOverColor="haloSilver"
itemSelectionColor="haloBlue"
axisTitleStyleName="chartAxisTitle"
horizontalAxisStyleNames="chartAxisDataH"
verticalAxisStyleNames="chartAxisDataV"
width="100%"
height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis id="ca" title="Location"
categoryField="name">
</mx:CategoryAxis>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false"
minimum="0.210"
maximum="0.450"
labelFunction="linearAxis_labelFunc" />
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}"
canDropLabels="false" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries id="avgSeries"
xField="name"
yField="avg"
displayName="Decaf"/>
<mx:ColumnSeries id="slgSeries"
xField="name"
yField="slg"
displayName="Caf"/>
</mx:series>
<mx:seriesFilters>
<mx:Array />
</mx:seriesFilters>
</mx:ColumnChart>
<mx:Legend dataProvider="{columnChart}"/>
</mx:Panel>
</mx:Application>
Raw
goldPlatinumChart.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" addedToStage="init()">
<mx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
.chartPanelTitle {
fontFamily: "Times New Roman", Times, serif;
fontSize: 22;
color: #660066;
fontWeight: bold;
fontStyle: italic;
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
}
.chartAxisTitle {
fontFamily: Tahoma, Arial, Helvetica, sans-serif;
fontSize: 24;
fontWeight: bold;
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
letterSpacing: 5;
color: #009133;
}
.chartAxisDataH, .chartAxisDataV {
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
}
.chartAxisDataH {
fontFamily: "Times New Roman", Times, serif;
fontSize: 18;
color: #000066;
letterSpacing: 2;
fontStyle: italic;
}
.chartAxisDataV {
fontFamily: "Courier New", Courier, monospace;
fontSize: 24;
color: #663300;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayList;
import mx.charts.chartClasses.IAxis;
[Bindable]
private var monthlySalesRaw:ArrayList = new ArrayList();
private var addRawTimer: Timer;
[Bindable]
private var monthlySalesData:ArrayList = new ArrayList();
private var rawIndex: int = 0;
private function init():void {
monthlySalesRaw.addAll(new ArrayList([
{month:1, platinum:280000, gold:350000},
{month:2, platinum:310000, gold:411000},
{month:3, platinum:623000, gold:150000},
{month:4, platinum:570000, gold:495000},
{month:5, platinum:333000, gold:630000},
{month:6, platinum:780000, gold:390000},
{month:7, platinum:770000, gold:536000},
{month:8, platinum:480000, gold:881000},
]));
addRawTimer = new Timer(500, monthlySalesRaw.length);
addRawTimer.addEventListener("timer", addNext);
addRawTimer.start();
}
public function addNext(event:TimerEvent): void {
if(rawIndex >= monthlySalesRaw.length) return;
addRaw(monthlySalesRaw.getItemAt(rawIndex));
rawIndex++;
}
private function addRaw(rawItem: Object): void {
monthlySalesData.addItem({
date:rawItem.month.toString() + "/1/2012",
platinum:rawItem.platinum,
gold: rawItem.gold,
total:(rawItem.platinum + rawItem.gold)
}
)
}
/*private function loadData():void {
for (var i:int = 0; i < monthlySalesRaw.length; i++) {
addRaw(monthlySalesRaw.getItemAt(i));
}
}*/
private function axisDateLabel(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String {
return dateFormatterAbbr.format(categoryValue);
}
private function vAxisCurrencyLabelNoCentsThousands(labelValue:Number, previousValue:Object, axis:IAxis):String {
return currencyFormatterNoCents.format(labelValue / 1000);
}
]]>
</mx:Script>
<mx:SolidColorStroke id="platinum_stroke" color="#C0C0C0" weight="3"/>
<mx:SolidColorStroke id="total_stroke" color="#009900" weight="3"/>
<mx:SolidColorStroke id="gold_stroke" color="#EEC900" weight="3"/>
<mx:CurrencyFormatter id="currencyFormatterWithCents" precision="2" rounding="nearest"/>
<mx:CurrencyFormatter id="currencyFormatterNoCents" precision="0" rounding="nearest" thousandsSeparatorTo=","/>
<mx:DateFormatter id="dateFormatterAbbr" formatString="YYYY-MMM"/>
<mx:Panel title="Sales By Month" width="80%" height="80%" titleStyleName="chartPanelTitle">
<mx:HBox width="100%" height="100%">
<mx:LineChart id="sales_by_month" dataProvider="{monthlySalesData}"
horizontalAxisStyleNames="chartAxisDataH"
verticalAxisStyleNames="chartAxisDataV"
axisTitleStyleName="chartAxisTitle"
width="90%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date" title="Month" labelFunction="axisDateLabel"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="bucks" title="Thousands" labelFunction="vAxisCurrencyLabelNoCentsThousands">
</mx:LinearAxis>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries xField="date" yField="platinum" displayName="Platinum Sales"
lineStroke="{platinum_stroke}"/>
<mx:LineSeries xField="date" yField="gold" displayName="Gold Sales"
lineStroke="{gold_stroke}"/>
<mx:LineSeries id="date" yField="total" displayName="Total Combined"
lineStroke="{total_stroke}" form="curve" interpolateValues="true"/>
</mx:series>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{bucks}" verticalAxisTitleAlignment="vertical"/>
</mx:verticalAxisRenderers>
</mx:LineChart>
<mx:Legend dataProvider="{sales_by_month}"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
Raw
gPath.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" addedToStage="init()">
<mx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
.chartPanelTitle {
fontFamily: "Times New Roman", Times, serif;
fontSize: 22;
color: #660066;
fontWeight: bold;
fontStyle: italic;
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
}
.chartAxisTitle {
fontFamily: Tahoma, Arial, Helvetica, sans-serif;
fontSize: 24;
fontWeight: bold;
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
letterSpacing: 5;
color: #009133;
}
.chartAxisDataH, .chartAxisDataV {
fontAntiAliasType: advanced;
fontGridFitType: subpixel;
}
.chartAxisDataH {
fontFamily: "Times New Roman", Times, serif;
fontSize: 18;
color: #000066;
letterSpacing: 2;
fontStyle: italic;
}
.chartAxisDataV {
fontFamily: "Courier New", Courier, monospace;
fontSize: 24;
color: #663300;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayList;
import mx.charts.chartClasses.IAxis;
[Bindable]
private var monthlySalesRaw:ArrayList = new ArrayList();
private var addRawTimer: Timer;
[Bindable]
private var monthlySalesData:ArrayList = new ArrayList();
private var rawIndex: int = 0;
private function init():void {
monthlySalesRaw.addAll(new ArrayList([
{month:1, platinum:280000, gold:350000},
{month:2, platinum:310000, gold:411000},
{month:3, platinum:623000, gold:150000},
{month:4, platinum:570000, gold:495000},
{month:5, platinum:333000, gold:630000},
{month:6, platinum:780000, gold:390000},
{month:7, platinum:770000, gold:536000},
{month:8, platinum:480000, gold:881000},
]));
addRawTimer = new Timer(500, monthlySalesRaw.length);
addRawTimer.addEventListener("timer", addNext);
addRawTimer.start();
}
public function addNext(event:TimerEvent): void {
if(rawIndex >= monthlySalesRaw.length) return;
addRaw(monthlySalesRaw.getItemAt(rawIndex));
rawIndex++;
}
private function addRaw(rawItem: Object): void {
monthlySalesData.addItem({
date:rawItem.month.toString() + "/1/2012",
platinum:rawItem.platinum,
gold: rawItem.gold,
total:(rawItem.platinum + rawItem.gold)
}
)
}
/*private function loadData():void {
for (var i:int = 0; i < monthlySalesRaw.length; i++) {
addRaw(monthlySalesRaw.getItemAt(i));
}
}*/
private function axisDateLabel(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String {
return dateFormatterAbbr.format(categoryValue);
}
private function vAxisCurrencyLabelNoCentsThousands(labelValue:Number, previousValue:Object, axis:IAxis):String {
return currencyFormatterNoCents.format(labelValue / 1000);
}
]]>
</mx:Script>
<mx:SolidColorStroke id="platinum_stroke" color="#C0C0C0" weight="3"/>
<mx:SolidColorStroke id="total_stroke" color="#009900" weight="3"/>
<mx:SolidColorStroke id="gold_stroke" color="#EEC900" weight="3"/>
<mx:CurrencyFormatter id="currencyFormatterWithCents" precision="2" rounding="nearest"/>
<mx:CurrencyFormatter id="currencyFormatterNoCents" precision="0" rounding="nearest" thousandsSeparatorTo=","/>
<mx:DateFormatter id="dateFormatterAbbr" formatString="YYYY-MMM"/>
<mx:Panel title="Sales By Month" width="80%" height="80%" titleStyleName="chartPanelTitle">
<mx:HBox width="100%" height="100%">
<mx:LineChart id="sales_by_month" dataProvider="{monthlySalesData}"
horizontalAxisStyleNames="chartAxisDataH"
verticalAxisStyleNames="chartAxisDataV"
axisTitleStyleName="chartAxisTitle"
width="90%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date" title="Month" labelFunction="axisDateLabel"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="bucks" title="Thousands" labelFunction="vAxisCurrencyLabelNoCentsThousands">
</mx:LinearAxis>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries xField="date" yField="platinum" displayName="Platinum Sales"
lineStroke="{platinum_stroke}"/>
<mx:LineSeries xField="date" yField="gold" displayName="Gold Sales"
lineStroke="{gold_stroke}"/>
<mx:LineSeries id="date" yField="total" displayName="Total Combined"
lineStroke="{total_stroke}" form="curve" interpolateValues="true"/>
</mx:series>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{bucks}" verticalAxisTitleAlignment="vertical"/>
</mx:verticalAxisRenderers>
</mx:LineChart>
<mx:Legend dataProvider="{sales_by_month}"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment