Page History

...

To display a column chart (which has vertical bars, BarChart has horizontal bars), you begin with the <basic<js:ColumnChart> MXML tag, such as:

<basic<js:ColumnChart x="20" y="20" width="400" height="200">
</basicjs:ColumnChart>

Data

Next you connect the chart to some data using a FlexJS ConstantBinding bead:

<basic<js:ColumnChart x="20" y="20" width="400" height="200">
    <basic<js:beads>
        <basic<js:ConstantBinding sourceID="applicationModel" sourcePropertyName="productList" destinationPropertyName="dataProvider" />
    </basicjs:beads>
</basicjs:ColumnChart>

The ConstantBinding bead connects the application model's productList property to the ColumnChart's dataProvider property. The dataProvider might be an ArrayCollection object items where each item has a revenue property for each year.

...

To actually display the values, a set of ColumnSeries are added to the chart using the ColumnChart's series property:

<basic<js:ColumnChart x="20" y="20" width="400" height="200">
    <basicjs:beads>
        <basic:ConstantBinding sourceID="applicationModel" sourcePropertyName="productList" destinationPropertyName="dataProvider" />
    </basicjs:beads>
    <basic<js:series>
        <basic<js:ColumnSeries yField="sales2013">
                <basic<js:itemRenderer> ...  </basicjs:itemRenderer>
        </basicjs:ColumnSeries>
        <basic<js:ColumnSeries yField="sales2014">
                <basicjs:itemRenderer> ...  </basicjs:itemRenderer>
        </basicjs:ColumnSeries>
    </basicjs:series>
</basicjs:ColumnChart> 

itemRenderers

 The ColumnSeries element defines which field in the data it is using for its display. An itemRenderer is also provided to the series. FlexJS has (at the moment) a handful of itemRenderers and the one most appropriate for a ColumnSeries is the BoxItemRenderer which simply draws a filled rectangle. Here is how to specify the itemRenderer for each ColumnSeries:

<fx:Component>
    <basic<js:BoxItemRenderer>
        <basic<js:fill>
            <basic<js:SolidColor color="#FF964D" />
        </basicjs:fill>
    </basicjs:BoxItemRenderer>
</fx:Component>

...

Put together, the final ColumnSeries MXML specification looks like this:

<basic<js:ColumnChart x="20" y="20" width="400" height="200">
    <basicjs:beads>
        <basic<js:ConstantBinding sourceID="applicationModel" sourcePropertyName="productList" destinationPropertyName="dataProvider" />
    </basicjs:beads>
    <basicjs:series>
        <basic<js:ColumnSeries yField="sales2013">
                <basicjs:itemRenderer>
                    <fx:Component>
                       <basic<js:BoxItemRenderer>
                           <basicjs:fill>
                               <basic<js:SolidColor color="#FF964D" />
                           </basicjs:fill>
                       </basicjs:BoxItemRenderer>
                   </fx:Component>
               </basicjs:itemRenderer>
        </basicjs:ColumnSeries>
        <basic<js:ColumnSeries yField="sales2014">
               <basicjs:itemRenderer>
                    <fx:Component>
                       <basic<js:BoxItemRenderer>
                           <basicjs:fill>
                               <basic<js:SolidColor color="#964DFF" />
                           </basicjs:fill>
                       </basicjs:BoxItemRenderer>
                   </fx:Component>
               </basicjs:itemRenderer>
        </basicjs:ColumnSeries>
    </basicjs:series>
</basicjs:ColumnChart>

When compiled and run, this MXML produces a column chart with two series, each one side-by-side per month.

...

Axes are added to a chart as FlexJS beads (just after the ConstantBinding bead in the <basic<js:beads> section).

<basic<js:HorizontalCategoryAxisBead categoryField="month" />
<basic<js:VerticalLinearAxisBead valueField="sales2013" />

...

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<js:HorizontalCategoryAxisBead categoryField="month">
    <basic<js:axisStroke>
        <basic<js:SolidColorStroke color="#FF0000" weight="2" />
    </basicjs:axisStroke>
    <basic<js:tickStroke>
        <basic<js:SolidColorStroke color="#00FF00" weight="2" />
    </basic>tickStroke>
</basicjs:HorizontalCategoryAxisBead>

...