<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flex Examples &#187; showLabelVertically</title>
	<atom:link href="http://blog.flexexamples.com/tag/showlabelvertically/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Wed, 26 Jan 2011 18:09:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Displaying the labels vertically in Flex ColumnChart control</title>
		<link>http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/</link>
		<comments>http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/#comments</comments>
		<pubDate>Thu, 24 Jan 2008 03:03:46 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Charting]]></category>
		<category><![CDATA[ColumnChart]]></category>
		<category><![CDATA[labelFunction]]></category>
		<category><![CDATA[labelPosition]]></category>
		<category><![CDATA[showLabelVertically]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/</guid>
		<description><![CDATA[<p>The following example shows how you can display the labels in a ColumnSeries either vertically or horizontally in a ColumnChart control in Flex by setting the Boolean showLabelVertically property.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/ColumnChart_showLabelVertically_test/main.mxml">View MXML</a></p> &#60;?xml version="1.0"?&#62; &#60;!-- http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/ --&#62; &#60;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"&#62; &#60;mx:Style&#62; @font-face { src: local("Arial"); fontFamily: [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can display the labels in a ColumnSeries either vertically or horizontally in a ColumnChart control in Flex by setting the Boolean <code>showLabelVertically</code> property.</p>
<p>Full code after the jump.</p>
<p><span id="more-473"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/ColumnChart_showLabelVertically_test/main.mxml">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Style&gt;
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        ColumnChart {
            fontFamily: ArialEmbedded;
        }
    &lt;/mx:Style&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.charts.series.items.ColumnSeriesItem;
            import mx.charts.ChartItem;
            import mx.charts.chartClasses.Series;
            import mx.charts.chartClasses.IAxis;
            import mx.utils.ObjectUtil;

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currencyFormatter.format(item);
            }

            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return shortDateFormatter.format(tempDate).toUpperCase();
            }

            private function columnSeries_labelFunc(element:ChartItem, series:Series):String {
                var csi:ColumnSeriesItem = ColumnSeriesItem(element);
                var ser:ColumnSeries = ColumnSeries(series);

                var datNum:Number = Date.parse(csi.item.@date);
                var tempDate:Date = new Date(datNum);
                return fullDateFormatter.format(tempDate);
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:DateFormatter id="shortDateFormatter" formatString="DD" /&gt;
    &lt;mx:DateFormatter id="fullDateFormatter" formatString="MMM D, YYYY" /&gt;
    &lt;mx:CurrencyFormatter id="currencyFormatter" precision="2" /&gt;

    &lt;mx:XMLListCollection id="dp"&gt;
        &lt;mx:source&gt;
            &lt;mx:XMLList&gt;
                &lt;quote date="8/1/2007" open="40.29" close="39.58" /&gt;
                &lt;quote date="8/2/2007" open="39.4" close="39.52" /&gt;
                &lt;quote date="8/3/2007" open="39.47" close="38.75" /&gt;
                &lt;quote date="8/6/2007" open="38.71" close="39.38" /&gt;
                &lt;quote date="8/7/2007" open="39.08" close="39.42" /&gt;
                &lt;quote date="8/8/2007" open="39.61" close="40.23" /&gt;
                &lt;quote date="8/9/2007" open="39.9" close="40.75" /&gt;
                &lt;quote date="8/10/2007" open="41.3" close="41.06" /&gt;
                &lt;quote date="8/13/2007" open="41" close="40.83" /&gt;
                &lt;quote date="8/14/2007" open="41.01" close="40.41" /&gt;
                &lt;quote date="8/15/2007" open="40.22" close="40.18" /&gt;
                &lt;quote date="8/16/2007" open="39.83" close="39.96" /&gt;
                &lt;quote date="8/17/2007" open="40.18" close="40.32" /&gt;
                &lt;quote date="8/20/2007" open="40.55" close="40.74" /&gt;
                &lt;quote date="8/21/2007" open="40.41" close="40.13" /&gt;
                &lt;quote date="8/22/2007" open="40.4" close="40.77" /&gt;
                &lt;quote date="8/23/2007" open="40.82" close="40.6" /&gt;
                &lt;quote date="8/24/2007" open="40.5" close="40.41" /&gt;
                &lt;quote date="8/27/2007" open="40.38" close="40.81" /&gt;
            &lt;/mx:XMLList&gt;
        &lt;/mx:source&gt;
    &lt;/mx:XMLListCollection&gt;

    &lt;mx:ApplicationControlBar dock="true"&gt;
        &lt;mx:CheckBox id="checkBox"
                label="showLabelVertically:"
                labelPlacement="left"
                selected="true" /&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:ColumnChart id="columnChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%"
            showLabelVertically="{checkBox.selected}"&gt;

        &lt;!-- vertical axis --&gt;
        &lt;mx:verticalAxis&gt;
            &lt;mx:LinearAxis baseAtZero="false"
                    labelFunction="linearAxis_labelFunc" /&gt;
        &lt;/mx:verticalAxis&gt;

        &lt;!-- horizontal axis --&gt;
        &lt;mx:horizontalAxis&gt;
            &lt;mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="August 2007"
                    labelFunction="categoryAxis_labelFunc" /&gt;
        &lt;/mx:horizontalAxis&gt;

        &lt;!-- horizontal axis renderer --&gt;
        &lt;mx:horizontalAxisRenderers&gt;
            &lt;mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" /&gt;
        &lt;/mx:horizontalAxisRenderers&gt;

        &lt;!-- series --&gt;
        &lt;mx:series&gt;
            &lt;mx:ColumnSeries displayName="Open"
                    xField="@date"
                    yField="@open"
                    labelFunction="columnSeries_labelFunc"
                    labelPosition="outside"&gt;
            &lt;/mx:ColumnSeries&gt;
        &lt;/mx:series&gt;

        &lt;!-- series filters --&gt;
        &lt;mx:seriesFilters&gt;
            &lt;mx:Array /&gt;
        &lt;/mx:seriesFilters&gt;
    &lt;/mx:ColumnChart&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/ColumnChart_showLabelVertically_test/bin/srcview/index.html">View source</a> is enabled in the following example. | <a href="http://blog.flexexamples.com/wp-content/uploads/ColumnChart_showLabelVertically_test/bin/main.swf" target="_blank">View SWF in new window</a></p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/ColumnChart_showLabelVertically_test/bin/main.html" width="100%" height="500"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Displaying the labels vertically in Flex ColumnChart control on FlexExamples.com',url: 'http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/',contentID: 'post-473',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'labelFunction,labelPosition,showLabelVertically',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2008/01/23/displaying-the-labels-vertically-in-flex-columnchart-control/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

