在谷歌图形上显示服务器端txt文件中的数据点

Displaying data points from server side txt file on google graph

本文关键字：文件 数据 txt 服务器端 谷歌 图形 显示      更新时间：2023-09-26

我想显示从服务器端文本文件中检索到的数据点在谷歌图表上。在研究过程中，我现在可以从temps.txt中检索数据使用$.get（）.的文件

我刚开始学习javascript，所以这可能是我明显错过的东西。

我还可以显示一个带有一些示例数据点的示例谷歌图。

我该如何将两者结合起来，下面我有两个源文件我迄今为止的尝试。

获取数据点：

<!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 = [];
  for (var i in times) {
    html.push(times[i] + '<br/>');
  }
  html.push( times[0] * 3 );
  $('body').append(html.join(''));
});

</script>
</html>

显示图形：

<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 data = 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文件是一个简单的文本文件，每小时有一个测量值第一行是00:00，第二行是01:00，依此类推：

15.3
16.4
16.7
18.8
... etc

好吧，应该是这样的：

function drawChart() {
    $.get('temps.txt', function(txt) {
        vals = txt.split("'n");
        var hour= 0;
        var dataArr=[['Hours', 'Temperature']]
        for(var i = 0; i < vals.length;i++){ // build data array
            //add the hour in 'hh:00' format and the temperature value
            dataArr.push([('0'+hour).substring(-2)+':00', parseFloat(vals[i])]);
            hour+=1;
        }
        var data = 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);
    });
}
相关文章：