Graphs from MYSQL to jquery FLOT

Question

I've discovered flot for jquery for drawing nice graphs. But I can't parse the data I want to represent from MYSQL. It's driving me crazy because I get this error:

uncaught exception: Invalid dimensions for plot, width = 0, height = 0

Is there any way to put MYSQL data into flot apart from this?:

php part:

<?php 
include './includes/config.php';
include './includes/opendb.php';

$ID=$_GET["ID"];
$data=$_GET["data"];

$query_set = "SET @cnt = -1";
$query = "SELECT @cnt +1, {$data} FROM table_inf where ID = {$ID};";

$result = mysql_query("{$query_set}");
if (!$result) {
die("Query to show fields from table failed");
}

$result = mysql_query("{$query_select}");
if (!$result) {
die("Query to show fields from table failed");
}

$arr = array();
while($obj = mysql_fetch_object($result))
{
    $arr[] = $obj;
}

//NOW OUTPUT THE DATA:
print json_encode($arr);

mysql_free_result($result);
include './includes/closedb.php';
?>

javascript part:

<script type="text/javascript">

function get_data() {

var options = {
lines: {show: true},
points: {show: true},
yaxis: { min: 0 },
};

$.ajax({ url: "return_values.php?ID=1&data=MAG",
dataType: "json",
success: function(result)
{
plot = $.plot($("#placeholder"), result, options);
}
});
};
</script>

I've been googling.. with no success. Seems pretty simple but plot simply won't understand the data... or something...

The output of the php file is as follows (for two entries for example):

[{"@cnt := @cnt + 1":"0","MAG":"6.87"},{"@cnt := @cnt + 1":"1","MAG":"11.44"}]

where @cnt is a counter for the x axis incrementing of each row (0,1,2,3...) and MAG is the data itself to show on the y axis.

The jquery i'm using is:

<script src="./javascripting/jquery-1.3.2.js" type="text/javascript"></script>   
<script src="./javascripting/jquery.tabs.pack.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="./javascripting/jquery.flot.js"></script>

where flot is version 0.5 and the browser firefox.

Answer 1

Let me guess: you're rendering in a hidden tab. I haven't found the fix for it yet, but it looks like having the div hidden (e.g. display:none) breaks flot because it can't determine the dimensions of the placeholder div. Rendering in the tab that is shown by default works.

I'm working on the same problem. I want my graph on the second tab, with the first tab holding some other data. Here's my solution:

<script type="text/javascript">
   $(function() {
      $("#tabs").tabs();
      $("#tabs").bind('tabsshow', function(event, ui) {
            if (ui.index == 1) {   // second tab
               show_graph();
            }
      });
  });

And then the actual call to .plot() is put inside the show_graph() function.