Display stock quotes from Yahoo!: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 10: Line 10:
</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 22:
             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 69: Line 70:


</jsxgraph>
</jsxgraph>
 
<html><div id="debug"></div></html>
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="xml">
<source lang="xml">

Revision as of 10:19, 25 September 2009

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.

The underlying JavaScript code

<jsxgraph width="700" height="400">
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.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true}); 
                    txt = brd.createElement('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:'14px'}); 
                    brd.createElement('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.createElement('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;
   }
};

</jsxgraph>

The PHP code

<?php
$fp = fopen ("http://finance.yahoo.com/d/quotes.csv?s=^gdaxi&f=sl1d1t1c1ohgv&e=.csv","r");
echo fgets ($fp, 1024);
fclose ($fp);
?>