Graphs from MYSQL to jquery FLOT

Question

Hi friends,

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

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

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

Answer 2

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.

Answer 3

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"}]

Answer 4

I've just figured out that the origin of my problem is this:

jquery.tabs.css

because i am using jquery tabs 2. The calculation of the div seems to fail. Is there any way to override this without getting rid of the tabs? (they are really nice)

Thanks a lot

Answer 5

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

Answer 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_weight_graph() function.