This example is a demonstration of the YUI Chart Control's basic features.
Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.
"utilities") are included in the DataSource
An Array of definitions allows you to specify more than one series to display in the Chart control. Each definition generally includes an
yField value that specifies which key in the DataSource is used to access the data for a particular axis.
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.
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.
YAHOO.example.formatCurrencyAxisLabel() uses the
YAHOO.util.Number class included with DataSource to format the text as currency.
YAHOO.example.formatCurrencyAxisLabel, but we can also use the string value
The chart uses a
dataTipFunction to format the text appearing on its mouse-over data tip.
getDataTipText() extracts the y-axis value and formats it using
formatCurrencyAxisLabel() to match the formatting on the axis labels.
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.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.