SearchMenu

ajaxbfo.txt

<html>
<head>

<script language="javascript" src="../bfograph.js"></script>
<script language="javascript">

  var url = "http://localhost:8080/graph/servlet/GraphServlet/xml-html";
   
  factories = [
    function() { return new XMLHttpRequest();},
    function() { return new ActiveXObject("Msxml2.XMLHTTP");},
    function() { return new ActiveXObject("Microsoft.XMLHTTP");}
  ];

  function getHTTPRequest() {
    for (var i=0;i<factories.length;i++) {
       try {
          var factory = factories[i];
          var request = factory();
          if (request != null) {
            return request;
          }
       }
       catch (e) {
        continue;
       }
    }
  }

  /**
   * Handle the data returned from the BFO Graph Servlet
   */
  function gotChart(xmlObj) {
    var dom = (new DOMParser().parseFromString(xmlObj, "text/xml"));

    // Add in the 'map' element 
    var map = dom.getElementsByTagName("map")[0];    
    if (typeof map != "undefined") {
      var newmap = document.createElement("map");
      newmap.innerHTML = new XMLSerializer().serializeToString(map); 
      newmap = document.getElementsByTagName("head")[0].appendChild(newmap);
      var tmp = newmap.removeChild(newmap.firstChild);
      newmap.parentNode.appendChild(tmp);
      newmap.parentNode.removeChild(newmap);
    }
    
    // handle <script> element
    var script = dom.getElementsByTagName("script")[0];
    if (typeof script != "undefined") {
      // create new element in current DOM
      var newscript = document.createElement("script");
      // get rid of '<script..' wrapper'
      // script will come back with <!-- around actual script on later graph libraries
      var child = script.firstChild;
      if ((child.nodeType != 8) && (typeof child.nextSibling != "undefined")) {
        // comment node
        child = child.nextSibling;
      }
      var js = child.textContent;
      // set up new script element to match 
      newscript.text = js;
      newscript.defer = true;
      newscript.language="javascript";
      newscript.type="text/javascript";
      newscript = document.getElementsByTagName("head")[0].appendChild(newscript);
    }

    // replace the HTML of the 'chart' element in the current page with the IMG tag for the 
    // generated chart, causing it to display
    var img = dom.getElementsByTagName("img")[0];
    if (typeof img != "undefined") {
      document.getElementById("chart").innerHTML = new XMLSerializer().serializeToString(img);
    }
  }

  /**
   * Posts XML to the server and handles the returned data
   */
  function getChart() {  
    var xml2 = "<bfg:axesgraph xmlns:bfg=\"http://bfo.co.uk/ns/graph?version=2\" width=\"300\" height=\"300\" border=\"0\" >" +
       "<bfg:label font=\"10pt bold Arial\">NASDAQ COMPOSITE (^IXIC) (Jan 05)</bfg:label> " +
       "<bfg:label font=\"10pt italic Arial\">Roll mouse over bfg:data for exact values.</bfg:label> " +
       "<bfg:axis pos=\"bottom\" type=\"date(yyyy-MM-dd)\" rotate=\"90\" paddingleft=\"2\" align=\"left middle\" density=\"sparse\"/> " +
       "<bfg:axis pos=\"left\" type=\"decimal($#,###)\"/> " +
       "<bfg:lineseries name=\"Price\" color=\"red\" linethickness=\"2\" " +
         "onmousemove=\"bfgShowPopup(bfgToDate(seriesx,'dd MMM yyyy') +'=$'+bfgRound(seriesy,2), event)\" onmouseout=\"bfgHidePopup()\"> " +
       "<bfg:data x=\"2005-01-03\" y=\"2184.75\"/><bfg:data x=\"2005-01-04\" y=\"2158.31\"/><bfg:data x=\"2005-01-05\" y=\"2102.90\"/><bfg:data x=\"2005-01-06\" y=\"2098.51\"/> " +
       "<bfg:data x=\"2005-01-07\" y=\"2099.95\"/><bfg:data x=\"2005-01-10\" y=\"2087.62\"/><bfg:data x=\"2005-01-11\" y=\"2089.07\"/><bfg:data x=\"2005-01-12\" y=\"2089.70\"/> " + 
       "<bfg:data x=\"2005-01-13\" y=\"2093.54\"/><bfg:data x=\"2005-01-14\" y=\"2079.47\"/><bfg:data x=\"2005-01-18\" y=\"2081.86\"/><bfg:data x=\"2005-01-19\" y=\"2105.74\"/> " +
       "<bfg:data x=\"2005-01-20\" y=\"2056.38\"/><bfg:data x=\"2005-01-21\" y=\"2053.15\"/><bfg:data x=\"2005-01-24\" y=\"2040.13\"/><bfg:data x=\"2005-01-25\" y=\"2022.08\"/> " +
       "<bfg:data x=\"2005-01-26\" y=\"2034.69\"/><bfg:data x=\"2005-01-27\" y=\"2042.77\"/><bfg:data x=\"2005-01-28\" y=\"2052.54\"/><bfg:data x=\"2005-01-31\" y=\"2053.47\"/> " +
       "</bfg:lineseries></bfg:axesgraph>";

    var req = getHTTPRequest();
    req.open("POST", url);
    req.onreadystatechange = function() {
      if (req.readyState != 4) return;
      if (req.status != 200) return;

      // wrap result in single root 'xml' element
      gotChart("<xml>" + req.responseText + "</xml>");
    }
    req.setRequestHeader("Content-Type", "application/x-www-form/urlencoded");
    req.send(xml2);
  }
  
</script>
</head>
<body>
<div id="chart">
</div>
<input type="button" value="Chart" onclick="getChart()"/>
</body>
</html>