Wykresy od MYSQL do jquery FLOT

Question

Odkryłem flot dla jquery do rysowania ładnych wykresów. Ale nie mogę parsować danych, które chcę reprezentować z MYSQL. To doprowadza mnie do szału, bo mam ten błąd:

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

Czy istnieje jakiś sposób, aby umieścić danych MySQL do flot oprócz tego ?: część

php:

<?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 część:

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

Byłem googling .. bez powodzenia. Wydaje się dość proste, ale fabuła po prostu nie zrozumie dane ... albo coś ...

Wyjście pliku php jest następujący (dla dwóch wpisów przykładowo):

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

gdzie @ cnt jest licznikiem przyrostu osi X dla każdego wiersza (0,1,2,3 ...), a MAG to same dane do pokazania na osi Y.

jQuery używam to:

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

gdzie flot jest wersja 0.5 i przeglądarki Firefox.

Answer 1

Niech zgadnę: renderujesz w ukrytej zakładce. Nie znalazłem jeszcze tej poprawki, ale wygląda na to, że element div jest ukryty (np.display: none) przerywa flot, ponieważ nie może określić wymiarów elementu zastępczego div. Renderowanie na karcie domyślnie działa.

Pracuję nad tym samym problemem. Chcę mój wykres na drugiej karcie, z pierwszą zakładką zawierającą inne dane. Oto moje rozwiązanie:

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

A potem rzeczywiste wywołanie .plot() jest umieszczany wewnątrz funkcji show_graph().

Answer 2

Po prostu sprawdzam ... Dodałeś element zastępczy div, prawda?

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

Answer 3

Musisz przeczytać więcej dokumentacji Flota, dane serii, których Flot oczekuje, są w określonym formacie. Przynajmniej nie powinno być

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

Oto api: Flot API, pierwsza pozycja mówi format danych, wystarczy zmienić wyjście do spełnienia tych norm i powinno być w porządku.

Answer 4

Tak mam do czynienia z dokumentacją.

„Seria może być zarówno nieprzetworzone dane lub obiekt z właściwościami Surowa format danych jest tablicą punkty:

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

A w tym przykładzie:

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

nie ma potrzeby korzystania z etykietą:" etykieta służy do l egend, jeśli go nie określisz, seria nie pojawi się w legendzie. "

Zresztą JSON zakodowane dane zawierają nazwę dziedzinach oświadczenie MySQL tak powinno być jak etykiety ...

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

Answer 5

zmienić nazwę swojej zastępczego div do czegoś innego niż „zastępczy "?

Answer 6

Miałem ten sam problem. Dzięki Edebill za rozwiązanie. Być może jest to nowy, ale jquery tabs UI dokumentacyjne teraz wspomina ten problem i ma bardzo proste rozwiązanie za pomocą zmieniającego się położenia CSS: http://docs.jquery.com/UI/Tabs

zamiast ukrywania po prostu przenieść paneli z ekranu:

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