Anda di halaman 1dari 1

YUI Library: Charts 2011-3-11 v2.

9
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)
<-- For progressive enhancement, its best to put reverse
the charts data here in tabular or textual form to itemMouseOverEvent, args.index (Number) labelFunction
support viewers with Flash disabled. --> itemMouseOutEvent args.seriesIndex (Number) hideOverlappingLabels
</div> args.x (Number)
args.y (Number) YAHOO.widget.NumericAxis
Script:
itemDragStartEvent, args.type (String) Properties
var mySeriesDef = [ itemDragEvent, args.item (Object)
{yField: "field1", displayName: "Series 1"}, minimum
{yField: "field2", displayName: "Series 2"}, itemDragUpdateEvent args.index (Number) maximum
...]; args.seriesIndex (Number) majorUnit
var myDataSource = args.x (Number) minorUnit
new YAHOO.util.DataSource([...]); args.y (Number) snapToUnits
var myChart = new YAHOO.widget.LineChart( alwaysShowZero
"myContainer", myDataSource, {} ); All Charts events are Custom Events (see Event Utility docs); subscribe to these events scale
using subscribe: (e.g. myChart.subscribe("itemClickEvent", handler); ).
Creates a Chart instance from scratch. Note: Refer to online documentation for a
full list of Axis properties.
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
Constructor: YAHOO.util.DataSource dataTipFunction see docs Object literal of pagination values. Properties
(s)
YAHOO.util.DataSource(str|array|obj|HTMLFunction xAxis (o) null Custom axis objects. xField
|HTMLTable live data[, obj config]); yAxis (o) yField
polling (n) null The number of milliseconds between
Arguments: YAHOO.widget.PieSeries
requests to the DataSource object for new
(1) live data: Pointer to a set of data.
data. Properties
(2) configuration object: An optional object literal defines property
categoryNames (a) null If the DataSource does not contain a field
values of a DataSource instance. dataField
that may be used with a category axis, an
Array of Strings may be substituted. categoryField
Constructor: YAHOO.widget.ColumnChart 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
YAHOO.widget.ColumnChart(str element, obj DataSource[,
obj config]); window, opaque or transparent.
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");).
Arguments:
(1) element: HTML ID for a Chart container. May be empty or contain Charts require the YAHOO
alternative content. Solutions Global Object, Event Utility,
(2) DataSource: DataSource instance. Dom Collection, Element
Specify a custom axis dimension if you dont want the chart to size the axis by Utility, JSON Utility,
(3) configuration object: An optional object literal defines property
default: DataSource Utility and SWF
values of a Chart instance.
Utility. Note: On the client,
var axisWithMinimum = new YAHOO.widget.NumericAxis(); Charts requires Flash
axisWithMinimum.minimum = 800;
myChart.set( "yAxis", axisWithMinimum ); Player 9.0.45 or later.

Anda mungkin juga menyukai