2011-12-22 11 views
0

私はJavaScriptに問題があります。現在、私はこのjavascriptを使ってグラフを生成しています。最初にphpでmysqlからデータを抽出し、json_encodeを使用してjavascriptで使用される配列データを出力します。なぜ自分のグラフがプロットしていないのか、私の間違いを見つけ出すことができません。ありがとう!flotとmysqlを使ったphp/html

<?php 
include ('config2.php'); 
$tbl_name4 = EITMBS; 
$data = array(); 
    $sql="SELECT * FROM $tbl_name4"; 
    $result=mysqli_query($link, $sql); 
    $row_cnt = mysqli_num_rows($result); 
    for ($nrow = 1; $nrow <= $row_cnt; $nrow=$nrow+1) 
{ 

    $sql="SELECT * FROM $tbl_name4 WHERE id = '$nrow'"; 
    $result=mysqli_query($link, $sql); 
    $row = mysqli_fetch_array($result); 
    $data[$nrow] = $row[Power]; 
    echo $data[1]; 
    echo $data[2]; 
} 

?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Power Consumption</title> 
    <link href="layout.css" rel="stylesheet" type="text/css"> 
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="../jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> 
</head> 
    <body> 
    <h1>Power Consumption</h1> 

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


    <p id="hoverdata">Mouse hovers at 
    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p> 

    <p>A tooltip is easy to build with a bit of jQuery code and the 
    data returned from the plot.</p> 

    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p> 




<script type="text/javascript"> 


$(function() { 
    var graph = []; 
    var power = <?php echo json_encode($data);?>; 


    for (var i = 1; i < 9; i += 1) { 

     //alert(power[i]); 
     graph([i,[power(i)]); 

    } 

    var plot = $.plot($("#placeholder"), 
      [ { data: graph, label: "cos(x)" } ], { 
       series: { 
        lines: { show: true }, 
        points: { show: true } 
       }, 
       grid: { hoverable: true, clickable: true }, 
       yaxis: { min: 0, max: 25 } 
      }); 

    function showTooltip(x, y, contents) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y + 5, 
      left: x + 5, 
      border: '1px solid #fdd', 
      padding: '2px', 
      'background-color': '#fee', 
      opacity: 0.80 
     }).appendTo("body").fadeIn(200); 
    } 

    var previousPoint = null; 
    $("#placeholder").bind("plothover", function (event, pos, item) { 
     $("#x").text(pos.x.toFixed(2)); 
     $("#y").text(pos.y.toFixed(2)); 

     if ($("#enableTooltip:checked").length > 0) { 
      if (item) { 
       if (previousPoint != item.dataIndex) { 
        previousPoint = item.dataIndex; 

        $("#tooltip").remove(); 
        var x = item.datapoint[0].toFixed(2), 
         y = item.datapoint[1].toFixed(2); 

        showTooltip(item.pageX, item.pageY, 
           item.series.label + " of " + x + " = " + y); 
       } 
      } 
      else { 
       $("#tooltip").remove(); 
       previousPoint = null;    
      } 
     } 
    }); 

    $("#placeholder").bind("plotclick", function (event, pos, item) { 
     if (item) { 
      $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + "."); 
      plot.highlight(item.series, item.datapoint); 
     } 
    }); 
}); 
</script> 

</body> 
</html> 
+0

はあなたがここに放火魔/ビューのソースを使用してみましたが、それはあなたのデシベル出力が何であるかを示すのはかなり良いことだし、問題がどこにあるかそれから、それは通常明らかです。..おそらくあなたはhtmlでレンダリングできますか?私はまたあなたの選択*であなたのforループに少し慎重になるでしょう、私もあなたのループで少し混乱していますとにかく、選択肢を2回やっていることは少し意味がないようです。 – ChelseaStats

+0

'var power = <?php echo json_encode($ data);?>;'の後に 'alert(power.toSource());'という行を挿入して、firefox(またはgeckoベースのブラウザ)これは、電源に格納しているオブジェクトのフォーマットを出力します。 –

+0

こんにちは、お返事ありがとうございます。私はどのデータが出力されているかを私に知らせるためにalert()を使っていました。しかし、私のグラフは空白のままです。火かき棒とは何ですか? – Eugene

答えて

2

はあなたの変数var powerは、文字列形式のキーと浮動小数点数のための整数のオブジェクトが含まれています。データベースに間違ったデータ型が適用されている可能性があります(mysqlの場合はFLOATを使用する必要があります)。

あなたは5.3.3+あなたが番号を確認するには、次を使用することができますPHPを使用している場合は、JSONエンコードされた文字列に数字形式で保存されます。あなたのJSONエンコードする前に、配列を

json_encode($data, JSON_NUMERIC_CHECK); 

あなたができない場合は、サイクルそれ:

for ($i in $data) { 
    $data[$i] = (float) $data[$i]; 
} 

第2に、jsonエンコードされたオブジェクトを誤って配列に変換しています。変更:へ

graph([i,[power(i)]); 

graph.push([i, power[i]]); 
+0

ありがとうございました。 – Eugene

関連する問題