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.

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.

• javascript
• jquery
• mysql
• plot

• You might want to post some of the output of your PHP script so people can see what the JSON-encoded data looks like. – Ian Clelland Commented Oct 20, 2009 at 17:33
• you might want to add which jQuery plugin you are using. Could be the flot plugin, but can't really tell from your code alone. – googletorp Commented Oct 20, 2009 at 17:55
• Flot plugin. Just added the javascript sources to the post. Thanks – echedey lorenzo Commented Oct 20, 2009 at 18:01

6 Answers 6

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.

I was having the same problem. Thanks edebill for the solution. Perhaps this is new, but the jquery UI tabs documentation site now mentions this problem and has a very simple solution via changing CSS position: http://docs.jquery.com/UI/Tabs

Rather than hiding you just move the panels off the screen:

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

Just Checking... You did include the placeholder div, right?

<div id="placeholder" style="width:600px;height:300px;"></div>

You need to read the Flot documentation more, the series data that Flot expects is in a specific format. At the very least you should have

[{label: 'Item 1', data: [1,2]},{label: 'Item 2', data: [2,4]}]

Here is the api: Flot API, the first item says Data Format, just change the output to meet those standards and you should be fine.

Yeah i have been dealing with the documentation:

"A series can either be raw data or an object with properties. The raw data format is an array of points:

[ [x1, y1], [x2, y2], ... ] "

And in this example:

<script id="source" language="javascript" type="text/javascript">
$(function () {

    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

There's no need to use the label: "The label is used for the legend, if you don't specify one, the series will not show up in the legend."

Anyway, the JSON encoded data includes the name of the fields of the MYSQL Statement so it should be like a label...

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

change the name of your placeholder div to something other than 'placeholder'?