Bhavya IT | stock ticker | live stock ticker | free yahoo stock ticker

Creating Yahoo dashboard using AJAX - Free yahoo stock ticker

We all have seen stock tickers. Some of us even wanted to create one for our personal use or may be use on web sites.

But sometimes it gets irritating to wait for your favourite stock to come up and keep glued to the ticker just to wait for the stock.

We also were so we decided to have a complete dashboard showing all details and refreshed without refreshing the page.

So we have implemented this solution.

So we come up with an idea.

To use knowledge

To use technolgoy

To have data dashboard with all the details automatically refreshed

Without a need to have heavy applets, requiring too many parameters passing.

We arrived at a solution and we are sharing it as out technology and knowledge sharing initiative.

You can see it live here Bhavya IT Yahoo dahsboard

Once implemented this is how it will look

var watchList = "3IINFOTECH.NS+ABB.NS+BAJAJAUTO.NS+BHEL.NS+CUMMINSIND.NS";. This is what you need to modify for your custom watch list. This list can be allowed to be modified on the screen, can be read from some text file. This all depends on your requirement and imagination.

Yahoo dashboard

Join the group and download the files (yahoostockdashboard.html, prototype.js, yahoodashboard.js), keep them in same folder and click yahoostockdashboard.html, it will work independently even on your local machnine.

It only works in IE due to cross domain access issue.

If it does not appear you need to do following to allow data sources access across domains

Open your IE

Go to Tools -> Internet Options

Select Security tab

Select Custom Level at the bottom

Go to Miscellaneous section and check Enable under Access data sources across domains

When running on IE you may get active content security alert something like

Allow blocked content

When you click allow blocked content you will see an alert

Security warning

Click yes and you are ready to run your Yahoo stock dashboard

Email:

Join this group

Join the group and download complete working sample. Just open the html and your Yahoo dashboard will start working right away. For your reference we have also kept NSE stocks list detail for your watchlist creation. This file has information for companies in "SYMBOL,NAME OF COMPANY, SERIES, DATE OF LISTING, PAID UP VALUE, MARKET LOT, ISIN NUMBER, FACE VALUE" format which yo can use for other purposes also.

If you use it in any form we have no issue but will appreciate comments, links on your web site, active participation in discussion to make it better and more user friendly.

Complete code listing for your quick reference *

<html> <head> <title>Yahoo stock dashboard by http://www.bhavyait.co.in</title> <script type="text/javascript"> onload = function() { init(); } </script> <script type="text/javascript"> onunload = function() { } </script> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> /* @description Yahoo dashborad javascript @createdBy http://www.bhavyait.co.in @createdOn 17-10-2007 @notes This JS is for displaying Yahoo stock quotes data using ajax */ var watchList = "3IINFOTECH.NS+ABB.NS+BAJAJAUTO.NS+BHEL.NS+CUMMINSIND.NS"; String.prototype.replaceAll=function(s1, s2) {return this.split(s1).join(s2)}; var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } if (!xmlhttp && window.createRequest) { try { xmlhttp = window.createRequest(); } catch (e) { xmlhttp=false; } } function init(){ fetchChartData(); } function fetchChartData(){ setTimeout('sendAjaxRequest()', 30*1000); } function sendAjaxRequest(){ try { xmlhttp.open("GET", "http://download.finance.yahoo.com/d/quotes.csv?s="+ watchList +"&f=sl1d1t1c1ohgv&e=.csv",true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { fetchChartDataCallback(xmlhttp); } } xmlhttp.send(null) } catch (e){ document.getElementById("yahoodashboard").innerHTML = e.message; } } function fetchChartDataCallback(request){ var response = request.responseText; var response1 = response.replaceAll("\"",""); var response2 = response1.replaceAll("\n","</tr><tr><td>"); var response3 = response2.replaceAll(",","</td><td><font size='1'>"); var tableData = "" ; tableData = "<table border='1' cellspacing='0' cellpadding='0'>"; tableData = tableData + "<tr>"; tableData = tableData + "<td><font size='3'><b>Symbol</b></font></td><td><font size='3'><b>Last</b></font></td><td><font size='3'><b>Date</b></font></td> <td><font size='3'><b>Time</b></font></td><td><font size='3'><b>Change</b></font></td><td><font size='3'><b>Open</b></font></td><td><font size='3'><b>High</b></font></td><td><font size='3'><b>Low</b></font></td><td><font size='3'><b>Volume</b></font></td><td>"; tableData = tableData + "</tr>"; tableData = tableData + "<tr><td>" +response3 +"</td></tr>"; tableData = tableData + "</table>"; document.getElementById("instruction").innerHTML = ""; document.getElementById("yahoodashboard").innerHTML = tableData; fetchChartData(); } </script> </head> <body> <div id="provider" align="center"> <b>Yahoo dashboard using AJAX code provided by <a href="http://www.bhavyait.co.in">http://www.bhavyait.co.in</a><b> <br> <b>For tutorial visit <a href="http://www.bhavyait.co.in/resources/tutorials.html">Bhavya IT technology and knowledge sharing initiative.</a></b> <br> <b>See it in action here <a href="http://www.bhavyait.co.in/resources/yahoodashboard.html">Bhavya IT Yahoo stock dashboard.</a></b> </div> <br> <div id="instruction" align="center"> <table> <tr> <td> <b>The Yahoo dashboard will appear soon</b> <br><br> <b><font color="red">This only works in IE</font></b> <br><br> <i>If it does not appear you need to do following to allow data sources access across domains</i> <br> <li>Open your <b>IE</b></li> <li>Go to <b>Tools -> Internet Options</b></li> <li>Select <b>Security</b> tab</li> <li>Select <b>Custom Level</b> at the bottom</li> <li>Go to <b>Miscellaneous</b> section and check <b>Enable</b> under <b>Access data sources across domains</b></li> <li>Latest Yahoo data will start updating after every 30 seconds</li> </td> </tr> </table> </div> <br> <div align="center"> <table> <tr> <td> <b><u>Yahoo stock dashboard</u></b> </td> </tr> </table> </div> <br> <div id="yahoodashboard" align="center"></div> </body> </html>