Flex Examples
The following example shows how you can create custom labels for a ColumnChart control’s ColumnSeries in Flex, as well as creating custom label functions for a linear axis and custom data tips for the ColumnChart control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/25/adding-custom-labels-to-a-flex-columnchart-controls-column-series/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.charts.ChartItem;
import mx.charts.HitData;
import mx.charts.chartClasses.IAxis;
import mx.charts.chartClasses.Series;
import mx.charts.series.ColumnSet;
import mx.charts.series.items.ColumnSeriesItem;
import mx.utils.StringUtil;
private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
return numberFormatter.format(item);
}
private function columnChart_dataTipFunc(item:HitData):String {
var cSI:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
var col:String = ColumnSeries(item.element).yField;
return StringUtil.substitute("<b>{0}</b><br>{1}: {2}", cSI.item.name, col, numberFormatter.format(cSI.item[col]));
}
private function columnSeries_labelFunc(chartItem:ChartItem, series:Series):String {
var col:String = ColumnSeries(chartItem.element).yField;
return numberFormatter.format(chartItem.item[col]);
}
]]>
</mx:Script>
<mx:NumberFormatter id="numberFormatter" precision="3" />
<mx:Array id="arr">
<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Legend dataProvider="{columnChart}" direction="horizontal" />
</mx:ApplicationControlBar>
<mx:ColumnChart id="columnChart"
showDataTips="true"
dataProvider="{arr}"
dataTipFunction="columnChart_dataTipFunc"
columnWidthRatio="0.9"
type="stacked"
width="100%"
height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis id="ca" categoryField="name" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis labelFunction="linearAxis_labelFunc" />
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries id="avgSeries"
xField="name"
yField="avg"
displayName="Batting Average (AVG)"
labelPosition="inside"
labelFunction="columnSeries_labelFunc" />
<mx:ColumnSeries id="obpSeries"
xField="name"
yField="obp"
displayName="On-base Percentage (OBP)"
labelPosition="inside"
labelFunction="columnSeries_labelFunc" />
<mx:ColumnSeries id="slgSeries"
xField="name"
yField="slg"
displayName="Slugging Percentage (SLG)"
labelPosition="inside"
labelFunction="columnSeries_labelFunc" />
</mx:series>
<mx:seriesFilters>
<mx:Array />
</mx:seriesFilters>
</mx:ColumnChart>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
no more online preview?
Sorry, I’ve just had some problems with my Internet and FTP at home so I haven’t been able to upload the SWFs. I’ll go back tonight and try and add the missing SWFs.
Peter
This sample it’s for flex 2 or flex 3, because in flex 2 I got a problemn with the labelposition=”inside” in column series. Could you help me with that, please ?
Sample Code:
problem: “Cannot resolve attribute ‘labelPosition’ for component mx.charts.series.ColumnSeries ”
:(
All the samples are built using various builds of the Flex 3 SDK, sorry.
Peter
First of all, thank you for posting Flex code snippets and examples. For a Flex newbie like me, this is awesome stuff.
And please keep it up. I’ll be stopping by here regularly.
Hi everybody,
pls see the following link. this is for columnchart with label.
http://demo.quietlyscheming.com/chartBackgrounds/app.html
Hi thanks, fort your work! But I have one question – do you know how i can access the total value of a stack in the datatipfunction?
I love people who ask for help on blogs, read the docs, read the source, try a Google search why don’t you.
It’s even more fun when they ask totally unrelated questions. Luv it.
Smoted
Have you had any problems with charts when only 1 col is the chart.
The code below work but will not change the a chart with on one col
can you help
Hi everybody I think that this examples are very helpful, I have a problem,I want to change the order of the legend in a Stacked Column Chart for the color have an order like the stacked char, thanks.
but my column chart type is overlaid, how can we set the lable position in it? and can we draw a chart with more than 3 stacks and one line chart?
Can I set the data label inside each column and show it vertically. I tried to use the showLabelVertically=”true” but is not working. Im using flex 3
Thanks
How would I take the above example with the data embedded inside the columns and apply styles/formatting to it such as as a drop shadow. I’ve stumbled upon how to apply a drop shadow to the column itself but not to the actual text that is inside of it.
Hi
Any body can help me in this :
Is there any way that i can keep a check on items i want to display in legend (based on some condition , lets say if data is coming 0 throughout for particular series and i have multiple series in my graph .I want only those series to be shown in legend whose data is not 0)
In case i am dynamically providing dataprovider to legend i.e( legend.dataProvider = myChart).
Thanks
Varun
Thanks for the example
If the stack contains some large and many small items, can you advise if it is possible to show the labels only for the large items. If data labels are shown for the small items then I find that they just sit on top of each other!
if you’re looking for a way to completely control the format the labels (like color, position etc.) I have posted an example in my own blog at
http://platustalksflex.blogspot.com/
Hi Peter,
I have stacked column chart and legend has to be dynamic.
graphXML values are comin from DB, So it may vary
for(var n:int = 0; n < graphXML.length; n++)
{
columnSeries.yField = seriesDetails[n].YField;
columnSeries.displayName = seriesDetails[n].displayName;
}
this is sought of static, not dynamic
Facing lots of problem.
Please reply asap.
Thank U
Hi Peter,
If possible please share ur mail ID.
Thanks