jquery - 使用jQuery ajax的Google Visualization Gauge动态更新-来自json feed

Question

我有一个来自客户端的REQ，希望查看LAMP服务器上sysInfo数据的图形表示。对于那些喜欢视觉效果的人来说，live demo here。

我在Google图表上发现了量表，并且在他们的演示中图表正在移动。这就是我向客户展示的，这就是他们想要的。只是在深入了解之后，我很快意识到他们只是使用随机数对其进行了更新。所以我尝试自己做。我搜寻了互联网，甚至在这里发布了问题，但没有人回答。

所以，这就是我所做的...

最初，我试图通过ajax更新我的Google可视化仪表图。我的JSON供稿返回：

[
{"key":"label1","value":"50.25"},
{"key":"label2","value":"99.43"},
{"key":"label3","value":"4.47"},
{"key":"label4","value":"7.06"}
]

我得到它最初是渲染静态图像，但是它似乎从未更新过。我花了一段时间，然后才发现我的价值观在他们两边都有引号。那是问题1：API正在寻找数字数据，这是我第一次使用json服务。我不确定是否需要以某种方式添加状态：“确定”，或者是否需要像其他许多帖子一样告诉我执行eval（）。好吧，我也不需要...

我的脚本如下：

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
    // load the visualization api & skin
    google.load('visualization', '1', {packages:['gauge']});
    // draw the initial chart from snapshot data for quick rendering
    google.setOnLoadCallback(drawChart); 
    // set global vars once DOM finishes
    $(document).ready(function() {
      chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      options = {width: 400, height: 120,
          redFrom:  <?=$CODE_RED?>, redTo:100,
          yellowFrom:<?=$CODE_YEL?>, yellowTo:<?=$CODE_RED?>,
          greenFrom:<?=$CODE_GRN?>0, greenTo:<?=$CODE_YEL?>, 
          minorTicks: 5};
      // initialize ajax update of chart every 15 seconds
      setInterval("getStats ('./getJson.sysinfo.php?dash')", 15000); 
     });

然后我渲染了一个静态图：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(8);
    data.setValue(0, 0, 'label1');
    data.setValue(0, 1, <?=number_format($X1,2) ?>);
    data.setValue(1, 0, 'label2');
    data.setValue(1, 1, <?=number_format($X2,2)?>);
    data.setValue(2, 0, 'label3');
    data.setValue(2, 1, <?=number_format($X3,2)?>);
    data.setValue(3, 0, 'label4');
    data.setValue(3, 1, <?=number_format($X4,3)?>);
    chart.draw(data, options);
 }   

所有这些似乎都可以正常工作，直到doc.ready中令人讨厌的setInterval（）方法插入我的草率代码-15秒后。 ajax源是一个用json_encode（）包装的php数组。脚本更新后，我的整个图形都消失了-有点烂！我看到json是通过萤火虫传入的。只是没有用。看一看：

function getStats (source) {
  $.ajax({
    url: source,
    type: 'POST',
    dataType: 'json',
    success: function(data) { refreshChart(data); },
    error: function (request, status, error) {
           alert("REQUEST:\t"+request
              +"\nSTATUS:\t"+status
              +"\nERROR:\t"+error);
     }
   });
 }

然后我的refreshChart（）就是一切都崩溃了的地方：

    function refreshChart(serverData) {
        var chartData = [];
        for(var i = 0; i < serverData.length; i++) {
    //      chartData.push([serverData[i][0], $.serverData[i][1]['value']]);
    //      chartData.push([serverData[i][0], $.serverData[i][1].val()]);
          chartData.push([serverData[i][0], serverData[i][1].value]);
        }
//  note2self[347] = "I tried the above a million different ways and firebug coming back 
//+ with: "missing ] after element list" on the function declaration line..." 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(chartData);  
        chart.draw(data, options);
     } 

    </script>

我在想也许我需要创建另一个DataTable对象，或者如果在函数外部声明它，也许我可以使用setInterval（data.setValue（i，1，serverData i），1500）直接更新该元素。无论哪种方式，第一步都是访问json数据。我知道我一定一直在做一些愚蠢的事情……在我帖子的底部（在此页面上，在我重新编辑之前），我补充道：“任何帮助甚至是朝着正确方向的微调都是很大的。感谢...”我每天回来一周，然后重新进行重新编辑。我以为我只是不清楚，或者这是一个愚蠢的问题。我以为“我看到愚蠢的问题得到了回答”，也许我的确是真的愚蠢？尽管如此，我仍然需要一个答案。虽然我不是最好的程序员-但我是一个很好的Googler。我读了所有能引起我注意的东西。没运气。娜达（Nada），非，齐尔奇（Zylch），尼特（Niet），什么都没有

好吧，这真让我发疯，所以这就是我的想法：


