Page History

...

As with most things in FlexJS, you describe your chart using MXML and provide it data through a model. You can also modify the chart at runtime using ActionScript (you can also create charts with ActionScript if you prefer). All of the chart types are based on List, but use a different set of itemRenderers as well as a different component container to hold them; layout the itemRenderers. Chart layouts provide the actual "chart" feature of moving and sizing the itemRenderers to make the chart.

Charts display their data in the form of series. For example, you can have a column chart that compares revenue from years 2013 and 2014; that would be a chart with two series. Each series has its own itemRenderers that displays the a data point for that series. For instance, one itemRenderer might display the revenue from April 2013. 

...

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

...

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

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

...

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

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

...

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

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

...