我有一个来自客户端的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网站和社区的其他成员那里获取了很多代码，我很乐意回馈一点……如果您使用它，请记住要对本文投反对票。
我希望它可以帮助需要它的人。
快乐黑客
乔·内格隆〜纽约
最佳答案
根据项目issues tracker，升级到1.1应该可以解决此问题。
代替
google.load('visualization', '1')
采用
google.load('visualization', '1.1')
关于jquery - 使用jQuery ajax的Google Visualization Gauge动态更新-来自json feed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4416841/