Display stock quotes from Yahoo!: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(24 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
The curve is updated only once a second, so initially it needs a little patience until the | The curve is updated only once a second, so initially it needs a little patience until the | ||
curve is visible. | curve is visible. | ||
Beware that in order to simplify the handling of AJAX we use the additional library [http://www.prototypejs.org/ prototype.js] in this example. | |||
<html> | <html> | ||
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | |||
<form> | <form> | ||
<input type="button" value="Start" onClick="Start()"> | <input type="button" value="Start" onClick="Start()"> | ||
Line 10: | Line 13: | ||
</html> | </html> | ||
<jsxgraph width="700" height="400"> | <jsxgraph width="700" height="400"> | ||
var hi, lo, brd, periodical, | var hi, lo, brd, periodical = null, | ||
brd, g, txt, val, | brd, g, txt, val, | ||
x = [], | x = [], | ||
Line 22: | Line 25: | ||
if (200 == transport.status) { | if (200 == transport.status) { | ||
t = transport.responseText; | t = transport.responseText; | ||
document.getElementById('debug').innerHTML = t; | |||
a = t.split(','); | a = t.split(','); | ||
x.push(x.length+1); | x.push(x.length+1); | ||
Line 27: | Line 31: | ||
val = a[1]; // set the text | val = a[1]; // set the text | ||
if (!g) { | if (!g) { | ||
g = brd. | x[0] += 1; // for shadows of horizontal lines. | ||
txt = brd. | g = brd.create('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true}); | ||
txt = brd.create('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:14}); | |||
brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,g.dataX,g.dataY)],{strokecolor:'red',dash:3}); | |||
} else { | } else { | ||
g.dataX = x; | g.dataX = x; | ||
Line 45: | Line 51: | ||
t = transport.responseText; | t = transport.responseText; | ||
a = t.split(','); | a = t.split(','); | ||
hi = a[6]*1. | hi = a[6]*1.00002; | ||
lo = a[7]*0. | lo = a[7]*0.99998; | ||
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,hi,200,lo]}); | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,hi,200,lo]}); | ||
brd. | brd.create('axis',[[0,lo],[1,lo]]); | ||
Start(); | Start(); | ||
}; | }; | ||
Line 68: | Line 74: | ||
</jsxgraph> | </jsxgraph> | ||
<html><div id="debug"></div></html> | |||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
<source lang=" | <source lang="javascript"> | ||
var hi, lo, brd, periodical, | var hi, lo, brd, periodical, | ||
brd, g, txt, val, | brd, g, txt, val, | ||
Line 89: | Line 94: | ||
val = a[1]; // set the text | val = a[1]; // set the text | ||
if (!g) { | if (!g) { | ||
g = brd. | g = brd.create('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true}); | ||
txt = brd. | txt = brd.create('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:14}); | ||
brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,g.dataX,g.dataY)],{strokecolor:'red',dash:3}); | |||
} else { | } else { | ||
g.dataX = x; | g.dataX = x; | ||
Line 107: | Line 113: | ||
t = transport.responseText; | t = transport.responseText; | ||
a = t.split(','); | a = t.split(','); | ||
hi = a[6]*1. | hi = a[6]*1.00002; | ||
lo = a[7]*0. | lo = a[7]*0.99998; | ||
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,hi,200,lo]}); | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,hi,200,lo]}); | ||
brd. | brd.create('axis',[[0,lo],[1,lo]]); | ||
Start(); | Start(); | ||
}; | }; | ||
Line 128: | Line 134: | ||
} | } | ||
}; | }; | ||
</source> | </source> | ||
Line 136: | Line 140: | ||
<source lang="php"> | <source lang="php"> | ||
<?php | <?php | ||
$fp = fopen (" | $fp = fopen ("https://finance.yahoo.com/d/quotes.csv?s=^gdaxi&f=sl1d1t1c1ohgv&e=.csv","r"); | ||
echo fgets ($fp, 1024); | echo fgets ($fp, 1024); | ||
fclose ($fp); | fclose ($fp); | ||
Line 143: | Line 147: | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Charts]] |
Latest revision as of 13:45, 10 March 2017
This JSXGraph application fetches the live stock quotes of the German DAX Index (gdaxi) from Yahoo!. The curve is updated only once a second, so initially it needs a little patience until the curve is visible.
Beware that in order to simplify the handling of AJAX we use the additional library prototype.js in this example.
The underlying JavaScript code
var hi, lo, brd, periodical,
brd, g, txt, val,
x = [],
y = [];
fetchData = function() {
new Ajax.Request('/ajax/stockquotes.php', {
onComplete: function(transport) {
var t, a;
if (200 == transport.status) {
t = transport.responseText;
a = t.split(',');
x.push(x.length+1);
y.push(a[1]);
val = a[1]; // set the text
if (!g) {
g = brd.create('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true});
txt = brd.create('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:14});
brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,g.dataX,g.dataY)],{strokecolor:'red',dash:3});
} else {
g.dataX = x;
g.dataY = y;
}
brd.update();
};
}});
};
// Fetch max and min, and start the periodical update.
new Ajax.Request('/ajax/stockquotes.php', {
onComplete: function(transport) {
var a, t;
if (200 == transport.status) {
t = transport.responseText;
a = t.split(',');
hi = a[6]*1.00002;
lo = a[7]*0.99998;
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,hi,200,lo]});
brd.create('axis',[[0,lo],[1,lo]]);
Start();
};
}});
Start = function() {
if (periodical==null) {
periodical = setInterval(fetchData,1000); // Start the periodical update
}
};
Stop = function() {
if (periodical!=null) {
clearInterval(periodical);
periodical = null;
}
};
The PHP code
<?php
$fp = fopen ("https://finance.yahoo.com/d/quotes.csv?s=^gdaxi&f=sl1d1t1c1ohgv&e=.csv","r");
echo fgets ($fp, 1024);
fclose ($fp);
?>