Does anyone know a way to get live - or 20 minutes delayed - stock quotes using javascript? I looked at the google api at http://code.google.com/apis/finance/docs/finance-gadgets.html but it was very hard to get a working example.
has anyone got it to work to get quote for any stock, or found a better way ?
thank you.
On
to insert finance Javasript quotes into html, you can check into the webmaster section of Forexpros. You just have to copy/past the code, and their finance charts are of high quality. I used them for my website.
On
There is a new library I created called stocks.js, it provides an easy to use stock market API that can fetch live stock data (refreshed every minute). The source of the data is Alpha Vantage.
An example of usage would be:
// Let's get the stock data of Tesla Inc. for the last 10 minutes
var result = stocks.timeSeries({
symbol: 'TSLA',
interval: '1min',
amount: 10
});
This code pulls multiple stocks information from Yahoo Finance. No plugin needed, only using jQuery. I got the rest end point at https://developer.yahoo.com/yql/console/ , under the community table yahoo.finance.quote.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var symbols= ["goog", "aapl", "msft"];
var callback = function(data) {
var results = "";
$.each(data.query.results.quote, function(i, value){
results += value.Name + ":$" + value.LastTradePriceOnly + " ";
})
alert(results);
};
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20("
$.each(symbols, function(j, code){
url += "%22" + code + "%22";
if (j < (symbols.length-1)){
url += "%2C";
}
});
url += ")&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";
$.getJSON(url, callback);
});
</script>a bit late but i made a working code :))) happy code man: you can put index and after it show all picture and numbers of the index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IGotMessage - Finances</title>
<link href="stock_chart_yahoo_finance/styles.css" type="text/css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="Get stock quotes, research investments and read business news that help you manage your financial life." name="description">
<meta content="financial Information,investing,investor,market news,stock research,business news,economy,finance,personal finance,quote,loan,student loan,morgage loan,car loan" name="keywords">
<meta content="all" name="robots">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript">
function start(){
getData();
document.getElementById('link1').click();
}
function getData() {
var url = "http://query.yahooapis.com/v1/public/yql";
var symbol = $("#symbol").val();
var data = encodeURIComponent("select * from yahoo.finance.quotes where symbol in ('" + symbol + "')");
$.getJSON(url, 'q=' + data + "&format=json&diagnostics=true&env=http://datatables.org/alltables.env")
.done(function (data) {
$("#name").text("Bid Price: " + data.query.results.quote.Symbol);
$("#date").text("Bid Price: " + data.query.results.quote.Date);
$("#time").text("Bid Price: " + data.query.results.quote.LastTradeTime);
$("#result").text("Bid Price: " + data.query.results.quote.LastTradePriceOnly);
$("#chg").text("Bid Price: " + data.query.results.quote.PercentChange);
$("#bid").text("Bid Price: " + data.query.results.quote.LastTradePriceOnly);
$("#ask").text("Bid Price: " + data.query.results.quote.Ask);
$("#volume").text("Bid Price: " + data.query.results.quote.Volume);
$("#high").text("Bid Price: " + data.query.results.quote.HighLimit);
$("#low").text("Bid Price: " + data.query.results.quote.LowLimit);
if(data.query.results.quote.PercentChange.indexOf("+") != -1){
document.getElementById("chg").className = "greenText";
}
else{
//alert(data.query.results.quote.PercentChange);
document.getElementById("chg").className = "redText";
}
}).fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
$("#result").text('Request failed: ' + err);
});
}
function SendRequest()
{
getData();
document.getElementById('link1').click();
}
function CheckEnter(e)
{
if ((e.keyCode && e.keyCode==13) || (e.which && e.which==13)) {
return SendRequest();
}
return true;
}
function changeChart(select, item, url, symbol)
{
url = url.replace('yhoo',$("#symbol").val());
symbol = symbol.replace('YHOO',$("#symbol").val());
var div1d=document.getElementById("div1d_"+item);
var div5d=document.getElementById("div5d_"+item);
var div3m=document.getElementById("div3m_"+item);
var div6m=document.getElementById("div6m_"+item);
var div1y=document.getElementById("div1y_"+item);
var div2y=document.getElementById("div2y_"+item);
var div5y=document.getElementById("div5y_"+item);
var divMax=document.getElementById("divMax_"+item);
var divChart=document.getElementById("imgChart_"+item);
if(div1d==null || div5d==null || div3m==null || div6m==null || div1y==null || div2y==null || div5y==null || divMax==null || divChart==null)
return;
div1d.innerHTML="1d";
div5d.innerHTML="5d";
div3m.innerHTML="3m";
div6m.innerHTML="6m";
div1y.innerHTML="1y";
div2y.innerHTML="2y";
div5y.innerHTML="5y";
divMax.innerHTML="Max";
var rand_no = Math.random();
rand_no = rand_no * 100000000;
switch(select)
{
case 0:
div1d.innerHTML ="<b>1d</b>";
divChart.src = "http://ichart.finance.yahoo.com/b?s="+symbol+"&"+rand_no;
break;
case 1:
div5d.innerHTML="<b>5d</b>";
divChart.src = "http://ichart.finance.yahoo.com/w?s="+symbol+"&"+rand_no;
break;
case 2:
div3m.innerHTML="<b>3m</b>";
divChart.src = "http://chart.finance.yahoo.com/c/3m/"+url+"?"+rand_no;
break;
case 3:
div6m.innerHTML="<b>6m</b>";
divChart.src = "http://chart.finance.yahoo.com/c/6m/"+url+"?"+rand_no;
break;
case 5:
div2y.innerHTML="<b>2y</b>";
divChart.src = "http://chart.finance.yahoo.com/c/2y/"+url+"?"+rand_no;
break;
case 6:
div5y.innerHTML="<b>5y</b>";
divChart.src = "http://chart.finance.yahoo.com/c/5y/"+url+"?"+rand_no;
break;
case 7:
divMax.innerHTML="<b>msx</b>";
divChart.src = "http://chart.finance.yahoo.com/c/my/"+url+"?"+rand_no;
break;
case 4:
default:
div1y.innerHTML="<b>1y</b>";
divChart.src = "http://chart.finance.yahoo.com/c/1y/"+url+"?"+rand_no;
break;
}
}
</script>
</head>
<body style="margin: 0px;" bgcolor="#678fc2" onload="start();">
<div align="center" style="background:url(stock_chart_yahoo_finance/main_body.jpg); width:900px; margin:50px auto; padding:20px;">
<table width="90%" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr valign="top">
<td class="normalText" align="left">
<input name="txtQuote" id="symbol" onkeypress="return CheckEnter(event);" value="YHOO" type="text" />
<input name="button" type="button" id="btnQuote" onclick="return SendRequest();" value="Get Quotes" />
<br />
<span class="smallText">e.g. "YHOO or YHOO GOOG"</span>
<div id="service" style="padding:10px 0;">
<table style="border: 1px solid black;" width="770">
<tbody>
<tr style="font-size: 14px; font-family: Arial,Helvetica,sans-serif; font-weight: bold;">
<td>Symbol</td>
<td>Date</td>
<td>Time</td>
<td>Trade</td>
<td>% Chg</td>
<td>Bid</td>
<td>Ask</td>
<td>Volume</td>
<td>High</td>
<td>Low</td>
</tr>
<tr style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; padding: 0px 2px;">
<td id="name">YHOO</td>
<td id="date">3/11/2011</td>
<td id="time">5:00pm</td>
<td id="result">$17.42</td>
<td id="chg"><span id="colorText" class="greenText">+0.36(+2.11%)</span></td>
<td id="bid">17.30</td>
<td id="ask">17.77</td>
<td id="volume">19,455,986</td>
<td id="high">17.54</td>
<td id="low">17.00</td>
</tr>
</tbody>
</table>
<br />
<img id="imgChart_0" src="stock_chart_yahoo_finance/yhoo.png" border="0" /><br />
<a class="linkText" href='javascript:changeChart(0,0,%20"y/yhoo",%20"YHOO");'><span id="div1d_0">1d</span></a>
<a class="linkText" href='javascript:changeChart(1,0,%20"y/yhoo",%20"YHOO");'><span id="div5d_0">5d</span></a>
<a class="linkText" href='javascript:changeChart(2,0,%20"y/yhoo",%20"YHOO");'><span id="div3m_0">3m</span></a>
<a class="linkText" href='javascript:changeChart(3,0,%20"y/yhoo",%20"YHOO");'><span id="div6m_0">6m</span></a>
<a class="linkText" href='javascript:changeChart(4,0,%20"y/yhoo",%20"YHOO");'><span id="div1y_0">1y</span></a>
<a class="linkText" href='javascript:changeChart(5,0,%20"y/yhoo",%20"YHOO");'><span id="div2y_0">2y</span></a>
<a class="linkText" href='javascript:changeChart(6,0,%20"y/yhoo",%20"YHOO");'><span id="div5y_0">5y</span></a>
<a id="link1" class="linkText" href='javascript:changeChart(7,0,%20"y/yhoo",%20"YHOO");'><span id="divMax_0"><b>msx</b></span></a>
<br />
</div>
</td>
</tr>
</tbody>
CSS:
body
{
margin:0;
padding:0;
height:100%;
}
h1
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
text-decoration: none;
font-weight: normal;
margin:0 0 0 0;
}
.postTitle
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: Blue;
font-weight: bold;
text-decoration: underline;
}
.readon
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: Red;
font-weight: bold;
text-decoration: underline;
}
.titleText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
text-decoration: none;
font-weight: bold;
}
.subtitleText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: bold;
}
.normalText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
text-decoration: none;
}
.bigText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: black;
font-weight: bold;
}
.grayText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: Blue;
text-decoration: underline;
font-weight: bold;
}
.barText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
padding-top: 10px;
border-bottom: solid 1px #000;
text-decoration: none;
font-weight: bold;
}
.dateText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
text-decoration: none;
font-weight: bold;
}
.linkText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: Blue;
}
.normalLinkText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: Blue;
}
.linkGrayText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: Blue;
}
.errorText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ff0000;
text-decoration: none;
}
.greenText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: rgb(83, 241, 83);
text-decoration: none;
}
.redText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: Red;
text-decoration: none;
}
.programText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
.programGrayText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
text-decoration: none;
}
.programGreenText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: Green;
text-decoration: none;
}
.smallText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
text-decoration: none;
}
.smallLinkText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: Blue;
text-decoration: underline;
}
.greenButton
{
margin: 0;
border: 0;
background: URL(images/greenbuttonbg.gif) no-repeat;
height: 21px;
width: 120px;
color: #FFFFFF;
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
vertical-align:middle;
overflow: hidden;
cursor:pointer;
cursor:hand;
}
/*
Tabs
*/
:focus { -moz-outline-style: none; }
#header ul
{
list-style: none;
padding: 0;
margin: 0;
}
#header li
{
float: left;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #212121;
border-bottom-width: 0;
margin: 0 0em
}
#header a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
background: URL(images/tabbg.gif) repeat;
padding: 0.2em 1em 0.2em 1em;
color: white;
text-align: center;
font-weight: bold;
}
#header a:hover
{
background: URL(images/tabhoverbg.gif) repeat;
}
#header #selected
{
border-color: #E2C068;
background: #E2C068;
}
#header #selected a
{
position: relative;
top: 1px;
background: #E2C068;
color: #000;
font-weight: bold;
}
#content
{
background: #E2C068;
clear: both;
padding: 0.2em 1em 0.2em;
}
.bgWhite
{
background-color:White;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
text-decoration: none;
font-weight: normal;
}
.thNormalText
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
background-color:#E2C068;
}
A jQuery stock quotes plugin, jquery-stockquotes, could be of use here
Twitter: <span class="stock-quote" data-symbol="TWTR"></span>
Facebook: <span class="stock-quote" data-symbol="FB"></span>
Google: <span class="stock-quote" data-symbol="GOOGL"></span>
Netflix: <span class="stock-quote" data-symbol="NTFLX"></span>
Yahoo: <span class="stock-quote" data-symbol="YHOO"></span>
<script>
$('.stock-quote').stockQuotes();
</script>
Producing:
Github link: https://github.com/ajwhite/jquery-stockquotes
Blog example: https://atticuswhite.com/blog/jquery-stock-quotes/
It took awhile but here is working code that uses Yahoo!'s YQL and jQuery: