Google Chart中的实时图表

Question

我不知道它是否已经在筹码中问得太多了但是我对自己的能力感到非常疲惫和失望。我已经做了3个月这样的图表并且没有成功。不管怎样我＆＃ 39;我再次尝试谷歌图表我在那里寻求帮助。

我以json格式显示了我的livesata.php（time_stamp（名为ts），ph，wet是我数据库中的数据值）：

  

[{＆＃34; TS＆＃34;：＆＃34; 12＆＃34;＆＃34; pH值＆＃34;：736，＆＃34;湿润＆＃34; 92}，{＆＃34 ; TS＆＃34;：＆＃34; 27＆＃34;＆＃34; pH值＆＃34;：0，＆＃34;湿润＆＃34;：0}，{＆＃34; TS＆＃34;：＆＃ 34; 21＆＃34;＆＃34; pH值＆＃34; 192＆＃34;湿润＆＃34; 24}，{＆＃34; TS＆＃34;：＆＃34; 15＆＃34;，＆ ＃34; pH值＆＃34;：0，＆＃34;湿润＆＃34;：0}]

即＆＃34; ts＆＃34;（时间戳（＆＃39; d＆＃39;））显示一个月的特定日期（此示例为月份为八月）。＆＃34; ph＆＃34;和＆＃34;水分＆＃34;是特定日期的总价值。 显然我在这里制作图表，我知道我是一个充满野心的笨蛋我试图创建一个看起来像这样的实时图表

现在我的问题是使用下面的代码，我发现这对他们的示例有效，但尝试我的php json失败。

  

function drawChart（）{

    var jsonData = $.ajax({
      url: 'livedata.php',
      dataType: 'json',
      async: false
    }).done(function (results) {

      var data = new google.visualization.DataTable(jsonData);

      data.addColumn('datetime', 'time_stamp');
      data.addColumn('number', 'ph');
      data.addColumn('number', 'moist');

      $.each(results, function (i, row) {
        data.addRow([
          (new Date(row.time_stamp)),
          parseFloat(row.ph),
          parseFloat(row.moist)
        ]);
      });

      var chart = new google.visualization.LineChart($('#chart').get(0));

      chart.draw(data, {
        title: 'Soil Analysis'
      });

    });

  }

  // load chart lib
  google.load('visualization', '1', {
    packages: ['corechart']
  });

  // call drawChart once google charts is loaded
  google.setOnLoadCallback(drawChart);

Answer 1

这里有几个问题，我会尝试帮助...

对于初学者，请使用当前版本的Google图表...

使用此 - ＆gt; 3

<!-- Individual items in the navbar --> <div class="collapse navbar-collapse" id="topNavBar"> <!-- This makes the collapse three bar button work --> <ul class="nav navbar-nav"> <li class="active"> <a href="{% url 'pics:index' %}"> <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp; Folders </a> </li> <li class=""> <a href="#"> <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>&nbsp; Pictures </a> </li </ul> <form class="navbar-form navbar-left" role="search" method="get" action="#"> <div class="form-group"> <input type="text" class="form-control" name="q" value=""> </div> <button type="submit" class="btn btn-default">Search</button> </form> <ul class="nav navbar-nav navbar-right"> <li class=""> <a href="#"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; Add Folder </a> </li> <li class=""> <a href="#"> <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout </a> </li> </ul> </div> 是一个旧版本......

不这个 - ＆gt; <script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改jsapi声明

<script src="https://www.google.com/jsapi"></script>

至于ajax load已被弃用，请将其删除...

接下来，数据表的构造函数只接受特定格式的json数据 在这里找到 - ＆gt; Format of the Constructor's JavaScript Literal data Parameter

将参数留空

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

最后，发布的json示例不包含async: false

的属性

看起来像var data = new google.visualization.DataTable(); ，您可以尝试使用当前月份

推荐类似以下内容......

time_stamp