Flex Examples
In a slightly modified version of a previous example (“Charting in Flex Builder 3 (public beta 1 edition)” — hooray for recycling!), this time we look at removing some of the crowded labels along the horizontal axis by setting the canDropLabels style.
Full code after the jump.
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/10/16/dropping-labels-in-a-flex-chart/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="quotesXML" source="adbe.xml" format="e4x" />
<mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />
<mx:String id="ADBE_YAHOO">http://finance.yahoo.com/q?d=t&s=ADBE</mx:String>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="canDropLabels:"
labelPlacement="left" />
</mx:ApplicationControlBar>
<mx:LinkButton
label="ADBE"
click="navigateToURL(new URLRequest(ADBE_YAHOO))"
fontSize="14"
fontWeight="bold" />
<mx:HLOCChart id="hlocChart"
showDataTips="true"
dataProvider="{adbe}"
width="100%"
height="100%">
<!-- vertical axis -->
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" title="Price" />
</mx:verticalAxis>
<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="@date" title="Date" />
</mx:horizontalAxis>
<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderer>
<mx:AxisRenderer canDropLabels="{checkBox.selected}" />
</mx:horizontalAxisRenderer>
<!-- series -->
<mx:series>
<mx:HLOCSeries id="series1"
highField="@high"
lowField="@low"
openField="@open"
closeField="@close"/>
</mx:series>
</mx:HLOCChart>
</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
I am looking for an example to do a dynamic display in chart – where data will come from MS SQL db via coldfuion – also chart will refresh with newer data set and will refresh it in certain interval. I am very new in flex — I think I am good in CF and SQL.
Thanks in advance.
@abul:
See this dynamic chart example. It might help you!
Regards
hi,
this is really great example ..
i am keen searcing of this type of example.
i have one suggestion not related to this example but related to GUI
ie. the search text color is not properly visible please make it white like other text oolor.
hi,
i dont know if this is the right place to ask some help. Im stuck. i have m source code below. i dont why but i got an error with my chart when i run it. Thanks bud.
private function date_labelFuncForChart(item:Object, column:CategoryAxis):String
{
return dateFormatter.format(item.priceDate );
}
I want to see an example of flex chart which could display project activities in simple manner.
Narendra Bisht
High Mountain Biodiversiyty Conservation Project, Bajhnag Nepal
we can make the x label to years mounths or days! that looks good!
You’re using a CategoryAxis to display the date. What if you had a date range in hours or minutes inteval, and it’s important to you to show when the DATE suddenly changes?
for example:
| | | |
23:45 23:55 29/3 00:05 00:15
in this example, flex could decide to drop the “29/3 00:05″ label.
Is there a way to force him not to drop certain (important) labels?
(Or maybe some other idea to convery that the day has changed?)
Hi Peter,
I have a small problem in the “canDropLabels ” style, actually I’m creating the chart at the run-time using action script. the problem is when there is more columns the column label became very small and the intermediate labels were not dropping even though i set true to the “canDropLabels ” style. here is my code sample
chart = new ColumnChart(); chart.percentWidth = 100; chart.percentHeight = 100; chart.seriesFilters = []; chart.type = 'stacked'; chart.showDataTips = true; chart.styleName = 'title'; chart.dataTipFunction=formatDataTip; //-------------------------------------------------------------- var caxis:CategoryAxis = new CategoryAxis(); caxis.labelFunction = categoryAxis_labelFunc; //-------------------------------------------------------------- var hAxisRenderer:AxisRenderer = new AxisRenderer(); hAxisRenderer.axis = caxis; hAxisRenderer.setStyle('axisStroke', new Stroke(0xCCCCCC, 2)); hAxisRenderer.setStyle('canDropLabels', true); //-------------------------------------------------------------- var laxis:LinearAxis = new LinearAxis(); laxis.interval = 1; laxis.baseAtZero = false; //-------------------------------------------------------------- var vAxisRenderer:AxisRenderer = new AxisRenderer(); vAxisRenderer.axis = laxis; vAxisRenderer.setStyle('axisStroke', new Stroke(0xCCCCCC, 2)); vAxisRenderer.setStyle('canDropLabels', true); //-------------------------------------------------------------- chart.horizontalAxis = caxis; chart.verticalAxis = laxis; chart.verticalAxisRenderers = [vAxisRenderer]; chart.horizontalAxisRenderers = [hAxisRenderer]; addChild(chart);and I’m creating the ColumnSeries at run time depending on data i receive from the xml. can you give me any idea how to fix this issue. I’m new to Flex Charting component, don’t mistake me is my question is silly.
thanks in Advance
S. Jagan Langa
Try this…
var hAxisRenderer:AxisRenderer = new AxisRenderer();
hAxisRenderer.axis = caxis;
hAxisRenderer.setStyle(‘axisStroke’, new Stroke(0xCCCCCC, 2));
hAxisRenderer.setStyle(‘canDropLabels’, true);
// new line to add
chart.horizontalAxisRenderers = [hAxisRenderer];
Hi,
How to change the color of the datapoint in line chart to the color of the its stroke… please help me I’m little new to the flex chart component.