Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Charts Control (experimental): Chart and DataTable Example

# Charts Control (experimental): Chart and DataTable Example

A YUI Charts Control and a DataTable Control may share a DataSource to display the same data.

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.

View example in new window.

Widgets, Inc. Financial Summary 2003-2006
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the Adobe Flash Player Download Center.

## Create a DataSource

The provider of data for the BarChart and the DataTable in this example is a standard JavaScript Array. Each Object in the Array contains multiple values that can be used for series in the BarChart or headers in the DataTable.

var annualIncome = [ { year: 2003, revenue: 1246852, expense: 1123359, income: 123493 }, { year: 2004, revenue: 2451876, expense: 2084952, income: 366920 }, { year: 2005, revenue: 2917246, expense: 2587151, income: 330095 }, { year: 2006, revenue: 3318185, expense: 3087456, income: 230729 } ]; var incomeData = new YAHOO.util.DataSource( annualIncome ); incomeData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; incomeData.responseSchema = { fields: [ "year", "revenue", "expense", "income" ] };

The Array is passed to a new DataSource instance, and fields are defined to specify which items will be used from the original source.

## Define a Series Definition

A series definition allows the chart to display more than one series, and one can use it customize the appearance and behavior of each series individually.

var seriesDef = [ { xField: "revenue", displayName: "Revenue" }, { xField: "expense", displayName: "Expense" }, { type: "line", xField: "income", displayName: "Income" } ];

In the series definition above, each series uses the `xField` property to select a different key from the DataSource. The `displayName` property will provide a visual reference to the name of each series in the mouse-over data tip.

Notice that the third series defines a `type` property. By customizing this value, we're able to build a combination chart that combines bars and lines to display data.

## Create the Chart

The DataSource instance is passed as a required argument of the BarChart's constructor. The series definition is pass in an optional initialization attribute named `series`.

var mychart = new YAHOO.widget.BarChart( "chart", incomeData, { series: seriesDef, yField: "year", xAxis: currencyAxis });

## Define Column Headers and Create DataTable

Similar to the Chart control's series definition, the DataTable control defines column headers. A `formatter` is set for each column that will display currency.

var columns = [ {key: "year", sortable: true, resizeable: true }, {key: "revenue", formatter: "currency", sortable: true, resizeable: true }, {key: "expense", formatter: "currency", sortable: true, resizeable: true }, {key: "income", formatter: "currency", sortable: true, resizeable: true } ]; var table = new YAHOO.widget.DataTable( "datatable", columns, incomeData);

Both the column headers and the DataSource instance are passed to the DataTable's constructor.

-

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Charts Control (experimental) Examples:

- Charts Quickstart Example
- Chart with Legend Example
- Skinning a Chart Example
- Chart and DataTable Example
- Chart with DataSource Polling

### More Charts Control (experimental) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings