javascript - Displaying data points from server side txt file on google graph -
i display retrieved info points server side text file on google graph. during research can retrieve info temps.txt file using $.get().
i started learning javascript , may obvious missed.
i can display sample google graph illustration datapoints.
how can set 2 together? , below have both source files attempts far.
getting datapoints:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>load demo</title> <style> body { font-size: 16px; font-family: arial; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <script> var times = []; $.get('temps.txt', function(data) { times = data.split("\n"); var html = []; (var in times) { html.push(times[i] + '<br/>'); } html.push( times[0] * 3 ); $('body').append(html.join('')); }); </script> </html> showing graph:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); function drawchart() { var info = google.visualization.arraytodatatable([ ['hours', 'temperature'], ['18:00', 20.7], ['19:00', 21], ['20:00', 22.3], ['20:30', 22.5], ['21:00', 22.0], ['22:00', 21.6] ]); var options = { title: 'temperatuur grafiek', legend: { position: 'bottom' } }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 700px; height: 400px;"></div> </body> </html> temps.txt file simple text file 1 measured value every hr first line 00:00 hrs 2nd line 01:00 hrs , on see below:
15.3 16.4 16.7 18.8 ... etc
well, this:
function drawchart() { $.get('temps.txt', function(txt) { vals = txt.split("\n"); var hour= 0; var dataarr=[['hours', 'temperature']] for(var = 0; < vals.length;i++){ // build info array //add hr in 'hh:00' format , temperature value dataarr.push([('0'+hour).substring(-2)+':00', parsefloat(vals[i])]); hour+=1; } var info = google.visualization.arraytodatatable(dataarr) var options = { title: 'temperatuur grafiek', legend: { position: 'bottom' } }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); }); } javascript jquery google-visualization
No comments:
Post a Comment