| Package | com.amcharts.axes |
| Class | public class CategoryAxis |
| Inheritance | CategoryAxis  AxisBase mx.core.UIComponent |
| Property | Defined by | ||
|---|---|---|---|
| autoTruncate : Boolean
Specifies if category labels should be truncated if they don't fit.
| CategoryAxis | ||
| dateFormats : Array
Array of date format objects.
| CategoryAxis | ||
| equalSpacing : Boolean
In case your category axis values are Date objects and parseDates is set to true,
the chart will parse dates and will place your data points at irregular intervals.
| CategoryAxis | ||
| firstDayOfWeek : Number
Defines on which day week starts.
| CategoryAxis | ||
| gridPosition : String
Specifies if a grid line is placed on the center of a cell or on the beginning of a cell.
| CategoryAxis | ||
 | guides : Array
The array of guides belonging to this axis.
| AxisBase | |
| ignoreAxisWidth : Boolean
If autoMargins property of a chart is set to true but you don't want
this axis to be measured when calculating margin width, set ignoreAxisWidth to true
| AxisBase | |
| inside : Boolean
Whether values should be placed inside or outside plot area.
| AxisBase | |
| labelFunction : Function
Label function.
| AxisBase | |
| maxLabelLength : Number
Maximum length (number of symbols) of a label.
| AxisBase | |
| maxLabelWidth : Number
returns max width of values
| AxisBase | |
| minPeriod : String
Specifies the shortest period of your data.
| CategoryAxis | ||
| offset : Number
The distance of the axis to the plot area, in pixels.
| AxisBase | |
| parseDates : Boolean
In case your category axis values are Date objects, set this to true.
| CategoryAxis | ||
| position : String
Position of the axis.
| AxisBase | |
| startOnAxis : Boolean
Specifies whether the graph should start on axis or not.
| CategoryAxis | ||
| title : String
Axis title will be displayed next to axis.
| AxisBase | |
| titleAlignment : String
Alignment of axis title.
| AxisBase | |
| titleTextColor : Number
Text color of axis title
Will use default axis color style value if not set
| AxisBase | |
| titleTextSize : Number
Text size of axis title
| AxisBase | |
| valueClickHandler : Function
Method which will be called when user clicks on the axis label
| AxisBase | |
| wrapLabels : Boolean
Specifies if category labels should be wrapped if they don't fit
Doesn't work if labels are rotated, or category axis is vertical.
| CategoryAxis | ||
| Method | Defined by | ||
|---|---|---|---|
|
Constructor.
| CategoryAxis | ||
|
Adds guide to the axis
| AxisBase | |
|
categoryToCoordinate(category:String):Number
returns coordinate of a category.
| CategoryAxis | ||
|
coordinateToDate(coordinate:Number):Date
Returns Date of the coordinate, in case parseDates is set to true.
| CategoryAxis | ||
|
dateToCoordinate(date:Date):Number
Returns coordinate of the date, in case parseDates is set to true.
| CategoryAxis | ||
|
formatDate(date:Date):String
Formats Date object into String using date format of the minPeriod.
| CategoryAxis | ||
|
getDateFormat(period:String):String
Returns date format of a period.
| CategoryAxis | ||
|
removeGuide(guide:Guide):void
Removes guide from the axis
| AxisBase | |
|
setDateFormat(period:String, format:String):void
Specifies the date format of the period.
| CategoryAxis | ||
| autoTruncate | property |
Hide Inherited Public Properties
Show Inherited Public PropertiesautoTruncate:Boolean [read-write]Specifies if category labels should be truncated if they don't fit. Doesn't work if labels are rotated, or category axis is vertical.
The default value is false.
public function get autoTruncate():Boolean
public function set autoTruncate(value:Boolean):void
| dateFormats | property |
dateFormats:Array [read-write]Array of date format objects. Date format object must have "period" and "format" items. Available periods are: fff - millisecond, ss - second, mm - minute, hh - hour, DD - date, MM - month, YYYY - year. format can contain any string supported by mx.formatters.DateFormatter class. For example: {period:"DD", format:"MMM DD"}
The default value is [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN'},{period:'hh',format:'JJ:NN'},{period:'DD',format:'MMM DD'},{period:'MM',format:'MMM'},{period:'YYYY',format:'YYYY'}].
public function get dateFormats():Array
public function set dateFormats(value:Array):void
| equalSpacing | property |
equalSpacing:Boolean [read-write]In case your category axis values are Date objects and parseDates is set to true, the chart will parse dates and will place your data points at irregular intervals. However if you want dates to be parsed (displayed on the axis, baloons, etc), but data points to be placed at equal intervals (omiting dates with no data), set equalSpacing to true.
The default value is false.
public function get equalSpacing():Boolean
public function set equalSpacing(value:Boolean):void
| firstDayOfWeek | property |
firstDayOfWeek:Number [read-write]Defines on which day week starts. 0 - Sunday, 1 - Monday...
The default value is 1 (Monday).
public function get firstDayOfWeek():Number
public function set firstDayOfWeek(value:Number):void
| gridPosition | property |
gridPosition:String [read-write]Specifies if a grid line is placed on the center of a cell or on the beginning of a cell. Possible values are: start and middle This setting doesn't work if parseDates is set to true
The default value is middle.
public function get gridPosition():String
public function set gridPosition(value:String):void
| minPeriod | property |
minPeriod:String [read-write]Specifies the shortest period of your data. This should be set only if parseDates is set to "true".
The default value is DD.
public function get minPeriod():String
public function set minPeriod(value:String):void
| parseDates | property |
parseDates:Boolean [read-write]In case your category axis values are Date objects, set this to true. In this case the chart will parse dates and will place your data points at irregular intervals.
The default value is false.
public function get parseDates():Boolean
public function set parseDates(value:Boolean):void
| startOnAxis | property |
startOnAxis:Boolean [read-write]Specifies whether the graph should start on axis or not. In case you display columns, it is recommended to set this to false. If parseDates is set to true, startOnAxis will allways be "false", unless equalSpacing is set to true.
The default value is false.
public function get startOnAxis():Boolean
public function set startOnAxis(value:Boolean):void
| wrapLabels | property |
wrapLabels:Boolean [read-write]Specifies if category labels should be wrapped if they don't fit Doesn't work if labels are rotated, or category axis is vertical. Only works if parseDates is false.
The default value is false.
public function get wrapLabels():Boolean
public function set wrapLabels(value:Boolean):void
| CategoryAxis | () | constructor |
public function CategoryAxis()Constructor.
| categoryToCoordinate | () | method |
public function categoryToCoordinate(category:String):Numberreturns coordinate of a category. Works only if parseDates is false. If parseDates is true, use dateToCoordinate method.
Parameterscategory:String |
Number |
| coordinateToDate | () | method |
public function coordinateToDate(coordinate:Number):DateReturns Date of the coordinate, in case parseDates is set to true. Example: myCategoryAxis.coordinateToDate(myCategoryAxis.mouseX);
Parameterscoordinate:Number |
Date |
| dateToCoordinate | () | method |
public function dateToCoordinate(date:Date):NumberReturns coordinate of the date, in case parseDates is set to true. if parseDates is false, use categoryToCoordinate method.
Parametersdate:Date |
Number |
| formatDate | () | method |
public function formatDate(date:Date):StringFormats Date object into String using date format of the minPeriod.
Parametersdate:Date |
String |
| getDateFormat | () | method |
public function getDateFormat(period:String):StringReturns date format of a period.
Parametersperiod:String |
String |
| setDateFormat | () | method |
public function setDateFormat(period:String, format:String):voidSpecifies the date format of the period.
Parametersperiod:String — valid values are: ff,ss,mm,hh,DD,MM,YYYY
|
|
format:String — can contain strings supported by mx.formatters.DateFormatter:
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:amcharts="http://www.amcharts.com/com_internal"
layout="absolute"
backgroundColor="#FFFFFF"
width="100%"
height="100%" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var chartData:ArrayCollection = new ArrayCollection([
{date:new Date(2009,10,2),value:11,value2:2},
{date:new Date(2009,10,3),value:15,value2:3},
{date:new Date(2009,10,4),value:13,value2:2},
{date:new Date(2009,10,5),value:17,value2:1},
{date:new Date(2009,10,6),value:15,value2:1},
{date:new Date(2009,10,9),value:19,value2:2},
{date:new Date(2009,10,10),value:21,value2:2},
{date:new Date(2009,10,11),value:20,value2:2},
{date:new Date(2009,10,12),value:20,value2:3},
{date:new Date(2009,10,13),value:19,value2:4},
{date:new Date(2009,10,16),value:25,value2:3},
{date:new Date(2009,10,17),value:24,value2:2},
{date:new Date(2009,10,18),value:26,value2:2},
{date:new Date(2009,10,19),value:27,value2:1},
{date:new Date(2009,10,20),value:25,value2:3},
{date:new Date(2009,10,23),value:29,value2:4},
{date:new Date(2009,10,24),value:28,value2:2},
{date:new Date(2009,10,25),value:30,value2:4},
{date:new Date(2009,10,26),value:32,value2:3},
{date:new Date(2009,10,27),value:33,value2:3},
{date:new Date(2009,10,30),value:31,value2:3},
{date:new Date(2009,11,1),value:30,value2:2},
{date:new Date(2009,11,2),value:29,value2:1},
{date:new Date(2009,11,3),value:27,value2:1},
{date:new Date(2009,11,4),value:26,value2:1}
]);
private function zoom():void{
var count:Number = chartData.length;
chart.zoomToIndexes(count - 10, count - 1);
}
]]>
</mx:Script>
<amcharts:AmSerialChart
dataUpdated="{zoom()}"
id="chart"
width="100%"
height="100%"
dataProvider="{chartData}"
categoryField="date"
angle="30"
depth3D="20">
<amcharts:graphs>
<amcharts:AmGraph id="g1" valueField="value" type="column" fillAlphas="[1]" lineColor="#D8E63C"/>
<amcharts:AmGraph id="g2" valueField="value2" type="column" fillAlphas="[1]" lineColor="#E1CE4F"/>
</amcharts:graphs>
<!-- It is very important to tell the category axis if it's values are date based or not.
In case yes, set parseDates to true. You should also set the minimum period of your data.
For example, if you have hourly data, set minPeriod to "hh". -->
<amcharts:categoryAxis>
<amcharts:CategoryAxis parseDates="true" minPeriod="DD"/>
</amcharts:categoryAxis>
<amcharts:valueAxes>
<amcharts:ValueAxis stackType="regular"/>
</amcharts:valueAxes>
<amcharts:chartCursor>
<amcharts:ChartCursor/>
</amcharts:chartCursor>
<amcharts:chartScrollbar>
<amcharts:ChartScrollbar graph="{g1}"/>
</amcharts:chartScrollbar>
</amcharts:AmSerialChart>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:amcharts="http://www.amcharts.com/com_internal"
layout="absolute"
backgroundColor="#FFFFFF"
width="100%"
height="100%" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);
[Bindable]
private var chartData:ArrayCollection = new ArrayCollection([
{year:2005,income:23.5,expences:18.1},
{year:2006,income:26.2,expences:22.8},
{year:2007,income:30.1,expences:23.9},
{year:2008,income:29.5,expences:25.1},
{year:2009,income:24.6,expences:25.0}
]);
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<amcharts:AmSerialChart
id="chart"
width="100%"
height="100%"
dataProvider="{chartData}"
categoryField="year"
startDuration="1"
rotate="true">
<amcharts:graphs>
<amcharts:AmGraph title="Income" valueField="income" type="column" lineAlpha="0" fillColors="[#ADD981]" fillAlphas="[1]"/>
<amcharts:AmGraph title="Expences" valueField="expences" type="line" lineThickness="2" bullet="round" filters="{[shadow]}"/>
</amcharts:graphs>
<amcharts:categoryAxis>
<amcharts:CategoryAxis gridPosition="start" dashLength="5" fillAlpha="0.1" fillColor="#000000"/>
</amcharts:categoryAxis>
</amcharts:AmSerialChart>
<amcharts:AmLegend marginLeft="50" dataProvider="{chart}" textClickEnabled="false"/>
</mx:VBox>
</mx:Application>