Skip to content

Instantly share code, notes, and snippets.

@jsfeng
Created October 26, 2012 14:56
Show Gist options
  • Save jsfeng/3959262 to your computer and use it in GitHub Desktop.
Save jsfeng/3959262 to your computer and use it in GitHub Desktop.
Dyanmic Add Flex Chart Series
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.charts.series.ColumnSeries;
import mx.charts.series.BarSeries;
import mx.charts.series.BarSet;
import mx.collections.ArrayCollection;
import mx.charts.ColumnChart;
import mx.graphics.Stroke;
import mx.graphics.SolidColor;
import util.ColorArray;
[Bindable]
private var dataCollection:ArrayCollection;
[Bindable]
private var indexesInGraph:ArrayCollection;
private var itemIndex:int;
private var yearValueArray:Array;
private function init():void
{
indexesInGraph = new ArrayCollection();
dataCollection = new ArrayCollection();
}
private function addItem():void
{
indexesInGraph.addItem(itemIndex);
cbIndexes.dataProvider = indexesInGraph;
for( var i:int=2000 ; i < 2010 ; i++ )
{
yearValueArray = getCorrectValueArrayByYear(i);
if( yearValueArray == null )
{
yearValueArray = new Array();
yearValueArray['year'] = i;
dataCollection.addItem(yearValueArray);
}
yearValueArray['value'+itemIndex] = Math.round(Math.random() * 100);
}
addItemToChart();
}
private function addItemToChart():void
{
var currentColumnSet:ColumnSet = columnChart.series[0] as ColumnSet;
var currentSeries:Array = currentColumnSet.series;
var columnSeries:ColumnSeries = new ColumnSeries();
columnSeries.yField = "value"+itemIndex;
columnSeries.xField = "year";
columnSeries.setStyle("showDataEffect", seriesInterpolate);
columnSeries.name = itemIndex.toString();
columnSeries.displayName = "Item " + itemIndex;
columnSeries.setStyle("fill", new SolidColor( ColorArray.getColorAt(itemIndex), 1) );
currentSeries.push(columnSeries);
(columnChart.series[0] as ColumnSet).series = currentSeries;
itemIndex++;
}
private function getCorrectValueArrayByYear(year:int):Array
{
for each( yearValueArray in dataCollection )
{
if( yearValueArray['year'] == year )
return yearValueArray;
}
return null;
}
private function removeItem():void
{
var currentColumnSet:ColumnSet = columnChart.series[0] as ColumnSet;
var currentSeries:Array = currentColumnSet.series;
var newSeries:Array = new Array();
var indexToRemove:int = int(cbIndexes.selectedItem);
for each( var columnSeries:ColumnSeries in currentSeries )
{
// Doing check by name, but could be by yField or by displayName also.
if( int(columnSeries.name) != indexToRemove)
{
newSeries.push(columnSeries);
}
}
(columnChart.series[0] as ColumnSet).series = newSeries;
// Put color of the deleted Column at back of the line
ColorArray.shiftColors(indexToRemove);
indexesInGraph.removeItemAt(cbIndexes.selectedIndex);
removeItemFromDataCollection(indexToRemove);
}
private function removeItemFromDataCollection(indexToRemove:int):void
{
var newYearValueArray:Array;
var newDataCollection:ArrayCollection = new ArrayCollection();
for each( yearValueArray in dataCollection )
{
newYearValueArray = new Array();
newYearValueArray['year'] = yearValueArray['year'];
for each( var i:int in indexesInGraph )
{
newYearValueArray['value'+i] = yearValueArray['value'+i]
}
newDataCollection.addItem( newYearValueArray );
}
dataCollection = newDataCollection;
}
]]>
</mx:Script>
<mx:SeriesInterpolate duration="1000" id="seriesInterpolate"/>
<mx:VBox width="100%"
height="100%"
backgroundColor="#FFFFFF"
verticalAlign="middle"
horizontalAlign="center">
<mx:Text fontSize="14" paddingLeft="53"
text="Dynamic ColumnChart by www.Flex-Blog.com"
width="700"
textAlign="center"
fontWeight="bold"/>
<mx:Text fontSize="10" paddingLeft="53"
text="Add or Remove items by using the controls at the bottom of the Chart"
width="700"
textAlign="center"
fontWeight="bold"/>
<mx:Legend dataProvider="{columnChart}" direction="horizontal" />
<mx:ColumnChart type="clustered"
showDataTips="true"
id="columnChart"
width="700"
dataProvider="{dataCollection}">
<mx:horizontalAxis>
<mx:CategoryAxis title="Year"
categoryField="year"
id="yearAxis"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis title="Value"
id="countAxis"
autoAdjust="true"/>
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axisStroke="{new Stroke(0x666666, 1, 1)}"
showLine="true"
axisTitleStyleName="chartTitle"
axis="{yearAxis}"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axisStroke="{new Stroke(0x666666, 1, 1)}"
verticalAxisTitleAlignment="vertical"
showLine="true"
axisTitleStyleName="chartTitle"
axis="{countAxis}"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSet id="set"
type="clustered"
dataProvider="{dataCollection}">
</mx:ColumnSet>
</mx:series>
<mx:backgroundElements>
<mx:Grid styleName="myLineChart"
borderStyle="solid"/>
<mx:GridLines horizontalShowOrigin="true"
verticalShowOrigin="false"
y="0"
horizontalStroke="{new Stroke(0x666666,1,1)}"/>
</mx:backgroundElements>
</mx:ColumnChart>
<mx:VBox width="700"
paddingLeft="53">
<mx:HBox width="100%"
borderStyle="solid"
borderThickness="1"
borderColor="#666666"
paddingTop="10"
paddingBottom="10"
horizontalAlign="center">
<mx:Button label="Add New Item"
click="addItem()"/>
<mx:Label text="Remove item with index:"/>
<mx:ComboBox dataProvider="{indexesInGraph}"
id="cbIndexes"
width="60"/>
<mx:Button click="removeItem()"
label="Remove" enabled="{indexesInGraph.length > 0}"/>
</mx:HBox>
<mx:Spacer height="50"/>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Text textAlign="center"
text="www.Flex-Blog.com"
buttonMode="true"
click="navigateToURL(new URLRequest('http://www.flex-blog.com'))"
mouseChildren="false"/>
<mx:Text text="-"/>
<mx:Text textAlign="center"
useHandCursor="true"
buttonMode="true"
click="navigateToURL(new URLRequest('mailto:arjan.nieuwenhuizen@nl4b.com'))"
toolTip="arjan.nieuwenhuizen@nl4b.com"
mouseChildren="false"
text="Arjan Nieuwenhuizen"/>
</mx:HBox>
</mx:VBox>
</mx:VBox>
</mx:Application>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment