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> On Monday, 19 March 2012 09:58:55 UTC-4, asgallant wrote: > > 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); > } > }); > } > } > > > On Wednesday, March 14, 2012 2:29:11 PM UTC-4, Confused Student wrote: >> >> 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! > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/oWvztTdkEioJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
