You are on page 1of 1

YUI Library: Charts 2008-2-19 v2.

5
Simple Use Case: YAHOO.widget.LineChart Key Interesting Moments in Charts YAHOO.widget.Axis
See online docs for a complete list of Charts Events. Properties
Markup: Event: Arguments: type
itemClickEvent, args.type (String) orientation
<div id="myContainer"> itemDoubleClickEvent, args.item (Object) reverse
<-- For progressive enhancement, it’s best to put itemMouseOverEvent, args.index (Number) labelFunction
the chart’s data here in tabular or textual form to itemMouseOutEvent args.seriesIndex (Number) hideOverlappingLabels
support viewers with Flash disabled. --> args.x (Number)
</div> args.y (Number) YAHOO.widget.NumericAxis
Script: itemDragStartEvent, args.type (String) Properties
itemDragEvent, args.item (Object) minimum
var mySeriesDef = [
itemDragUpdateEvent args.index (Number) maximum
{yField: "field1", displayName: "Series 1"},
{yField: "field2", displayName: "Series 2"}, args.seriesIndex (Number) majorUnit
...]; args.x (Number) minorUnit
var myDataSource = args.y (Number) snapToUnits
new YAHOO.util.DataSource([...]); alwaysShowZero
var myChart = new YAHOO.widget.LineChart( All Charts events are Custom Events (see Event Utility docs); subscribe to these events scale
"myContainer", myDataSource, {} ); using “subscribe”: (e.g. myChart.subscribe("itemClickEvent", handler); ).
Note: Refer to online documentation for
a full list of Axis properties.
Creates a Chart instance from scratch. Key Charts Configuration Options
See online docs for complete list of Charts configuration options. YAHOO.widget.Series
Option (type) Default Description Properties
xField (s) null The field used to access data to position
yField (s) items along the x or y axis. type
request (s) "" Request value to send to DataSource at displayName
instantiation for data to populate the chart.
series (a) null A series definition object. YAHOO.widget.CartesianSeries
dataTipFunction see docs Object literal of pagination values. Properties
(s)
Constructor: YAHOO.util.DataSource xAxis (o) null Custom axis objects. xField
yAxis (o) yField
YAHOO.util.DataSource(str|array|obj|HTMLFunction
|HTMLTable live data[, obj config]); polling (n) null The number of milliseconds between
requests to the DataSource object for new YAHOO.widget.PieSeries
Arguments: data. Properties
(1) live data: Pointer to a set of data. categoryNames (a) null If the DataSource does not contain a field
that may be used with a category axis, an dataField
(2) configuration object: An optional object literal defines property categoryField
values of a DataSource instance. Array of Strings may be substituted.
dataSource null Replace the current DataSource Note: Refer to online documentation for
a full list of Series properties.
wmode “window” The window mode of Flash Player. May be
Constructor: YAHOO.widget.ColumnChart “window”, “opaque” or “transparent”.
YAHOO.widget.ColumnChart(str element, obj DataSource[,
Charts options can be set in the constructor's third argument (e.g., {xField: "month"}) or at Dependencies
runtime via set (e.g., myChart.set("xField", "month");).
obj config]);
Charts require the YAHOO
Arguments: Solutions Global Object, Event Utility,
Dom Collection, Element
(1) element: HTML ID for a Chart container. May be empty or contain Specify a custom axis dimension if you don’t want the chart to size the axis by Utility, JSON Utility and
alternative content. default: DataSource Utility. Note:
(2) DataSource: DataSource instance.
On the client, Charts
(3) configuration object: An optional object literal defines property var axisWithMinimum = new YAHOO.widget.NumericAxis(); requires Flash Player 9.0.45
values of a Chart instance. axisWithMinimum.minimum = 800; or later.
myChart.set( "yAxis", axisWithMinimum );

You might also like