Can't Get Data Into Flot With AJAX

问题

I am using the code below to graph data into flot, and when I print out dataOne, it returns properly formatted values for flot, however when I set it as the data for flot to graph, flot forms a graph but then has no data points?

<!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>

回答1:

Finally to the root of the problem. If it's valid JSON, dataOne must be an array of arrays:

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

Note the extra brackets. Check your console.log carefully.

Doing this:

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

in JavaScript, automatically converts it to a string.

What you need is an array of array of array (the inner most is a point, the second is a series, the outer is a collection of series):

var d = [dataOne];

And then just

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

回答2:

For those of you who may want to do something similar, here is the code I used to finally make it work. :)

First off, the page that produced the value the PHP file collected was incorrect. The Arduino was using AJAX to update the value every second, but I realised this was stupid as the page was called every second from the main AJAX call which called data.php which then called this page. So I removed the AJAX from the Arduino Web Server code.

Since the code was not working and I had spent hours trying I started to look around for alternatives. In highcharts.js I found some AJAX code, and decided to try it. Here is the code I ended up with:

<!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>

After that, I had to get the data.php working properly. I had a problem where

file_get_contents

Would not only get the output of the Arduino, but also many of the tags surrounding it. This stuffed up my data. So I gave up with the proper html tags and just printed out the plain value. So if you went to the page source of the Arduino's output, there are no tags surrounding the value, all you see is a number. So that stopped that issue.

Here is the php code I use to format the values:

<?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;
}

?>

To get the data into the appropriate brackets, you can see that when no data is present in the file, the if statement does not include a comma and space, because there is no other set of data to separate from. As soon as one value is in the file, I use substr to get rid of the last containing bracket, then append the comma, space and then values, with the containing bracket put again at the very end of the data where it should be.

Anyway, this ended up working like a dream. Thanks for everyones help :)

来源：https://stackoverflow.com/questions/26176677/cant-get-data-into-flot-with-ajax

标签

javascript

php

jquery

json

flot