2016-05-07 3 views
1

まだajaxとJqueryの初心者ですが、c3.jsを使ってグラフィックベースでデータベースを表示しますが、javascript変数に私のajaxレスポンスを使用できません。これはresponse.phpajaxレスポンスの変数をjsonとして使用する

[{"time":"2014-05-20 17:25:00","sensor1":"25","sensor2":"20","sensor3":"31","sensor4":"33","sensor5":"27"},{"time":"2014-05-20 17:26:00","sensor1":"26","sensor2":"23","sensor3":"33","sensor4":"31","sensor5":"23"}] 

からの私のJSONレスポンスであり、これは私のresponse.php

<?php 
$dbhost = "localhost"; 
$dbuser = "root"; 
$dbpass = ""; 
$dbname = "perkebunan"; 

//Connect to MySQL Server 
$server = mysql_connect($dbhost, $dbuser, $dbpass); 

//Select Database 
mysql_select_db($dbname, $server) or die(mysql_error()); 
//build query 
$query = "SELECT * FROM sensor";  
//Execute query 
$qry_result = mysql_query($query) or die(mysql_error()); 
$results = array(); 
while($row = mysql_fetch_assoc($qry_result)) 
{ 
    $temp = array(
     'time' => $row['time'], 
     'sensor1' => $row['sensor1'], 
     'sensor2' => $row['sensor2'], 
     'sensor3' => $row['sensor3'], 
     'sensor4' => $row['sensor4'], 
     'sensor5' => $row['sensor5'] 
    ); 
    array_push($results,$temp); 
} 
echo json_encode($results); 
?> 

であり、これは私のデータベース

my database

ある ようにするために私を助けてください

javascriptで私のjson応答をvaribleに変換します。この私の試行index.phpそれをポーズ可能にする。

<html> 
<head> 
    <!-- Load c3.css --> 
    <link href="c3/c3.css" rel="stylesheet" type="text/css"> 
    <!-- Load d3.js and c3.js --> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="c3/c3.js"></script> 
    <script src="jquery-2.2.3.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
</head> 
<body> 
    <div id="chart"></div> 
<script language="javascript" type="text/javascript"> 
function graphAjax(){ 
    var response; 
    $.ajax({ 
     type : 'POST', 
     url : 'ajax-example.php', 
     dataType : 'json', 
     data: { }, 
     success: function(data){ 
      response=data; 
     } 
    }); 
    var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     json: {response 
      /* I hope this variable response give result like this 
      time: [2014-05-20 17:25:00, 2014-05-20 17:26:00, 2014-05-20 17:27:00, 2014-05-20 17:28:00, 2014-05-20 17:29:00], 
      sensor1: [25, 26, 27, 28, 29], 
      sensor2: [20, 23, 22, 25, 28], 
      sensor3: [31, 33, 35, 30, 33], 
      sensor4: [33, 31, 28, 25, 27], 
      sensor5: [27, 23, 21, 19, 18], 
      */ 
     } 
    } 
    }); 
} 
</script> 

    <input type='button' onclick='graphAjax()' value='Start'/> 
</body> 
<footer> 
</footer> 
</html> 

ご協力いただきありがとうございます。

答えて

0

AJAXは非同期的に動作するので、何らかの回避策が必要です。たとえば、あなたはsuccessコールバック関数の中で、あなたのチャートを生成する関数を移動(および

success: function(data){ 
      response=data; 
      // generate chart here 
     }, 
error: function() { 
      // do something 
     }, 

チェックもthis extensive answerHow do I return the response from an asynchronous call?への追加エラーが発生した場合に何が起こるかを定義する)またはHow to get the ajax response from success and assign it in a variable using jQuery?をすることができます。

+0

ようこそ、ありがとうございました。グラフが表示されます – Manyang

関連する問題