Inserting Data into Flot

Question

I am having a hard time displaying an array of data on a Flot graph. I'm using jQuery Ajax/PHP/MySQL to do this.

I created by array with this PHP/MySQL:

  $result = mysql_query("SELECT * FROM happiness");
  $array = array();
  while($row = mysql_fetch_array($result)) {
    $array[] = $row[3];
    $array[] = $row[2];
  }

  echo json_encode($array);

And pass it through jQuery Ajax to Flot like this:

$.ajax({                                      
      url: 'receive-happiness.php',   
      dataType: 'json',                      
      success: function(data)          
      {
            var graph_data = [data];              
            alert(graph_data);
            $.plot($("#graph"), [graph_data], options);
      }
    });

When I alert graph_data, I get this:

23,8,23,1,24,0,25,0,26,9,27,10,28,9

But when I check my Flot graph, it only displays a single data point at (23,8). What is going wrong?

Answer 1

Your graph data is supposed to be an array of grouped point coordinates.

Try this:

$result = mysql_query("SELECT * FROM happiness");
$array = array();
while($row = mysql_fetch_array($result)) {
  $array[] = array($row[3], $row[2]);
}

echo json_encode($array);

When you alert your graph data, it should look something like this:

[ [23, 8], [23, 1], [24, 0], [25, 0], [26, 9], [27, 10], [28, 9] ]

See Flot Data format documentation.