einfachste Weg Google Charts zu Auto-Refresh innerhalb einer Seite eingebettet

Question

Ich habe zwei Dateien, eine Ausgabe von Daten aus einer MySQL-Datenbank und eine Google-Diagramm innerhalb einer Seite mit anderem Metriken Zeichnung:

grab_twitter_stats.php Ausgang:

[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 Ausgang:

<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> 

Dies zeichnet eine Grafik, die Tweets in den letzten 15 Minuten zeigt. Ich kann das Diagramm einmal erscheinen lassen, aber wenn ich versuche, ein SetInterval zu laden, wird das Google Graph im Intervall nicht aktualisiert. Ich habe versucht, die gesamte drawChart() -Funktion darin zu verpacken, und es scheint nicht zu funktionieren. Ich habe versucht mit AJAX, aber es ist nicht in JSON formatiert, so dass Ajax es nicht mag. Irgendwelche Vorschläge für die einfachste Möglichkeit, dieses Diagramm automatisch zu aktualisieren?

Answer 1

obwohl nicht JSON, können Sie immer noch Ajax verwenden, auch mit Klartext

so etwas wie dieses sollten Sie schließen ...

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'] 
});