投票結果のグラフ表示
#11 投票結果を表示しよう (1)
http://dotinstall.com/lessons/poll_php_v2/9711
を参考に、投票された結果をグラフ表示していくため
データを抽出する
index.php の
</form>
の下に
<p><a href=”result.php”>結果をみる</a></p>
を追記して
新たに
result.php を作成する
そして、戻るボタンを設置したいので
<p><a href=”index.php”>戻る</a></p>
を追記
投票結果の表示のためDBからデータを引っ張ってくる必要があるので
$dbh = connectDb();
この connectDb() は、functions.php で定義した
ユーザ関数
$sql =”select answer, count(id) as count from ansers group by answer”;
としてSQLを $sql に格納
Google Chart Toolsで引っ張ってくるデータはJSON形式
次に、配列を作成
$rows = array();
これは foreach() で使用する
foreach($dbh->query($sql) as $row){
array_push($rows, array());
}
という処理になる
次に、
#12 投票結果を表示しよう (2)
http://dotinstall.com/lessons/poll_php_v2/9712
を参考に
Google Chart Toolsを使い、投票結果をグラフ表示
Google Chart ToolsはJSON形式なので
array($row[‘answer’], (int)$row[(count’]))
というような書き方になる
ちなみに、count のほうは int でないとまずいので
(int) として int 型にしている
そして、
json_encode()で
$rows をJSON形式の文字列に変更する
$data = json_encode($rows);
json_encode() については
http://php.plus-server.net/function.json-encode.html
を参考にする
値が格納されているか確認したいのなら
var_dump($data);
とすれば
確認できる
確認できたら、
var_dump() はコメントアウトしておく
ここまで確認できたら、グラフを描いていく
まず、
<div id=”chart_div”>グラフを詠み込み中 </div>
として
表示領域を div で指定
そして、 script タグで Google Chart Tools のライブラリを読み込む
<script src=”https://www.google.com/jsapi”></script>
ライブラリを読み込んだら
script タグへ
グラフを描く処理を追記
google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});
はほぼ決まり文句
google.setOnLoadCallback(drawChart);
function drawChart() {
}
で、この drawChart() {} の中に詳細設定をしていく
ここからは
#13 投票結果を表示しよう (3)
http://dotinstall.com/lessons/poll_php_v2/9713
を参考に、グラフ表示と動作確認をしていく
なお、グラフ作成に使用している
Google Chart Tools に関しては
http://dotinstall.com/lessons/basic_chart_tools
で学習することができる
この編集するファイルは results.php になる
処理は
function drawChart() {} の中に描いていく
var data= new google.visualization.DataTable();
次に、data.addCulumn()
でデータのカラムを設定する
data.addColumn(‘string’,’answer’);
data.addColumn(‘number’,’票数’);
data.addRows(<?php echo $data; ?>);
そして、グラフのオプションを指定する
var options ={
‘title’:’投票結果’,
‘width’:400,
‘height’:300
}
そして、実際にグラフを作成
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
この chart_div はHTMLソースで指定した div の id
char.draw(data,options);
これで実行してみると、円グラフが表示されるようになる