Create a DataSource

Like the DataTable Control, Charts use the DataSource Utility for accessing the information it displays. A DataSource instance will accept many forms of data including simple JavaScript Arrays and external data loaded through XHR in formats including XML, JSON, and delimited text.

In this example, data comes from a JavaScript Array. It is passed to the DataSource constructor. All of the fields ("month", "rent", and "utilities") are included in the DataSource responseSchema.

Define Multiple Series

An Array of definitions allows you to specify more than one series to display in the Chart control. Each definition generally includes the field used to access data.

A displayName is recommended to providing more information about a series to the viewer.

Customize the Axis

The LineChart in this example uses a custom NumericAxis. This axis has a minimum bound set to the value 800. A labelFunction is used to format each label on the axis. Due to the nature of ActionScript-JavaScript communication, this function must be globally accessible, and one must pass a string representation of the function name rather than a reference to the function itself.

The function currencyToAxis() uses the YAHOO.util.Number class included with DataSource to format the text as currency.

Customize the Data Tip

The chart uses a dataTipFunction to format the text appearing on its mouse-over data tip.

Notice that getDataTipText() extracts the y-axis value and formats it using formatCurrencyAxisLabel() to match the formatting on the axis labels.

Creating the Chart

All of the customizations made above are passed to the Chart control as initialization attributes. The xField attribute is used globally by all series, and each series defines its own yField to display different data than the other series.

Once again, don't forget to pass the dataTipFunction as a string representation of the function name. The function must be globally accessible to allow Flash Player's ExternalInterface to call it.