CSS and Markup for the Polling Chart

First, we will add our chart's container div and buttons for starting and stopping polling.

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.

Add Chart

Create a column chart that uses our DataSource.

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. We will add methods for starting and stopping polling. 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.

Finally, we'll set our polling methods as event handlers for their respective buttons.

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.