YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Chart with DataSource Polling

# Charts Control: Chart with DataSource Polling

The YUI Charts Control provides built-in support for iterative polling for data over XHR using an XHR DataSource instance. In the example below, iterative polling causes the chart to refresh every several seconds and animate its display to represent the new 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.

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 that uses XHR

If a DataSource loads its data from an external source through XHR, a Chart may continually poll the DataSource to determine if new data is available. Nothing special needs to be done to the DataSource. The Chart handles all the details.

var jsonData = new YAHOO.util.DataSource( "assets/generatedata.php?" ); jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON; jsonData.responseSchema = { resultsList: "Results", fields: ["Name","Value"] };

## Turning on Chart Polling

The `polling` attribute of the Chart control accepts a numeric value representing the number of milliseconds between requests for new data.

var mychart = new YAHOO.widget.ColumnChart( "chart", jsonData, { xField: "Name", yField: "Value", yAxis: yAxis, polling: 2000 });

In this case, the Chart control will ask the DataSource to reload its data every two seconds. When new data is available, the chart will redraw or animate to display the new information.

## 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.

### 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 Examples:

- Charts Quickstart Example
- Chart with Legend Example
- Skinning a Chart Example
- Chart and DataTable Example
- Chart with DataSource Polling
- Stacked Bar Chart
- Charts in a TabView
- Column Chart with Rotated Title and Labels
- Styling Lines, Borders and Fills
- Chart with 2 Numeric Axes
- Hide series in a chart.
- Customize series items
- Apply scope to label functions

### More Charts Control Resources:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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