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.
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 | ? |
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 | ? |
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 | ? |
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 | ? |
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.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings