Display stock quotes from Yahoo!: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(34 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 = null,
    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;
                document.getElementById('debug').innerHTML = t;
                a = t.split(',');
                x.push(x.length+1);
                y.push(a[1]);
                val = a[1];  // set the text
                if (!g) {
                    x[0] += 1; // for shadows of horizontal lines.
                    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;
  }
};
</jsxgraph>
<html><div id="debug"></div></html>
===The underlying JavaScript code===
<source lang="javascript">
var hi, lo, brd, periodical,  
var hi, lo, brd, periodical,  
     brd, g, txt,
     brd, g, txt, val,
     x = [],
     x = [],
     y = [];
     y = [];
Line 25: Line 92:
                 x.push(x.length+1);
                 x.push(x.length+1);
                 y.push(a[1]);
                 y.push(a[1]);
                val = a[1];  // set the text
                 if (!g) {  
                 if (!g) {  
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'});  
                     g = brd.create('curve', [x,y],{strokeWidth:3, strokeColor:'green',shadow:true});  
                     txt = brd.createElement('curve', [20,(hi-lo)*0.5,a[1]],{fontSize:'14px'});  
                     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;                     
                     g.dataY = y;
                     g.dataY = y;
                    txt.plaintextStr = a[1];
                 }
                 }
                 brd.update();
                 brd.update();
Line 38: Line 106:
};
};


// Fetch max and min of today.
// Fetch max and min, and start the periodical update.
new Ajax.Request('/ajax/stockquotes.php', {
new Ajax.Request('/ajax/stockquotes.php', {
         onComplete: function(transport) {
         onComplete: function(transport) {
Line 45: Line 113:
                 t = transport.responseText;
                 t = transport.responseText;
                 a = t.split(',');
                 a = t.split(',');
                 hi = a[6]*1.001;
                 hi = a[6]*1.00002;
                 lo = a[7]*0.999;
                 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 67: Line 135:
};
};


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


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