Bhavya IT | stock ticker | live stock ticker | free nse stock ticker

Creating NSE dashboard using AJAX - Free NSE 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 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 NSE dahsboard

Once implemented this is how it will look

NSE dashboard

Join the group and download the files (nsedashboard.html, date.js, prototype.js, up.gif, down.gif), keep them in same folder and click nsedashboard.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 NSE dashboard

Email:

Join this group

Join the group and download complete working sample. Just open the html and your NSE dashboard will start working right away.

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>NSE 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" src="date.js"></script> <script type="text/javascript"> /* @description NSE dashborad javascript @createdBy http://www.bhavyait.co.in @createdOn 09-10-2007 @notes This JS is for displaying NSE data using ajax */ function init(){ fetchChartData(); fetchIndexData(); } function fetchChartData(){ setTimeout('sendAjaxRequest()', 30*1000); } function fetchIndexData(){ setTimeout('sendAjaxRequest1()', 30*1000); } function sendAjaxRequest(){ try { getAjaxRequest("http://www.nseindia.com/TickerFeed","userid=&tickerid=&type=CM",fetchChartDataCallback); } catch (e){ document.getElementById("nseequityticker").innerHTML = e.message; } } function sendAjaxRequest1(){ try { getAjaxRequest1("http://www.nseindia.com/TickerFeed","userid=&tickerid=&type=FUTIDX",fetchIndexDataCallback); } catch (e){ document.getElementById("nseindexticker").innerHTML = e.message; } } function getAjaxRequest(url, data, callback) { var aj = new Ajax.Request( url, { method: 'post', parameters: data, onComplete: callback }); aj = null; } function getAjaxRequest1(url, data, callback) { var aj1 = new Ajax.Request( url, { method: 'post', parameters: data, onComplete: callback }); aj = null; } function fetchChartDataCallback(request){ var response = request.responseText; var currentTagTokens = response.split( "|" ); var tableData = "" ; tableData = "<table border='1'>"; tableData = tableData + "<tr>"; for ( var i = 0; i < 5; i++ ){ tableData = tableData + "<td><font size='1'><b>EQUITY</b></font></td><td><font size='1'><b>CURRENT</b></font></td><td><font size='1'><b>% CHANGE</b></font></td>"; } tableData = tableData + "</tr>"; var tds = 0; var dataTimeStamp; for ( var i = 0; i < currentTagTokens.length; i++ ) { if(tds == 0) tableData = tableData + "<tr>"; if(currentTagTokens[i].indexOf(",") > 0){ tds++; var vals = currentTagTokens[i].split(","); if(vals[2].indexOf("-") == 0) tableData = tableData + "<td><font size='1'>"+vals[0]+"</font></td><td><font size='1'>"+vals[1]+"</font></td><td><font size='1' color='red'>"+vals[2]+" <img src='down.gif' border='0' valign='middle'>"+"</font></td>"; else tableData = tableData + "<td><font size='1'>"+vals[0]+"</font></td><td><font size='1'>"+vals[1]+"</font></td><td><font size='1' color='green'>"+vals[2]+" <img src='up.gif' border='0' valign='middle'>"+"</font></td>"; } if(tds == 5) { tds = 0; tableData = tableData + "</tr>"; } if(i == 1) dataTimeStamp = currentTagTokens[1]; } tableData = tableData + "<tr><td colspan='15' align='right'><font size='1'>"+dataTimeStamp+"</font></td></tr>"; tableData = tableData + "</table>"; document.getElementById("instruction").innerHTML = ""; document.getElementById("nseequityticker").innerHTML = tableData; fetchChartData(); } function fetchIndexDataCallback(request){ var response = request.responseText; var currentTagTokens = response.split( "|" ); var tableData = "" ; tableData = "<table border='1'>"; tableData = tableData + "<tr>"; for ( var i = 0; i < 2; i++ ){ tableData = tableData + "<td><font size='1'><b>INDEX</b></font></td><td><font size='1'><b>DATE</b></font></td><td><font size='1'><b>CURRENT</b></font></td><td><font size='1'><b>% CHANGE</b></font></td>"; } tableData = tableData + "</tr>"; var tds = 0; var dataTimeStamp; for ( var i = 0; i < currentTagTokens.length; i++ ) { if(tds == 0) tableData = tableData + "<tr>"; if(currentTagTokens[i].indexOf(",") > 0){ tds++; var vals = currentTagTokens[i].split(","); var formattedDate = formatDate(new Date(getDateFromFormat(vals[1],'ddMMyy')),'dd-MMM-yyyy'); if(vals[3].indexOf("-") == 0) tableData = tableData + "<td><font size='1'>"+vals[0]+"</font></td><td><font size='1'>"+formattedDate+"</font></td><td><font size='1'>"+vals[2]+"</font></td><td><font size='1' color='red'>"+vals[3]+" <img src='down.gif' border='0' valign='middle'>"+"</font></td>"; else tableData = tableData + "<td><font size='1'>"+vals[0]+"</font></td><td><font size='1'>"+formattedDate+"</font></td><td><font size='1'>"+vals[2]+"</font></td><td><font size='1' color='green'>"+vals[3]+" <img src='up.gif' border='0' valign='middle'>"+"</font></td>"; } if(tds == 2) { tds = 0; tableData = tableData + "</tr>"; } if(i == 1) dataTimeStamp = currentTagTokens[1]; } tableData = tableData + "<tr><td colspan='15' align='right'><font size='1'>"+dataTimeStamp+"</font></td></tr>"; tableData = tableData + "</table>"; document.getElementById("instruction").innerHTML = ""; document.getElementById("nseindexticker").innerHTML = tableData; fetchIndexData(); } </script> </head> <body> <div id="provider" align="center"> <b>NSE 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/nsedashboard.html">Bhavya IT NSE dahsboard</a></b> </div> <br> <div id="instruction" align="center"> <table> <tr> <td> <b>The NSE 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 NSE data will start updating after every 30 seconds</li> </td> </tr> </table> </div> <br> <div align="center"> <table> <tr> <td> <b><u>NIFTY 50</u></b> </td> </tr> </table> </div> <div id="nseequityticker" align="center"></div> <br> <div align="center"> <table> <tr> <td> <b><u>INDEX FUTURES</u></b> </td> </tr> </table> </div> <div id="nseindexticker" align="center"></div> </body> </html>