Display stock quotes from Yahoo!: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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 14: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>