@FlexiSush thanks a lot for your help. it is working now. but now i have facing one curious thing. if the dataprovider has only one item then the label on horizontal axis for that is not coming properly. i have fixed it by making sure that my dataprovider has atleast two values but still if i can fix that one element thing it will be nice.
here is the code:-- <?xml version="1.0"?> <!-- charts/RotateAxisLabels.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";> <mx:Script><![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month: new Date(2010,2,19), Profit: 2000, Expenses: 500} ]); ]]></mx:Script> <mx:Stroke id="axisStroke" color="#5391CD" weight="3" alpha="1" caps="none"/> <mx:Style> @font-face { src: url("/ARIAL.ttf"); fontFamily: myArial; } LineChart { fontFamily: myArial; fontSize: 8; } </mx:Style> <mx:Panel title="Rotated Axis Labels" width="100%" height="100%" horizontalAlign="left" verticalAlign="middle" borderStyle="solid" backgroundAlpha="0"> <mx:LineChart id="diskUsageLineChart" dataProvider="{expenses}" showDataTips="true" width="100%" height="100%" > <mx:seriesFilters> <mx:Array/> </mx:seriesFilters> <mx:backgroundElements> <mx:GridLines direction="none" horizontalShowOrigin="false" verticalShowOrigin="false" /> </mx:backgroundElements> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" id="timeAxis"/> </mx:horizontalAxis> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{timeAxis}" labelRotation="-45"> <mx:axisStroke>{axisStroke}</mx:axisStroke> </mx:AxisRenderer> </mx:horizontalAxisRenderers> <mx:verticalAxis> <mx:LinearAxis id="diskSpaceAxis" baseAtZero="true" interval="2"/ > </mx:verticalAxis> <mx:verticalAxisRenderers> <mx:AxisRenderer axis="{diskSpaceAxis}" canDropLabels="true" verticalAxisTitleAlignment="vertical"> <mx:axisStroke>{axisStroke}</mx:axisStroke> </mx:AxisRenderer> </mx:verticalAxisRenderers> <mx:series> <mx:LineSeries yField="Profit" xField="Month" sortOnXField="true" form="segment" interpolateValues="false"> <mx:lineStroke> <mx:Stroke color="#3333FF" weight="3" alpha="1"/> </mx:lineStroke> </mx:LineSeries> </mx:series> </mx:LineChart> </mx:Panel> </mx:Application> On Feb 9, 11:07 pm, FlexiSush <sushant...@gmail.com> wrote: > Hi akshar, > the problem in your application is gap between x- axis and y-axis; > This gap is because, you have lengthy label for the axis. There are 2 > ways to fix this. > 1. By shortening the date format using any date format(in your case > date is represented very long; use short format like 01/02/2010) > 2. By changing the labelRotation value of horizontal axis renderer to > -45 > > I have posted the changed code in my blog > at:http://flexphpworld.wordpress.com/2010/02/09/linechart-example/ > > Hope this will be of use to you > regards,http://flexphpworld.wordpress.com > > On Feb 9, 1:19 pm, Akshar <akshar.k...@gmail.com> wrote: > > > i am facing a new issue now. > > there is a gap between the x axis and the y axis. > > > code is as follows:---------------------------------------- > > > <?xml version="1.0"?> > > <!-- charts/RotateAxisLabels.mxml --> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";> > > <mx:Script><![CDATA[ > > import mx.collections.ArrayCollection; > > [Bindable] > > public var expenses:ArrayCollection = new ArrayCollection([ > > {Month: new Date(2010,2,1), Profit: 2000, Expenses: 1500}, > > {Month: new Date(2010,2,2), Profit: 1000, Expenses: 200}, > > {Month: new Date(2010,2,3), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,4), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,5), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,6), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,7), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,8), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,9), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,10), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,11), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,12), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,13), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,14), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,15), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,16), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,17), Profit: 2000, Expenses: 500}, > > {Month: new Date(2010,2,18), Profit: 1500, Expenses: 1500}, > > {Month: new Date(2010,2,19), Profit: 2000, Expenses: 500} > > ]); > > ]]></mx:Script> > > <mx:Stroke id="axisStroke" color="#5391CD" weight="3" alpha="1" > > caps="none"/> > > <mx:Style> > > @font-face > > { > > src: url("/ARIAL.ttf"); > > fontFamily: myArial; > > } > > > LineChart > > { > > fontFamily: myArial; > > fontSize: 8; > > } > > > ColumnChart > > { > > fontFamily: myArial; > > fontSize: 8; > > } > > </mx:Style> > > > <mx:Panel title="Rotated Axis Labels" width="100%" height="100%" > > horizontalAlign="left" verticalAlign="middle" borderStyle="solid" > > backgroundAlpha="0"> > > > <mx:LineChart id="diskUsageLineChart" dataProvider="{expenses}" > > showDataTips="true" > > width="100%" height="100%" > > > <mx:seriesFilters> > > <mx:Array/> > > </mx:seriesFilters> > > > <mx:backgroundElements> > > <mx:GridLines direction="none" > > horizontalShowOrigin="false" > > verticalShowOrigin="false" /> > > </mx:backgroundElements> > > > <mx:horizontalAxis> > > <mx:CategoryAxis > > dataProvider="{expenses}" > > categoryField="Month" > > id="timeAxis"/> > > </mx:horizontalAxis> > > <mx:horizontalAxisRenderers> > > <mx:AxisRenderer axis="{timeAxis}" > > labelRotation="45"> > > > > <mx:axisStroke>{axisStroke}</mx:axisStroke> > > </mx:AxisRenderer> > > </mx:horizontalAxisRenderers> > > > <mx:verticalAxis> > > <mx:LinearAxis id="diskSpaceAxis" > > baseAtZero="true" interval="2"/ > > > </mx:verticalAxis> > > <mx:verticalAxisRenderers> > > <mx:AxisRenderer > > axis="{diskSpaceAxis}" > > canDropLabels="true" > > > > verticalAxisTitleAlignment="vertical"> > > <mx:axisStroke>{axisStroke}</mx:axisStroke> > > </mx:AxisRenderer> > > </mx:verticalAxisRenderers> > > > <mx:series> > > <mx:LineSeries yField="Profit" > > xField="Month" sortOnXField="true" > > form="segment" interpolateValues="false"> > > <mx:lineStroke> > > <mx:Stroke color="#3333FF" > > weight="3" alpha="1"/> > > </mx:lineStroke> > > </mx:LineSeries> > > </mx:series> > > > </mx:LineChart> > > > </mx:Panel> > > </mx:Application> > > > On Feb 8, 7:26 pm, Akshar <akshar.k...@gmail.com> wrote: > > > > @FlexiSush > > > thanks a lot. it is now working. > > > @Varun Bajaj > > > we can use any font. i am now using arial. > > > > On Feb 8, 9:23 am, Varun Bajaj <vb.j...@gmail.com> wrote: > > > > > Hi akshar > > > > > I don;t think that you can use the arial or any font (ANY) for rotating > > > > chart axis labels. I am attaching the ttf file which is perfectly > > > > working > > > > for me. > > > > > Thanks > > > > > Varun Bajaj > > > > > On Sun, Feb 7, 2010 at 11:39 PM, Akshar <akshar.k...@gmail.com> wrote: > > > > > i understood that i need some special fonts to rotate the label. can > > > > > you specify some place from where i can get these fonts. can i use the > > > > > basic arial font type for it. > > > > > any link which clarifies more on this topic will be appreciated. > > > > > > On Feb 5, 9:21 am, Varun Bajaj <vb.j...@gmail.com> wrote: > > > > > > dear akshar > > > > > > > Your answer is within your Q itself. Label rotation is done with > > > > > > specific > > > > > > font type only same as print. Hope you are understanding what i am > > > > > > trying > > > > > to > > > > > > say :) > > > > > > > Varun Bajaj > > > > > > > On Thu, Feb 4, 2010 at 5:13 PM, Akshar <akshar.k...@gmail.com> > > > > > > wrote: > > > > > > > I want to rotate the chart axis label. i have used the sample code > > > > > > > provided by adobe @ > > > > > > >http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_. > > > > > .. > > > > > > > but i am not able to achieve the rotation. > > > > > > > I have removed following lines in the sample code because i do not > > > > > > > have the font ttf:- > > > > > > ------------------------------------------------------------------------------------------------------------ > > > > > > > <mx:Style> > > > > > > > @font-face{ > > > > > > > src: url("../assets/MyriadWebPro.ttf"); > > > > > > > fontFamily: myMyriad; > > > > > > > } > > > > > > > > ColumnChart { > > > > > > > fontFamily: myMyriad; > > > > > > > fontSize: 20; > > > > > > > } > > > > > > > </mx:Style> > > > > > > ------------------------------------------------------------------------------------------------------------ > > > > > > > > any help in this direction will be helpful. > > > > > > > > my file is :- > > > > > > > > <?xml version="1.0"?> > > > > > > > <!-- charts/RotateAxisLabels.mxml --> > > > > > > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";> > > > > > > > <mx:Script><![CDATA[ > > > > > > > import mx.collections.ArrayCollection; > > > > > > > [Bindable] > > > > > > > public var expenses:ArrayCollection = new ArrayCollection([ > > > > > > > {Month: "Jan", Profit: 2000, Expenses: 1500}, > > > > > > > {Month: "Feb", Profit: 1000, Expenses: 200}, > > > > > > > {Month: "Mar", Profit: 1500, Expenses: 500} > > > > > > > ]); > > > > > > > ]]></mx:Script> > > > > > > > > <mx:Panel title="Rotated Axis Labels"> > > > > > > > <mx:ColumnChart id="column" dataProvider="{expenses}" > > > > > > > showDataTips="true"> > > > > > > > <mx:horizontalAxis> > > > > > > > <mx:CategoryAxis > > > > > > > dataProvider="{expenses}" > > > > > > > categoryField="Month" > > > > > > > title="FY 2006" > > > > > > > id="a1" > > > > > > > /> > > > > > > > </mx:horizontalAxis> > > > > > > > > <mx:horizontalAxisRenderers> > > > > > > > <mx:AxisRenderer labelRotation="45" axis="{a1}"/> > > > > > > > </mx:horizontalAxisRenderers> > > > > > > > <mx:verticalAxisRenderers> > > > > > > > <mx:AxisRenderer labelRotation="45" > > ... > > read more » -- You received this message because you are subscribed to the Google Groups "Flex India Community" group. To post to this group, send email to flex_in...@googlegroups.com. To unsubscribe from this group, send email to flex_india+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/flex_india?hl=en.
