2017-01-09 25 views
-1

d3.jsを使用して作成したグラフがあります。ここに月を移動すると、週ごとの得点が見つかります。私がここで話していますチャートへJSONをd3.jsファイルに変換

フィドルリンク:https://jsfiddle.net/qp7L1hob/1/

私はまた、あなたがここで見るweek.Whatごとに4個だけのためである私は、従業員の得点の記録を保持し、私のDB内のテーブルを持っています週 - (週1から週4)ですが、私のDBでは月のすべての週の記録があります。これは参照用です。

表pointsScored:ユーザーがログインした後 score が、私はロブがログインした場合はその人の関連scores.Letsが言うだけ表示したい、week1のための彼のスコアは47で、week2は44で、week3は44で、週4は43です。

問題:私はUsing php to extract jsonです。SQLからです。その下にPHPファイルがあります。

JSONd3.jsファイル、つまり上記のフィドルにどのようにして取得するのが問題なのですか。

助けてください。

jsonファイルは(data.phpとして名前、それをすることができます):私は、私は上記のd3.js file.But方法がわからないで、このdata.phpを含める必要があることを理解しています。私が理解できるように

<?php 
 
session_start(); 
 
$servername="xxxxxxx"; 
 
$connectioninfo=array('Database'=>'xxxxxx'); 
 
$conn=sqlsrv_connect($servername,$connectioninfo); 
 
if($conn) 
 
{ 
 
echo 'connection established'; 
 

 
} 
 
else 
 
{ 
 
echo 'connection failure'; 
 
die(print_r(sqlsrv_errors(),TRUE)); 
 
} 
 

 
$q1="SELECT WeekNumber,pointsRewarded,EmployeeID FROM pointsBadgeTable WHERE EmployeeID = '" . $_SESSION['id'] . "' "; 
 
$stmt=sqlsrv_query($conn,$q1); 
 
if($stmt==false) 
 
{ 
 
echo 'error to retrieve info !! <br/>'; 
 
die(print_r(sqlsrv_errors(),TRUE)); 
 
} 
 
do { 
 
    while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){ 
 
     $result[] = $row; 
 
    } 
 
} while (sqlsrv_next_result($stmt)); 
 

 

 
sqlsrv_free_stmt($stmt); 
 
sqlsrv_close($conn); //Close the connnectiokn first 
 
echo json_encode($result); //You will get the encoded array variable 
 
?>

+1

のようなJavaScript変数にデータをエコーすることができます。データをD3.js.よく見れば、ツールヒント(週情報)を表示するときに配列 'dataWeeks'を参照しています。これを行う1つの方法は、最初に配列に値を設定してグラフを生成することです。 dataWeek(エンドポイントからのデータで満たされている)を生成関数に渡します。 –

+0

@FarooqKhan入力してくれてありがとう。私はd3.jsを初めて使用しているので、ここでデータウィンドウを関数に渡すための助けが必要ではありません。データは動的ですが、配列を取り込むことはできません。しかし、変数をjsonからデータウィークにエコーすることは可能です。どうしますか? – jane

答えて

1

私はあなたに理解するための方向性を与えてみましょう、あなたはデータ

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     var dataObj = JSON.parse(response.responseText); // parse data into JSON object 
     chartDrawFunction(dataObj); // call draw here, to load chart only when you have data 

    } 
}; 
xhttp.open("GET", "data-url-to-be-passed", true); // pass the URL here 
xhttp.send(); 

更新

をあなたのPHPファイルを呼び出して取得するためにAJAXを使用することができますPHPファイルがビューから分離されていれば別の方法で質問してください。ビューでは、

var data = <?php echo data; ?>; 
+0

ここでd3.jsファイルでAjax呼び出しを行う理由 – jane

+0

データベースからデータを取得する方法を教えてください。 –

+0

私は上記のコードを使用してDBからjsonとしてデータを取得しています。私はちょうどd3.jsのデータをエコーする必要があります。 – jane