Difference between revisions of "Display stock quotes from Yahoo!"

From JSXGraph Wiki
Jump to navigationJump to search
Line 38: Line 38:
 
};
 
};
  
// 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 68: Line 68:
  
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="xml">
 +
<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'});
 +
                    txt = brd.createElement('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:'14px'});
 +
                } 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.001;
 +
                lo = a[7]*0.999;
 +
                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>
 +
 +
</source>
 +
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 16:20, 20 August 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'}); 
                    txt = brd.createElement('text', [3,(hi+lo)*0.5,function(){return 'GDAXI = '+val;}],{fontSize:'14px'}); 
                } 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.001;
                lo = a[7]*0.999;
                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>