Live graph from a local file

[Confused Student]

Hi,

I looked around on the site and could not find anything related to
what I want to do so it may not even be possible but here goes. I
have a project that I am working on where a sensor outputs data to a
serial port and then that data is collected by a python script. The
data is then recorded as a tab delimited file. Is there a way to have
the script update the file on the fly and have the graph use the new
data.

Thanks!

[asgallant]

Yes, there is a way to do that.  Assuming your python script updates the file in the background (ie, it doesn't need to be prompted by the javascript), then you could use something like jQuery's AJAX function to retrieve the data and the setTimeout() function to call the AJAX on some interval of time:

function drawChart () {
    // set up chart variables
    var data;
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    var options = {};
    
    function refreshData () {
        jQuery.ajax({
            dataType: 'text',
            url: 'http://localhost:8080/path/to/file.ext',
            success: function (data, status) {
                // check status for errors
                // if no errors, convert data into DataTable object
                chart.draw(data, options);
                
                // refresh the data every 10 seconds (10k microseconds)
                setTimeout(function () {
                    refreshData();
                }, 10000);
            }
        });

[Xtremer]

 I am using this API and I want to pass data from another php file containing data using AJAX, Please guide me how to go about this.


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
    function drawVisualization() {
      var data = new google.visualization.DataTable();
      data.addColumn('datetime', 'Datetime');
      data.addColumn('number', 'Scans');
      data.addRows([
      [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],

      ]);
    var now = new Date(); //current date
      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('visualization'));
      annotatedtimeline.draw(data, {
                                    //'allValuesSuffix': '%', // A suffix that is added to all values
                                    'colors': ['#005EFF'], // The colors to be used
                                    'allowRedraw':true,
                                    'displayAnnotations': false,
                                    'displayExactValues': true, // Do not truncate values (i.e. using K suffix)
                                    'displayRangeSelector' : true, // Do not sow the range selector
                                    'displayZoomButtons': true, // DO not display the zoom buttons
                                    'fill': 15, // Fill the area below the lines with 20% opacity
                                    'legendPosition': 'newRow', // Can be sameRow
                                    //'max': 100000, // Override the automatic default
                                    //'min':  100000, // Override the automatic default
                                    'scaleColumns': [0, 1], // Have two scales, by the first and second lines
                                    'scaleType': 'allfixed', // See docs...
                                    'thickness': 1, // Make the lines thicker
                                    'zoomStartTime': new Date(now - 12*60*60*1000), //NOTE: month 1 = Feb (javascript to blame)
                                    'zoomEndTime': new Date(now - 4*60*60*1000) //NOTE: month 1 = Feb (javascript to blame)
                                   });
    }
   
    google.setOnLoadCallback(drawVisualization);
  </script>
<div id="visualization" style="width: 100%; height: 50%;"></div>