title: How to update Real-time graph from textfile?
body: <p>I intend to display a real-time graph on.php/html from a text file without refreshing the page. Currently, I got a problem in the following process.</p>
  
  <p>The source file: .txt files containing the data, originating from a solaris server.</p>
  
  <p>1) Periodically ask the server for data, from a solaris server. (assuming the destination folder is specified as /home/sadm/htdocs/00000001/updateShop)</p>
  
  <p>2) Retrieve the data from the text file (inventory.txt)</p>
  
  <p>3) Parse the data to add new rows
     eg. from (2008-1-6:33322:39463) in the text file to</p>
  
  <blockquote>
    <p>[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined,
    undefined]</p>
  </blockquote>
  
  <p>If im not wrong, it would require me to use AJAX to do it, but I could not get it to work. May I ask to code the 3-steps process?</p>
  
  <p>Any form of help is greatly appreciated.</p>
  
  <p>The google graph API code I use is displayed below for reference. </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type='text/javascript' src='http://www.google.com/jsapi'&gt;&lt;/script&gt;
      &lt;script type='text/javascript'&gt;
        google.load('visualization', '1', {'packages':['annotatedtimeline']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Sold Pencils');
          data.addColumn('string', 'title1');
          data.addColumn('string', 'text1');
          data.addColumn('number', 'Sold Pens');
          data.addColumn('string', 'title2');
          data.addColumn('string', 'text2');
          data.addRows([
            [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
            [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
            [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
            [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
            [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
            [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
          ]);
  
          var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
          chart.draw(data, {displayAnnotations: true});
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      // Note how you must specify the size of the container element explicitly!
      &lt;div id='chart_div' style='width: 700px; height: 240px;'&gt;&lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>