如前所述，我在数字值两边加上了引号。这就是让我的图表爆炸的原因……而且由于jQuery不会给您任何错误，因此我对将字符数据填充到新数组中直到被我调用.draw（）方法和漂亮图片的事实视而不见。不见了
我不希望检查的另一个问题是我使用的jQuery版本。它很旧并且没有内置json解析。因此，我将不得不评估服务器数据，解析数据流并从那里构建数据结构。
＃1和＃2都导致数据行更新失败，并且我的字段全部未定义返回。
我还有一些超出范围的变量声明-即添加.Guage的类和附带的.DataTable（）-随行而来。
data.setValue（i，1，serverData [i] .value）应该已经在AJAX（）调用的成功回调中循环了-这完全消除了我的refreshChart（）方法。
我遇到的最后一个问题是弄清楚如何访问json数据并将其填充到现有数组中。这比我想的要棘手。一个更有经验的程序员可能会更好地了解……但是，我很固执。您可以看到我试图在现有数组中执行chartData.push（）的地方。我连续几个晚上都在调用arrayName [] []的每种组合。原来，我可以只重用google的.setValue（）方法。正如您将在下面看到的那样，使用success（）回调方法，一旦将第一个元素填充到表中，其余元素填充到需要去的其他位置，我就可以使用以下方法将其循环：

for (var i = 0; i < data.length; i++) {
        if (i<4) {
            dashData.setValue(i, 0, jsonData[i].k);
            dashData.setValue(i, 1, jsonData[i].v);
             } ...

我从头开始重写了整个内容。在接下来的几天里，我可能会再次重写它几次。最终，它将演变为功能完善的drupal和wordpress插件以及操作方法文章。我将其发布在我的博客LogicWizards.NET b / c上，jQuery文档含糊不清，而且Google网站上的示例演示也不是很简单。

长话短说，这是我想到的：

<!-- /** Client-Side Scripts **/ --> 
<script type='text/javascript' src='http://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
// load the visualization api & skin
google.load('visualization', '1', {packages:['gauge']});
// draw the initial chart from snapshot data for quick rendering
google.setOnLoadCallback(drawChart); //as soon as the API is loaded
// set global vars once DOM finishes
$(document).ready(function() {
  dash = new google.visualization.Gauge(document.getElementById('chart_div'));
  dashData = new google.visualization.DataTable();
  options = { width: 400, height: 120,
      redFrom:75, redTo:100,
      yellowFrom:50, yellowTo:75,
      greenFrom:00, greenTo:50, 
      minorTicks: 5};
 });

function drawChart() {
 // method to define initial chart
    dashData.addColumn('string', 'Label');
    dashData.addColumn('number', 'Value');
    dashData.addRows(8);
    dashData.setValue(0, 0, 'CPU');
    dashData.setValue(0, 1, 54.40);
    dashData.setValue(1, 0, 'RAM');
    dashData.setValue(1, 1, 99.54);
    dashData.setValue(2, 0, 'SWAP');
    dashData.setValue(2, 1, 4.25);
    dashData.setValue(3, 0, 'NET');
    dashData.setValue(3, 1, 0.402);
    dash.draw(dashData, options);
 }

function updateJSON (source) {
 // method to update all subsequent charts
 var jsonData = null; //there's really no reason for this anymore (see below)
 $.ajax({ url:source, type:'POST', dataType:'json',
    success: function(data) { jsonData=data;
    for (var i = 0; i < data.length; i++) {
      if (i<4) {
          dashData.setValue(i, 0, jsonData[i].k);
          dashData.setValue(i, 1, jsonData[i].v); 
          if (i<3) { dash.draw(dashData, options); }
        }
           $("#"+jsonData[i].k).text(jsonData[i].v); 
      }
     },
    error: function (request, status, error) {
           alert("REQUEST:\t"+request
               +"\nSTATUS:\t"+status
                +"\nERROR:\t"+error);        }
   }); //end-ajax
  return jsonData; //obsolete: updates are now done through the success callback
 }

function isSet (variable) { // mimic the php function 
  return (typeof variable !== "undefined" && variable.length) ? 1 : 0;
 }

function setDelay(delay){ 
 // method to change timer's sleep interval
    clearInterval(timer); //kill the last timer
    timer=setInterval(json,delay*1000); //delay is miliseconds
  }
</script> 

您将看到，繁重的工作是通过updateJSON（）函数完成的。现在效果很好。我认为，如果遇到这么多问题，那么其他人可能会受益于我对原始帖子的快速编辑-随着我的回答，我会回答自己的问题。我认为将问题写出给StackedOverflow的过程有助于我分辨问题和症状之间的区别，并找到答案。即使没有人有答案。

如果有人想观看实时演示，请转到 http://LogicWizards.NET。如果您需要此表示层的内容，请随时从“查看源代码”中窃取。该应用程序的全部内容都在后端...现在，我花了一周的大部分时间才将所有部分放在一起。原谅我乱逛。当我有更多时间时，我将对其进行编辑。多年来，我刚刚从THIS网站和社区的其他成员那里获取了很多代码，我很乐意回馈一点……如果您使用它，请记住要对本文投反对票。

我希望它可以帮助需要它的人。

快乐黑客

乔·内格隆〜纽约

Answer 1

根据项目issues tracker，升级到1.1应该可以解决此问题。

代替

google.load('visualization', '1')

采用

google.load('visualization', '1.1')