Question

每次通过设置间隔的ajax调用拉动数据时，如何动态地将行添加到google折线图？

我有这段代码

wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/main.js', array(), '3.3.7', true )

现在而不是我希望在加载页面后立即动态添加行，并且在设置间隔之后应该添加从ajax查询中获取的新值，如下所示：

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  11.7, 18.8, 10.5],
    [5,  11.9, 17.6, 10.4],
    [6,   8.8, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900,
    height: 500
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
}

Answer 1

请参阅以下工作代码段...

google.charts.load('45', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Update');
  data.addColumn('number', 'temperatureInC');
  data.addColumn('number', 'temperatureInF');
  data.addColumn('number', 'humidity');

  var options = {
    chart: {
      title: 'temperature vs. humidity'
    },
    width: 900,
    height: 500
  };

  var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
  ajaxCall();
  setInterval(ajaxCall, 5000); //300000 MS == 5 minutes
  function ajaxCall() {
    $.ajax({
      type: 'GET',
      crossDomain: true,
      dataType: 'json',
      data: {
        format: 'json'
      },
      url: 'http://san.gotdns.ch:8025/json',
    }).done(function (jsonData) {
      var chartData = jsonData.arduino;
      if (chartData.length > 0) {
        data.addRow([
          data.getNumberOfRows() + 1,
          parseFloat(chartData[0].temperatureInC),
          parseFloat(chartData[0].temperatureInF),
          parseFloat(chartData[0].humidity)
        ]);
      }
      chart.draw(data, options);
    });
  }
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart_material"></div>

动态添加行到谷歌线图关闭设置间隔ajax调用？

1 个答案: