Не удается получить данные во флот с помощью AJAX

Я использую код, приведенный ниже, чтобы отобразить данные на флопе, и когда я распечатываю dataOne, он возвращает правильно отформатированные значения для флота, однако, когда я устанавливаю его как данные для флота в граф, флот формирует граф, но не имеет точек данных?Не удается получить данные во флот с помощью AJAX

<!DOCTYPE HTML> 
<html> 
    <head> 
    <title>AJAX FLOT</title> 
    <script language="javascript" type="text/javascript" src="../../jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script> 
    </head> 
    <body> 
    <div id="placeholder" style="width: 100%;height: 600px;"></div> 
    <script language="javascript" type="text/javascript"> 
var options = { 
    lines: { 
    show: true 
    }, 
    points: { 
    show: true 
    }, 
    yaxis: { 
    min: "0", 
    max: "1023" 
    }, 
    xaxis: { 
    mode: "time" 
    } 
}; 
function update() { 
$.ajax({ 
    url: "http://localhost/data.php", 
    context: document.body 
}).done(function(response) { 

    dataOne = response; 

    var d = "[" + dataOne + "]"; 

    var plot = $.plot($('#placeholder'), [d], options); 


    setTimeout(update, 1000); 
}); 
} 
update(); 
</script> 
</html>

источник

2014-10-03 Peter

Ваши данные отформатированы неправильно. Этот '$ current. = '['. $ t. ','. $ data.']'; 'показывает, что вы цитируете числа и делаете их строками. Сделайте 'console.log (series)' и обновите свой вопрос с помощью вывода. – Mark

В этом коде здесь, как только он попадает в данные var, он не работает. У меня есть php-страница, распечатывающая выход, прежде чем она войдет в переменную, и она отформатирована правильно, потому что я получил график на основе PHP, который работает с того же выхода $ .ajax ({ \t url: "http: // localhost/. data.php», \t контекст: document.body }) сделано (функция (ответ) { \t // Получить ответ АЯКС \t Dataone = ответ; \t // Если данные не равно нулю, установите ваш участок-х данные \t var data = [ \t { \t \t ярлык: "Уровень реки Блэквуд с ", \t \t данные: [данныеОн] \t \t]; \t var plot = $ .plot ($ ('# placeholder'), данные, опции); – Peter

Если я делаю document.write (data), он возвращает [object Object], однако флот все еще распознает метку, поэтому он просто печатает ее там, где это происходит. – Peter

Для тех из вас, кто может захотеть сделать что-то подобное, вот код, который я использовал, чтобы наконец заставить его работать. :)

Во-первых, страница, которая произвела значение, собранное файлом PHP, была неправильной. Arduino использовал AJAX для обновления значения каждую секунду, но я понял, что это было глупо, поскольку страница вызывалась каждую секунду из главного вызова AJAX, который назывался data.php, который затем вызывал эту страницу. Поэтому я удалил AJAX из кода Arduino Web Server.

Поскольку код не работал, и я потратил несколько часов, я начал искать альтернативы. В highcharts.js я нашел код AJAX и решил попробовать. Вот код, который я закончил с:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
     <head> 
     <title>AJAX FLOT</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <script language="javascript" type="text/javascript" src="../../jquery.js"></script> 
     <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script> 
     <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script> 
     </head> 
     <body> 
     <div id="placeholder" style="width: 100%;height: 600px;"></div> 
     <div id="div" style="width: 100%; height: 100px;"></div> 
     <script type="text/javascript"> 
    var options = { 
     lines: { 
     show: true 
     }, 
     points: { 
     show: true 
     }, 
     xaxis: { 
     mode: "time" 
     } 
    }; 
window.setInterval(function(){ 
    $.getJSON('http://localhost/data.php', function (csv) { 

     dataOne = csv; 

     var plot = $.plot($('#placeholder'), [dataOne], options); 


    }); 
}, 1000); 
    </script> 
    </html>

После этого, я должен был получить data.php работает должным образом. У меня была проблема, когда

file_get_contents

Получил бы не только выход Arduino, Это забило мои данные. Поэтому я отказался от правильных тегов html и просто распечатал простое значение. Поэтому, если вы перешли к источнику страницы выхода Arduino, нет никаких тегов, окружающих значение, все, что вы видите, это число. Так что это прекратилось.

Вот код PHP использовать для форматирования значений:

<?php 

$file = "data.txt"; 
$webpage = "http://192.168.1.177/"; 
$t = time() * 1000; 

$current = file_get_contents($file); 
$data = file_get_contents($webpage); 


if ($current < "1") { 
    $current .= '[[' . $t . ', ' . $data . ']]'; 
    file_put_contents($file, $current); 
    echo $current; 
} 
else { 
    $cut = substr($current, 0, -1); 
    $cut .= ', [' . $t . ', ' . $data . ']]'; 
    file_put_contents($file, $cut); 
    echo $cut; 
} 

?>

Чтобы получить данные в соответствующие скобки, вы можете увидеть, что при отсутствии данных в файле, если заявление не включают запятую и пробел, потому что нет другого набора данных для отделения. Как только в файле будет одно значение, я использую substr, чтобы избавиться от последнего содержащего скобки, затем добавьте запятую, пробел и значения, а содержащая скобка снова вставлена в самый конец данных, где она должна быть.

В любом случае, это закончилось тем, что работало как сон. Спасибо за помощь всем :)

источник

2014-10-04 15:16:29 Peter

И, наконец, корень проблемы. Если она действует в формате JSON, dataOne должен быть массивом массивов:

[[1412393775000, 277], [1412393777000, 277], [1412393778000, 277]]

Примечание дополнительные скобки. Внимательно проверьте ваш console.log.

Делать это:

var d = "[" + dataOne + "]";

в JavaScript автоматически преобразует его в строку.

Что вам нужно, это массив массива из массива (внутреннего большинство является точкой, то вторая серия, внешний представляет собой набор из серии):

var d = [dataOne];

А потом просто

var plot = $.plot($('#placeholder'), d, options);

источник

2014-10-04 04:18:23 Mark

Это все еще не работает: \? Файл php не помещает значения внутри необходимой пары содержащих скобок, поэтому console.log их не отображает, потому что я должен добавить их в Javascript, и это то, что я пытался сделать с var d = "[" + dataOne + "]"; – Peter

Не удается получить данные во флот с помощью AJAX

ответ

Смежные вопросы