Rotating chart axis labels
Akshar
provided by adobe @ http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_08.html
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>
Akshar
On Feb 4, 4:43 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_...
Varun Bajaj
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
--
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_...@googlegroups.com.
To unsubscribe from this group, send email to flex_india+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/flex_india?hl=en.
Akshar
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_...
> > flex_india+...@googlegroups.com<flex_india%2Bunsu...@googlegroups.com>
FlexiSush
the solution for your problem can be found in my blog at
http://flexphpworld.wordpress.com/2010/02/08/column-chart-with-rotated-axis-labels/
Note:
To use this example we need to copy Arial.ttf file from Control Panel-
>Fonts and put it in a folder ‘assets’ inside ’src’ folder of flex
project
On Feb 4, 4:43 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_...
Varun Bajaj
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
To unsubscribe from this group, send email to flex_india+...@googlegroups.com.
Akshar
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
>
> > <flex_india%2Bunsu...@googlegroups.com<flex_india%252Buns...@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_...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > flex_india+...@googlegroups.com<flex_india%2Bunsu...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/flex_india?hl=en.
>
>
>
> myriadwebpro.ttf
> 128KViewDownload
Akshar
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>
FlexiSush
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
Akshar
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: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
> ...
>
> read more »