[PHP][CakePHP][pChart][Ajax]Selectで選択させて表を切り替える

プルダウンメニューを表示し、選択を切り替えるとそれに該当するユーザのテスト結果のみを表・グラフで表示するようにする。
index.ctp に以下を追加する。

<?php
echo $form->create('user_id');
echo $form->input('user_id', array('options' => array(1, 2, 3)));
echo $form->end();
?>
<div id="result">ここに結果がdiv><br>
<?php
echo $ajax->observeField('user_id',
array(
'url' => array('action' => 'exam_table_graph'),
'frequency' => 0.2,
'update' => 'result'));
?>

index.ctp から Ajax 経由で呼び出される exam_table_graph.ctp を準備する。

<body>
<table border="1">
<tr>
<th>IDth>
<th>user_idth>
<th>Dateth>
<th>mathth>
<th>englishth>
<th>physicsth>
tr>
<?php
foreach ($exams as $exam) {
echo "\n";
echo "" . $exam['Exam']['id']; "\n";
echo "" . $exam['Exam']['user_id']; "\n";
echo "" . $exam['Exam']['date']; "\n";
echo "" . $exam['Exam']['math']; "\n";
echo "" . $exam['Exam']['english']; "\n";
echo "" . $exam['Exam']['physics']; "\n";
echo "\n";
}
?>
table>

<?php
echo '<img src="' . $graph_path . '"><br>';
?>

body>

exams_controller.php に以下を追加する。

function exam_table_graph() {
$user_id = $this->data['user_id'] + 1;
$conditions = array('user_id' => $user_id);
$order = 'date';
$exams = $this->Exam->find('all',
array('conditions' => $conditions,
'order' => $order));
$this->set('exams', $exams);
$graph_path = './exam_graph/' . $user_id;
$this->set('graph_path', $graph_path);
Cache::write('exams' . $user_id, $exams);
}

function exam_graph($id=null) {
if (!$id) {
$id = 1;
}
$user_id = $id;

/* Cache に保存された値を読み込む */
$exams = Cache::read('exams' . $user_id);
if ($exams == false) {
$conditions = array('user_id' => $user_id);
$order = 'date';
$exams = $this->Exam->find('all',
array('conditions' => $conditions,
'order' => $order));
}
else {
Cache::delete('exams' . $user_id);
}

/* pChart を使用する */
App::import('Vendor', 'pchart/pdata');
App::import('Vendor', 'pchart/pchart');

$font_path = "c:\Windows\Fonts\sazanami-gothic.ttf";

$y1data = array();
$a = array();

foreach ($exams as $exam) {
array_push($y1data, $exam['Exam']['math']);
array_push($a, $exam['Exam']['date']);
}

$data = new pData;
$data->AddPoint($y1data, "math");
$data->AddPoint($a, "date");
$data->AddSerie("math");
$data->SetAbsciseLabelSerie("date");
$data->SetSerieName("数学", "math");

$chart = new pChart(400, 230);
$chart->setFontProperties($font_path,8);
$chart->setGraphArea(50, 30, 380, 200);

/* グラフに背景色をつける */
$chart->drawFilledRoundedRectangle(7,7,393,223,5,240,240,240);

/* グラフ背景に縁をつける */
$chart->drawRoundedRectangle(5,5,395,225,5,230,230,230);

/* グラフ領域に背景色をつける */
$chart->drawGraphArea(255,255,255,TRUE);

$chart->drawScale($data->GetData(),$data->GetDataDescription(),SCALE_START0,150,150,150,TRUE,0,2,TRUE);

/* グリッド線を表示する */
$chart->drawGrid(4,TRUE,230,230,230,50);

/* chart に data を配置しグラフを描く */
/* 棒グラフの場合は drawBarGraph */
$chart->drawBarGraph($data->GetData(), $data->GetDataDescription(), TRUE);

/* 凡例を追加する */
$chart->setFontProperties($font_path,8);
$chart->drawLegend(596,150,$data->GetDataDescription(),255,255,255);

/* グラフタイトルを追加する */
$chart->setFontProperties($font_path,10);
$chart->drawTitle(50,22,"数学のテスト結果",50,50,50,585);

/* 画像として出力する */
$chart->Stroke();
}