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 an xField or yField value that specifies which key in the DataSource is used to access the data for a particular axis.

A displayName is recommended to provide more information about a series to the viewer. This value is used in the mouse-over data tip and the legend, if displayed.

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.

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

Due to the nature of ActionScript-JavaScript communication, this function must be globally accessible. It may not be a method of an object instance. Pass the function reference directly or a string representation of the function name. In this case, we pass a reference to YAHOO.example.formatCurrencyAxisLabel, but we can also use the string value "YAHOO.example.formatCurrencyAxisLabel".

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 the function reference we pass to dataTipFunction must be globally-accessible to allow Flash Player's ExternalInterface to call it.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.