У меня был запрос от клиента, который хотел увидеть графическое представление данных sysInfo на сервере LAMP.Для тех из нас, кто предпочитает визуальные эффекты, есть живая демонстрация здесь .
Я нашел датчики на диаграммах Google, и в их демонстрации график двигался.Это то, что я показал клиенту, вот что они хотели.Просто после того, как ковыряться под капотом, я быстро понял, что они просто обновляют его случайными числами.поэтому я попытался сделать это сам.Я искал в Интернете, и я даже разместил здесь свои вопросы, но никто не ответил.
Итак, вот что я сделал ...
Изначально я пытался обновить свою диаграмму калибровки визуализации Google через ajax.мой фид 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);
}
allказалось, что это работает нормально, пока этот надоедливый метод setInterval () в doc.ready не выкинул мой неаккуратный код - 15 секунд спустя.Источник ajax - это массив php, заключенный в json_encode ().Когда скрипт обновился, весь мой график исчез - что-то вроде отстой!Я видел, как json входит через firebug.Это просто не работало.Взгляните:
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.Я знал, что, должно быть, делал что-то глупое ... Внизу моего поста (на этой странице, перед тем, как я его заново отредактировал) я добавил: «любая помощь или даже толчок в правильном направлении будет оченьценится ... "Я возвращался каждый день в течение недели и переиздавал заново.Я думал, что мне просто непонятно или что это глупый вопрос.«Я видел, как на глупые вопросы отвечают», - подумал я, - «возможно, мой был действительно-действительно глуп?»Тем не менее, мне все еще нужен был ответ.Хотя я не лучший программист - я довольно хороший гуглер.Я читаю все, на что я способен.Неудачно.nada, non, 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, поскольку документация по 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 Если вам нужен материал для презентационного слоя, пожалуйста, не стесняйтесь красть его из источника просмотра».Все внутренности приложения находятся на заднем плане ... Теперь мне потребовалась лучшая часть недели, чтобы собрать все части воедино.Прости меня за бессвязные.Я отредактирую это, когда у меня будет больше времени.Я только что взял так много кода с ЭТОГО сайта и остального сообщества, за эти годы, я рад отдать немного назад ... просто не забудьте проголосовать за эту статью, если вы ее используете.
Надеюсь, это поможет кому-то, кому это нужно.
Счастливого взлома,
Джо Негрон ~ NYC