Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 TypeSeriesSuggest itemRenderer
ColumnChartColumnSeriesBoxItemRenderer
BarChartBarSeriesBoxItemRenderer
StackedColumnChartColumnSeriesBoxItemRenderer
StackedBarChartColumnSeriesBoxItemRenderer
PieChartPieSeries note 1WedgeItemRenderer
LineChartLineSeriesBoxItemRenderer 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.