Самый простой способ автообновление Google Charts поместить его внутри страницы

Question

У меня есть два файла, один данные вывода из базы данных MySQL и один рисунок в Google Graph внутри страницы с другими показателями:

grab_twitter_stats.php Выходные:

[15, 32], [14, 55], [13, 45], [12, 52], [11, 57], [10, 55], [9, 58], [8, 42], [7, 44], [6, 40], [5, 54], [4, 52], [3, 60], [2, 71], [1, 43], 

index.php Выход:

<div id="curve_chart" style="width: 900px; height: 500px"> 

<script type="text/javascript"> 

google.charts.load('current', {packages: ['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Minutes', 'Tweets'], 

     <?php require('grab_twitter_stats.php');?> 

    ]); 

    var options = { 
     title: 'Tweets in last 15 Minutes', 
     curveType: 'function', 
     hAxis: { 
     title: 'Last 15 Minutes', 
     direction: '-1' 
     }, 
     legend: { position: 'bottom' } 

    }; 

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart.draw(data, options); 

} 

</script> 
</div> 

Это рисует график, который показывает твиты в течение последних 15 минут. Я могу заставить график появляться один раз, но при попытке загрузить SetInterval он не обновляет график Google в интервале. Я попробовал обернуть всю функцию drawChart() в нем, и он, похоже, не работает. Я попытался использовать AJAX, но он не отформатирован в JSON, поэтому ajax ему не нравится. Любые предложения по простому способу автоматического обновления этого графика?

Answer 1

хотя и не JSON, вы можете использовать Ajax, даже с открытым текстом

что-то вроде этого вы должны получить близко ...

google.charts.load('current', { 
    callback: function() { 
    drawChart(); 
    setInterval(drawChart, (15 * 60 * 1000)); 

    function drawChart() { 
     $.ajax({ 
     url: 'grab_twitter_stats.php', 
     type: 'get', 
     success: function (txt) { 
      // check for trailing comma 
      if (txt.slice(-1) === ',') { 
      txt = txt.substring(0, txt.length - 1); 
      } 
      var txtData = JSON.parse('[["Minutes", "Tweets"],' + txt + ']'); 

      var data = google.visualization.arrayToDataTable(txtData); 

      var options = { 
      title: 'Tweets in last 15 Minutes', 
      curveType: 'function', 
      hAxis: { 
       title: 'Last 15 Minutes', 
       direction: '-1' 
      }, 
      legend: { position: 'bottom' } 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
      chart.draw(data, options); 
     } 
     }); 
    } 
    }, 
    packages: ['corechart'] 
});