MYSQLからjqueryへのグラフFLOT

Question

素晴らしいグラフを描画するためにjqueryのflotが見つかりました。しかし、私はMYSQLから表現したいデータを解析することはできません。私はこのエラーが出るので、それは狂気私を運転です：

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

が、このから離れてFLOTにMySQLのデータを配置する方法はあります？：

PHPの一部：

javascriptの一部

<?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'; 
?> 

：

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

私はグーグルで成功しませんでした。かなりシンプルなようだが、プロットは、単にデータ...か何か...（例えば2つのエントリのために）次のようにPHPファイルの出力がある

理解できないだろう。

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

@ cntは各行（0,1,2,3 ...）のx軸のインクリメントのカウンタで、MAGはy軸に表示するデータそのものです。

私が使用しているjQueryのは、次のとおりです。FLOTは、バージョン0.5とブラウザのFirefoxで

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

。

Answer 1

私は推測してみましょう：あなたは隠しタブでレンダリングしています。私はそれの修正をまだ見つけていないが、divを隠しているように見える。display：none）は、プレースホルダdivのサイズを判断できないためflotを破棄します。デフォルトで表示されるタブのレンダリングが機能します。

私は同じ問題に取り組んでいます。 2番目のタブにグラフを表示し、最初のタブに他のデータを保存します。

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

そして、実際の呼び出しは、（.PLOTする）show_graph（）関数内で置かれる：ここに私のソリューションです。

Answer 2

ちょうど確認しています...プレースホルダdivを含めましたか？

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

Answer 3

さらにFlotのドキュメントを読む必要があります.Flotが期待するシリーズデータは特定の形式です。非常に少なくとも、あなたはここで

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

は、APIである必要があります：Flot API、最初の項目は、データ形式は、単にこれらの基準を満たすために、あなたは問題ないはずですが、出力を変更する、と言います。

Answer 4

うんiが文書を扱ってきた。

「シリーズは、生データまたはプロパティを持つオブジェクトのいずれかとすることができる生 データフォーマットは点の配列である：。

[[X1、 Y1]、[X2、Y2]、...] "

そして、この例では：

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

ラベルを使用する必要はありません：" ラベルがLのために使用されていますegend、指定しなければ、シリーズは凡例に表示されません。それはラベルのようにする必要がありますので

とにかく、JSONエンコードされたデータは... MYSQLステートメントのフィールドの名前が含まれて

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

Answer 5

変更プレースホルダ「以外の何かにあなたのプレースホルダdiv要素の名前'？

Answer 6

私は同じ問題を抱えていました。ソリューションのために感謝edebill。おそらく、これは新しいですが、jQueryのUIのタブのドキュメントサイトは現在、この問題に言及し、変更するCSSの位置を経由して、非常に簡単な解決策があります。 http://docs.jquery.com/UI/Tabs

ではなく、あなただけの画面の外のパネルを移動隠し：

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

を