...
At the moment the charts can have only one vertical and one horizontal axis, so you need to choose a data field from the dataProvider to use for each axis.
Other Axis Types
In addition to the HorizontalCategoryAxisBead and VerticalLinearAxisBead there are VerticalCategoryAxisBead and HorizontalLinearAxisBead.
All of the axis beads have stroke (line) properties to set the appearance of their axis lines and tick marks. For example, to set the axis line to red and tick marks green:
<basic:HorizontalCategoryAxisBead categoryField="month">
<basic:axisStroke>
<basic:SolidColorStroke color="#FF0000" weight="2" />
</basic:axisStroke>
<basic:tickStroke>
<basic:SolidColorStroke color="#00FF00" weight="2" />
</basic>tickStroke>
</basic:HorizontalCategoryAxisBead>
Without specifying the axisStroke and tickStroke, the axis parts will be drawn with a thin black line.
Chart Types
In addition to ColumnChart, FlexJS has the following chart types and their series and itemRenderers:
Chart Type | Series | Suggest itemRenderer |
---|---|---|
ColumnChart | ColumnSeries | BoxItemRenderer |
BarChart | BarSeries | BoxItemRenderer |
StackedColumnChart | ColumnSeries | BoxItemRenderer |
StackedBarChart | ColumnSeries | BoxItemRenderer |
PieChart | PieSeries note 1 | WedgeItemRenderer |
LineChart | LineSeries | BoxItemRenderer and LineSegmentItemRenderer note 2 |
#note1 At this time a PieChart supports only 1 PieSeries
#note2 A LineSeries has two renderers: the itemRenderer is used to draw a figure at the point (such as a small square box). The lineSegmentItemRenderer is used to connect the points with a single line. Both renderers are optional although you should include at least one of them to see anything.
Chart Layouts
This section is next and will describe how FlexJS charts actually work using layouts.