Display stock quotes from Yahoo!: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(3 intermediate revisions by 2 users not shown)
Line 6: Line 6:


<html>
<html>
   <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
   <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 32: Line 32:
                 if (!g) {  
                 if (!g) {  
                     x[0] += 1; // for shadows of horizontal lines.
                     x[0] += 1; // for shadows of horizontal lines.
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true});  
                     g = brd.create('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true});  
                     txt = brd.createElement('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:'14px'});  
                     txt = brd.create('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:14});  
                     brd.createElement('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,g.dataX,g.dataY)],{strokecolor:'red',dash:3});
                     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 54: Line 54:
                 lo = a[7]*0.99998;
                 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.createElement('axis',[[0,lo],[1,lo]]);
                 brd.create('axis',[[0,lo],[1,lo]]);
                 Start();
                 Start();
             };
             };
Line 76: Line 76:
<html><div id="debug"></div></html>
<html><div id="debug"></div></html>
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="xml">
<source lang="javascript">
<jsxgraph width="700" height="400">
var hi, lo, brd, periodical,  
var hi, lo, brd, periodical,  
     brd, g, txt, val,
     brd, g, txt, val,
Line 95: Line 94:
                 val = a[1];  // set the text
                 val = a[1];  // set the text
                 if (!g) {  
                 if (!g) {  
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true});  
                     g = brd.create('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true});  
                     txt = brd.createElement('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:'14px'});  
                     txt = brd.create('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:14});  
                     brd.createElement('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,g.dataX,g.dataY)],{strokecolor:'red',dash:3});
                     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 117: Line 116:
                 lo = a[7]*0.99998;
                 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.createElement('axis',[[0,lo],[1,lo]]);
                 brd.create('axis',[[0,lo],[1,lo]]);
                 Start();
                 Start();
             };
             };
Line 135: Line 134:
   }
   }
};
};
</jsxgraph>


</source>
</source>
Line 143: Line 140:
<source lang="php">
<source lang="php">
<?php
<?php
$fp = fopen ("http://finance.yahoo.com/d/quotes.csv?s=^gdaxi&f=sl1d1t1c1ohgv&e=.csv","r");
$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);

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);
?>