<?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; horizontalTickAligned</title>
	<atom:link href="http://blog.flexexamples.com/tag/horizontaltickaligned/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>Aligning data in a Flex LineChart control to horizontal and vertical tick marks</title>
		<link>http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/</link>
		<comments>http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/#comments</comments>
		<pubDate>Mon, 19 Nov 2007 07:57:46 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Charting]]></category>
		<category><![CDATA[GridLines]]></category>
		<category><![CDATA[LineChart]]></category>
		<category><![CDATA[horizontalTickAligned]]></category>
		<category><![CDATA[verticalTickAligned]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/</guid>
		<description><![CDATA[<p>The following example shows how you can align the tick marks along the vertical and horizontal axis using the horizontalTickAligned and verticalTickAligned styles in the GridLines class, as seen in the following snippet:</p> &#60;mx:GridLines direction=&#34;both&#34; horizontalTickAligned=&#34;false&#34; verticalTickAligned=&#34;false&#34;&#62; ... &#60;/mx:GridLines&#62; <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/GridLines_horizontalTickAligned_test/main.mxml">View MXML</a></p> &#60;?xml version="1.0"?&#62; &#60;!-- http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/ --&#62; &#60;mx:Application [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can align the tick marks along the vertical and horizontal axis using the <code>horizontalTickAligned</code> and <code>verticalTickAligned</code> styles in the GridLines class, as seen in the following snippet:</p>
<pre class="code">
&lt;mx:GridLines direction=&quot;both&quot;
    <span style="color:red;">horizontalTickAligned=&quot;false&quot;
    verticalTickAligned=&quot;false&quot;</span>&gt;

    ...

&lt;/mx:GridLines&gt;
</pre>
<p>Full code after the jump.</p>
<p><span id="more-312"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/GridLines_horizontalTickAligned_test/main.mxml">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0"?&gt;
&lt;!-- http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.charts.CategoryAxis;
            import mx.charts.chartClasses.IAxis;

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currFormatter.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 tempDate.date.toString();
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:CurrencyFormatter id="currFormatter" 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:Form styleName="plain"&gt;
            &lt;mx:FormItem label="direction:"&gt;
                &lt;mx:ComboBox id="comboBox"&gt;
                    &lt;mx:dataProvider&gt;
                        &lt;mx:Array&gt;
                            &lt;mx:Object label="both" /&gt;
                            &lt;mx:Object label="horizontal" /&gt;
                            &lt;mx:Object label="vertical" /&gt;
                        &lt;/mx:Array&gt;
                    &lt;/mx:dataProvider&gt;
                &lt;/mx:ComboBox&gt;
            &lt;/mx:FormItem&gt;
            &lt;mx:FormItem label="horizontalTickAligned:"&gt;
                &lt;mx:CheckBox id="hCheckBox" selected="true" /&gt;
            &lt;/mx:FormItem&gt;
            &lt;mx:FormItem label="verticalTickAligned:"&gt;
                &lt;mx:CheckBox id="vCheckBox" selected="true" /&gt;
            &lt;/mx:FormItem&gt;
        &lt;/mx:Form&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%"&gt;

        &lt;!-- background elements --&gt;
        &lt;mx:backgroundElements&gt;
            &lt;mx:GridLines direction="{comboBox.selectedItem.label}"
                    horizontalTickAligned="{hCheckBox.selected}"
                    verticalTickAligned="{vCheckBox.selected}"&gt;
                &lt;mx:horizontalFill&gt;
                    &lt;mx:SolidColor color="haloBlue" alpha="0.2" /&gt;
                &lt;/mx:horizontalFill&gt;
                &lt;mx:horizontalAlternateFill&gt;
                    &lt;mx:SolidColor color="haloSilver" alpha="0.2" /&gt;
                &lt;/mx:horizontalAlternateFill&gt;
                &lt;mx:verticalFill&gt;
                    &lt;mx:SolidColor color="haloBlue" alpha="0.2" /&gt;
                &lt;/mx:verticalFill&gt;
                &lt;mx:verticalAlternateFill&gt;
                    &lt;mx:SolidColor color="haloSilver" alpha="0.2" /&gt;
                &lt;/mx:verticalAlternateFill&gt;
            &lt;/mx:GridLines&gt;
        &lt;/mx:backgroundElements&gt;

        &lt;!-- vertical axis --&gt;
        &lt;mx:verticalAxis&gt;
            &lt;mx:LinearAxis baseAtZero="false"
                    title="Price"
                    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:LineSeries yField="@open" displayName="Open" /&gt;
            &lt;mx:LineSeries yField="@close" displayName="Close" /&gt;
        &lt;/mx:series&gt;

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

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/GridLines_horizontalTickAligned_test/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/GridLines_horizontalTickAligned_test/bin/main.html" width="100%" height="500"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Aligning data in a Flex LineChart control to horizontal and vertical tick marks on FlexExamples.com',url: 'http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/',contentID: 'post-312',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'horizontalTickAligned,verticalTickAligned',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/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

