YUI Library Examples: Charts Control: Chart with DataSource Polling

CSS and Markup for the Polling Chart

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


1	<style type="text/css">
2	#chart
3	{
4	width: 500px;
5	height: 350px;
6	}
7
8	#buttons
9	{
10	margin-top: 12px;
11	}
12	</style>
13
14	<div id="chart">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 <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p></div>
15	<div id="buttons">
16	<button id="startpolling">Start Polling</button>
17	<button id="stoppolling">Stop Polling</button>
18	</div>
	view plain \| print \| ?

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.


1	var jsonData = new YAHOO.util.DataSource( "assets/generatedata.php?" );
2	jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
3	jsonData.responseSchema =
4	{
5	resultsList: "Results",
6	fields: ["Name","Value"]
7	};
	view plain \| print \| ?

Add Chart

Create a column chart that uses our DataSource.


1	var mychart = new YAHOO.widget.ColumnChart( "chart", jsonData,
2	{
3	xField: "Name",
4	yField: "Value",
5	yAxis: yAxis
6	});
	view plain \| print \| ?

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.


1	var clearPollingId;
2
3	function startPolling(e)
4	{
5	clearTimeout(clearPollingId);
6	clearPollingId = setTimeout("stopPolling()", 60000);
7	mychart.set("polling", 2000);
8	}
9
10	function stopPolling(e)
11	{
12	mychart.set("polling", null);
13	}
	view plain \| print \| ?

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


1	YAHOO.util.Event.addListener("startpolling", "click", startPolling);
2	YAHOO.util.Event.addListener("stoppolling", "click", stopPolling);
	view plain \| print \| ?

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:

Logger Console

INFO 125ms (+94) 7:39:10 PM:
LogReader  instance0
LogReader initialized

INFO 31ms (+1) 7:39:10 PM:

Get

Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 30ms (+0) 7:39:10 PM:

Get

attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 30ms (+30) 7:39:10 PM:
Get
_next: q0, loaded: undefined

INFO 0ms (+0) 7:39:10 PM:
global
Logger initialized

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

Reload with logging
and debugging disabled.