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" axis="{a1}"/> > > > > > > </mx:verticalAxisRenderers> > > > > > > > <mx:series> > > > > > > <mx:ColumnSeries > > > > > > xField="Month" > > > > > > yField="Profit" > > > > > > displayName="Profit" > > > > > > /> > > > > > > <mx:ColumnSeries > > > > > > xField="Month" > > > > > > yField="Expenses" > > > > > > displayName="Expenses" > > > > > > /> > > > > > > </mx:series> > > > > > > </mx:ColumnChart> > > > > > > <mx:Legend dataProvider="{column}"/> > > > > > > </mx:Panel> > > > > > > </mx:Application> > > > > > > > -- > > > > > > 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<flex_india%2bunsubscr...@googlegroups.com> > > > > <flex_india%2bunsubscr...@googlegroups.com<flex_india%252bunsubscr...@googlegroups.com> > > > > > > > . > > > > > > For more options, visit this group at > > > > > >http://groups.google.com/group/flex_india?hl=en. > > > > > -- > > > > 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<flex_india%2bunsubscr...@googlegroups.com> > > > > . > > > > For more options, visit this group at > > > >http://groups.google.com/group/flex_india?hl=en. > > > > myriadwebpro.ttf > > > 128KViewDownload -- 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.
