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>

...

The charts below (created with FlexJS Chart package) show the difference between the optimized (orange and sky) and  and regular (red and blue) chart  chart components; shorter bars are faster. The performance data were gather from two FlexJS LineCharts of a sine wave: one with optimized components and one without. The charts used BoxItemRenderers for each point plotted along with a LineSegmentItemRenderer to display the line connecting the points. The vertical axis is the average of ten runs in milliseconds.

Image RemovedImage Added

source: flex-asjs/examples/ChartExample using TestModel and SpeedResultsView.

...

It is yet to be seen if the non-optimized chart components actually offer any advantage over the non-optimized versions; if that turns out to be true, it may not be worth while to keep the non-optimized versions.

...

.