Inorp

Implementing updating stock chart

October 28th, 2006 by ltz

Trying to update a html-page without having a) annoying refreshes of the entire page, b) a third party framework implementation (ie: Java/Flash/etc..). My experience is that a “third party” implementation more or less makes the best solution however there are alternatives. For instance a simple AJAX-based implementation of such a function would be possible. This also does have its drawbacks, but for now we could look at the possibilities.

Attached is one solution involving PHP and a standard OSI-certified AJAX-framework called Agent AJAX. Please note the drawbacks of this solution. If the client/server connection is poor, the transfers in AJAX might create problems for the Client. You can of course overcome this problem by simply thinking your solution through and for instance creating feedback to the user at any transaction that might fail.

<? /* * Ajax based live updating stock chart example. Based upon the Ajax Agent framework. * Author Pierre Norraeus * 2006-02-21 */ // Generate the html-table. you can, ofcourse, do this any way you want. function printPrices() { $text = “</p> <table> <tr> <td><b>Stock</td> <td><b>Market</b></td> <td><b>Open</b></td> <td><b>Close</b></td> <td><b>Updated</b></td> <td><b>Trade</b></td> </tr> <tr> <td>AAA</td> <td>A</td> <td>10</td> <td>13</td> <td>“.date(”Y-m-d H:i:s”).”</td> <td><a xhref=http://www.inorp.com/# onclick=\”call_trade(’1′)\” >Trade</a></td> </tr> <tr> <td>BBB</td> <td>B</td> <td>20</td> <td>23</td> <td>“.date(”Y-m-d H:i:s”).”</td> <td><a xhref=http://www.inorp.com/# onclick=\”call_trade(’2′)\” >Trade</a></td> </tr> <tr> <td>CCC</td> <td>C</td> <td>30</td> <td>33</td> <td>“.date(”Y-m-d H:i:s”).”</td> <td><a xhref=http://www.inorp.com/# onclick=\”call_trade(’3′)\” >Trade</a></td> </tr> </table> <p>\n”; return $text; } function trade($pid) { $text = “trade,”.$pid; return $text; } // include the framework base.. include_once(”agent.php”); // init the framework.. $agent->init(); ?> <html> <head> <meta name=”generator” content=”pico”> <meta name=”author” content=”Norraeus”> <meta name=”keywords” content=”Ajax testsetup.”> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> </head><br /> <script> function call_trade(str) { agent.call(\’’,\’trade’,\’callback_trade’,str); } function callback_trade(str) { document.getElementById(’divTrade’).innerHTML = str; } function call_printPrices() { call_setLoading(); agent.call(\’’,\’printPrices’,\’callback_printPrices’); //Update the table every.. 2 seconds? setTimeout(’call_printPrices()’,2000); } function callback_printPrices(str) { call_unsetLoading(); document.getElementById(’tablePrices’).innerHTML = str; } function call_setLoading() { callback_printLoading(’Loading…’); } function call_unsetLoading() { callback_printLoading(’ ‘); } function callback_printLoading(str) { document.getElementById(’showLoading’).innerHTML = str; } function init() { call_printPrices(); } </script> <p> <body onload=”init()”> <center> <b>Simple stock chart example..</b></p> <h4>Current Stock Prices</h4> <p><!– you can also have a button for updates.. –> <!– <a xhref=http://www.inorp.com/# onclick=”call_printPrices()”><b>here</b></a> to test.–></p> <div id=’tablePrices’></div> <div id=’divTrade’></div> <div id=’showLoading’></div> <p><a xhref=”http://www.ajaxtechforums.com” >Ajax Tech Forums</a> </center> </body> </html>

Posted in Programming |

Pierre Norraeus

Anything the techworld can offer

Categories

Archives

Meta:

Implementing updating stock chart

October 28th, 2006 by ltz

Leave a Comment