ＭＹＳＱＬのデータを動的にチャート表示させたいです。

json.htmlのDATAにjson.phpから受け取った値を入れたいのですが、どなたかご教授頂けないでしょうか？

chart_tbl
id,date(日付),start(始値),high(高値),low(低値),end(終値)

-------- json.php ----------

$dsn = 'mysql:dbname=rensai-comic-net00005;host=localhost;charset=utf8';

//ユーザ名
$user = 'user';

//パスワード
$password = 'password';

try
{
//nullで初期化
$users = null;

//DBに接続
$dbh = new PDO($dsn, $user, $password);

//'users' テーブルのデータを取得する
$sql = 'select * from chart';
$stmt = $dbh->query($sql);

//取得したデータを配列に格納
while ($row = $stmt->fetchObject())
{
    $users[] = array(

        'id'=> $row->id

        ,'date' => $row->date

        ,'start' => $row->start

        ,'high' => $row->high

        ,'low' => $row->low

        ,'end' => $row->end

        );
}

//JSON形式で出力する
header('Content-Type: application/json');
echo json_encode( $users );
exit;

}
catch (PDOException $e)
{
//例外処理
die('Error:' . $e->getMessage());
}
?>
-------- json.html ----------

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="http://rensai-comic.net/fx2/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="http://rensai-comic.net/fx2/jqplot.dateAxisRenderer.min.js"></script> <script language="javascript" type="text/javascript" src="http://rensai-comic.net/fx2/jqplot.ohlcRenderer.min.js"></script> <link rel="stylesheet" type="text/css" href="http://rensai-comic.net/fx2/jquery.jqplot.min.css" /> <script> $(document).ready(function() { /** * Ajax通信メソッド * @param type : HTTP通信の種類 * @param url : リクエスト送信先のURL * @param dataType : データの種類 */ $.ajax({ type: "POST", url: "json.php", dataType: "json", /** * Ajax通信が成功した場合に呼び出されるメソッド */ success: function(data, dataType) { //結果が0件の場合 if(data == null) alert('データが0件でした');

            //返ってきたデータの表示

//---------------------------------
jQuery . jqplot(
'jqPlot-sample',
[
//-----------------------------------------------------DATA（現在は生のデータ）
[
[ '2012-01-01 0:00AM', 62, 70, 57, 68 ],
[ '2012-02-01 0:00AM', 70, 83, 68, 76 ],
[ '2012-03-01 0:00AM', 75, 96, 72, 94 ],
[ '2012-04-01 0:00AM', 93, 95, 72, 84 ],
[ '2012-05-01 0:00AM', 85, 86, 67, 71 ],
[ '2012-06-01 0:00AM', 75, 88, 75, 82 ]
]
//-----------------------------------------------------DATA
],
{
seriesDefaults: {
renderer: jQuery . jqplot . OHLCRenderer,
rendererOptions: {
candleStick: true
}
},
axes:{
xaxis:{
renderer: jQuery . jqplot . DateAxisRenderer,
min: '2011-12-01 0:00AM',
max: '2012-08-01 0:00AM',
tickInterval: '1 months',
tickOptions:{
formatString: '%B'
},
}
},
}
);
//----------------------------------
},
/**
* Ajax通信が失敗場合に呼び出されるメソッド
*/
error: function(XMLHttpRequest, textStatus, errorThrown)
{
//エラーメッセージの表示
alert('Error : ' + errorThrown);
}
});
});
</script>

</head> <body> <div id="jqPlot-sample" style="height: 300px; width: 500px;"></div> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

ごめんなさい、どこでつまづいているかわからないので
ざっと一通り

呼び出し側：

<script>
var val;//受ける変数を用意しておいて
$.ajax({
type: 'GET', //データ受け渡しの仕組みに合わせる
url: 'json.php', //データをくれるphp
async: false, //同期処理
dataType: 'json', //データ型指定
data: {"value":1234}, //受け渡すデータ、なければ無視
success: function(ret){
  val=ret; //戻りデータを変数valに投入
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
  console.log( textStatus);
},
});
</script>

で、json.php側はjsonデータを出力時にシングルクォーテーションではなく
ダブルクォーテーションでくくらないとパースエラーになるかも

//json.php
[
[ "2012-01-01 0:00AM", 62, 70, 57, 68 ],
[ "2012-02-01 0:00AM", 70, 83, 68, 76 ],
[ "2012-03-01 0:00AM", 75, 96, 72, 94 ],
[ "2012-04-01 0:00AM", 93, 95, 72, 84 ],
[ "2012-05-01 0:00AM", 85, 86, 67, 71 ],
[ "2012-06-01 0:00AM", 75, 88, 75, 82 ]
]

あとはjqplot()の引数にvalを渡してやるだけ？

投稿2016/06/30 08:50

編集2016/06/30 09:05

yambejp

総合スコア114779

kikioya11

2016/06/30 11:39

ご教授有難うございます、①でechoすると [{"date":"2012-01-01 0:00AM","start":"62","high":"70","low":"57","end":"68"}, {"date":"2012-02-01 0:00AM","start":"70","high":"83","low":"68","end":"76"}] になってる様ですが、②の様にechoするにはどの様にすれば分かりません。初心者なので申し訳有りませんが、ご教授頂けるとありがたいです。 //取得したデータを配列に格納 while ($row = $stmt->fetchObject()) { $users[] = array( 'date' => $row->date ,'start' => $row->start ,'high' => $row->high ,'low' => $row->low ,'end' => $row->end ); } //JSON形式で出力する header('Content-Type: application/json'); ------------------------------------------- ①　 echo json_encode( $users ); exit; } ------------------------------------------ ② [ [ "2012-01-01 0:00AM", 62, 70, 57, 68 ], [ "2012-02-01 0:00AM", 70, 83, 68, 76 ], ] -------------------------------------------

yambejp

2016/07/01 00:21

while ($row = $stmt->fetchObject()) { $users[] = array($row->date,$row->start,$row->high,$row->low,$row->end); } として print json_encode($users); すればよいのでは？

kikioya11

2016/07/01 10:33

ご返信ありがとうございます！ 62, 70, 57, 68 にダブルクォーテーションが付かないようにしないと、うまく表示されないみたいです [ "2012-01-01 0:00AM", "62", "70", "57", "68" ] 　↓ダブルクォーテーションをとりたいです [ "2012-01-01 0:00AM", 62, 70, 57, 68 ] 初心者に丁寧に教えて頂いて本当に感謝しています！！！

yambejp

2016/07/01 12:11

>ダブルクォーテーションが付かないようにしないと、うまく表示されないああ、なるほど while ($row = $stmt->fetchObject()) { $users[] = array($row->date,(int) $row->start,(int) $row->high,(int) $row->low,(int) $row->end); } でどうでしょう？

kikioya11

2016/07/02 02:48

出来ましたっヽ(ﾟ´Д`)ﾉﾟ｡ﾔｯﾀｰﾝ♪　ありがとうございます！！！

行動規範の内容に同意します