Gráficos de MYSQL a jquery FLOT

Question

He descubierto flot para jquery para dibujar gráficos agradables. Pero no puedo analizar los datos que quiero representar de MYSQL. Me está volviendo loco porque me sale este error:

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

¿Hay alguna manera de poner los datos de MySQL en flot aparte de esto ?:

php parte:

<?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 parte:

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

He estado buscando en Google ... sin éxito. Parece bastante simple, pero parcela simplemente no va a entender los datos ... o algo ...

La salida del archivo PHP es el siguiente (para dos entradas, por ejemplo):

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

donde @ cnt es un contador para el incremento del eje x de cada fila (0,1,2,3 ...) y MAG es el dato en sí mismo para mostrar en el eje y.

El jQuery que estoy usando es:

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

donde Flot es la versión 0.5 y el navegador Firefox.

Answer 1

Déjame adivinar: estás renderizando en una pestaña oculta. Todavía no he encontrado la solución, pero parece que tiene el div oculto (p.display: none) rompe el flop porque no puede determinar las dimensiones del div marcador de posición. La representación en la pestaña que se muestra por defecto funciona.

estoy trabajando en el mismo problema. Quiero mi gráfico en la segunda pestaña, con la primera pestaña con algunos otros datos. Aquí está mi solución:

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

Y entonces la llamada real a .PLOT() se coloca dentro de la función show_graph().

Answer 2

Just Checking ... Incluyó el marcador de posición div, ¿no?

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

Answer 3

Necesita leer más la documentación de Flot, los datos de la serie que Flot espera que estén en un formato específico. Por lo menos usted debe tener

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

Aquí es la API: Flot API, el primer elemento dice Formato de datos, acaba de cambiar la salida para cumplir con esas normas y que debe estar bien.

Answer 4

Sí i estado tratando con la documentación:.

"Una serie puede ser o bien los datos en bruto o un objeto con propiedades El formato de datos sin procesar es una matriz de puntos:

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

Y en este ejemplo:

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

no hay necesidad de usar la etiqueta:" la etiqueta se utiliza para la l eyenda, si no especifica uno, la serie no se mostrará en la leyenda ".

De todos modos, los datos JSON codificado incluye el nombre de los campos de la Declaración de MySQL por lo que debe ser como una etiqueta ...

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

Answer 5

cambio el nombre de su div marcador de posición a algo distinto de 'marcador de posición ¿?

Answer 6

que estaba teniendo el mismo problema. Gracias edebill por la solución. Tal vez esto es nuevo, pero las fichas de interfaz de usuario sitio de documentación de jQuery ahora menciona este problema y tiene una solución muy sencilla a través de cambiar de posición CSS: http://docs.jquery.com/UI/Tabs

En lugar de ocultar sólo hay que mover los paneles de la pantalla:

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