What's wrong with my FLOT data?

Question

My PHP is working fine and I appear to be getting back the correct JSON data for FLOT, but I'm still getting a blank chart :-/

Here's the PHP:

foreach($result as $row) { //or whatever
$dataset1[] = array((int) $row['INDX'], (int) $row['RUNTIME'] );
}
echo json_encode($dataset1);

Here's a sample of the JSON it returns: [[31,2303],[113,5697],[201,4485],[151,4404],[192,2668],[84,1082],[13,6003],[68,3628],[12,2115]]

Here's the function to plot:

$(function () {
     $.plot($("#dashboard_div"), apudata);
     console.log(apudata);
});

The console log shows correctly formatted JSON as above. I can cut and paste from the console log into a literal variable for that function and it works, but passing the JSON as a variable doesn't.

Ideas?Help?

ajax : var apudata = $.ajax({ url: "php/chartjs.php", dataType: "json", async: false }).responseText; — Iain, Feb 29 '16 at 06:21
This is when I got mine working. If your Json is formatted properly just use that Ajax method to get the data in. When I get home I'll write a proper answer. http://stackoverflow.com/questions/26176677/cant-get-data-into-flot-with-ajax?noredirect=1#comment41052807_26176677 — Peter, Feb 29 '16 at 06:32

Peter · Answer 1 · 2016-03-01T00:34:08.420

Try using the code below. Set the 1000 (ms) interval to however often you want the graph to update. This is simply (very slightly edited) code from one of my previous posts that I put in the comments.

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

I've updated the code, but all I did was wrap the dataOne in square brackets. — Peter, Mar 01 '16 at 00:33

score 0 · Answer 2 · answered Mar 01 '16 at 00:53

0

Not sure if it matters, but the flot docs say to just pass the selector as a string to $.plot(), and not a jQuery object. So instead of

$.plot($('#dashboard_div'), apudata);

try

$.plot('#dashboard_div', apudata);

answered Mar 01 '16 at 00:53

user2926055

1,963
11
10

What's wrong with my FLOT data?

2 Answers2