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.
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.
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?)