谷歌量表实时上升图

I have been trying to update my Google Gauge Charts in Real Time.

我一直在尝试实时更新我的谷歌量表。

My Code is as follows.

我的代码如下。

<script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

      var json = $.ajax({
                    url: 'graph.php', // make this url point to the data file
                    dataType: 'json',
                    async: false
                }).responseText;
                //alert(json);
        var data = google.visualization.arrayToDataTable(json);
        var options = {
          width: 400, height: 120,
          redFrom: 0, redTo: 3,
          greenFrom:<?php echo $inactivecount['inactive_count']-3;?>, greenTo: <?php echo $inactivecount['inactive_count'];?>,
          minorTicks: 0,
          min:0,
          max:<?php echo $inactivecount['inactive_count'];?>,
          'majorTicks': ["",""],
          'animation.duration':100
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        //setInterval(drawChart(12,10),1000);
        chart.draw(data, options);

        setInterval(drawChart, 1000);
      }
    </script>

And Ajax File is like below.

Ajax文件如下所示。

$table = array();
$table=array(0=>array('Label','Value'),1=>array('Likes',$like));
// encode the table as JSON
$jsonTable = json_encode($table);

// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Oct 2013 05:00:00 GMT');
header('Content-type: application/json');

// return the JSON data
echo $jsonTable;

If hardcode the json in data then it works fine but when I am returning json from ajax in the same json format its not drawing the gauge

如果在数据中硬编码json，那么它可以工作得很好，但是当我以相同的json格式从ajax返回json时，它不会绘制标尺

1 个解决方案

#1

First off, calling setInterval(drawChart, 1000); at the end of your draw function is not what you want to do - that will spawn a new interval with each call (on top of the existing interval), so you get an exponential growth of intervals, doubling the number every second (roughly - it will be a bit longer accounting for the AJAX call and execution time of the code). That will quickly lock your browser up and/or overwhelm your server with incoming requests. Try this instead:

首先，调用setInterval(drawChart, 1000);结束时你的画函数不是你想做什么——这将生成一个新的时间间隔与每个调用(在现有的区间),所以你得到一个指数级增长的间隔,每秒钟数翻倍(约-这将是一段时间占的AJAX调用和执行时间代码)。这将快速地锁定您的浏览器，并/或用传入的请求淹没您的服务器。试试这个:

function drawChart() {
    var data;
    var options = {
        width: 400,
        height: 120,
        redFrom: 0,
        redTo: 3,
        greenFrom: <?php echo $inactivecount['inactive_count']-3;?>,
        greenTo: <?php echo $inactivecount['inactive_count'];?>,
        minorTicks: 0,
        min: 0,
        max: <?php echo $inactivecount['inactive_count'];?>,
        majorTicks: ["",""],
        animation: {
            duration: 100
        }
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    function refreshData () {
        var json = $.ajax({
            url: 'graph.php', // make this url point to the data file
            dataType: 'json',
            async: false
        }).responseText;

        data = google.visualization.arrayToDataTable(json);

        chart.draw(data, options);
    }

    refreshData();
    setInterval(refreshData, 1000);
}

If that isn't working, then go to graph.php in a browser and post what it outputs so I can test this.

如果它不工作，那就转到图上。在浏览器中发布它输出的php，这样我就可以测试它了。