朝6:00AM前に起床し、新古賀病院にPCIで訪問するまでの そうですね実質 1.5時間ぐらい懸案のプログラミングに挑みました
必要要件としては
- サーバー側のデータベースから施設あたり登録症例数を取得する
- 取得したデータを JSON(JavaScript Object Notation)形式でクライアントに ajax通信する
- クライアント側では ajax通信により JSON形式データを取得する
- 取得した JSON形式データを加工する
- それをグラフとして出力する
というものです まずは1.ですね ここは MySQL database serverに対して SQL文で問い合わせを行います 具体的には
try {
// MySQLサーバへ接続
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8", $db_user, $db_password);
} catch(PDOException $e){
die($e->getMessage());
}
$sql = "SELECT `hp_tbl_id` as `ID`, COUNT(*) as `ENROLL` FROM `pt_tbls` GROUP BY `hp_tbl_id`;";
$stmt = $pdo->query($sql);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
これは、SELECT `hp_tbl_id` as `ID`, COUNT(*) as `ENROLL` FROM `pt_tbls` GROUP BY `hp_tbl_id`; という SQL文により、MySQLに対して、`hp_tbl_id`毎にカウントした数を数えさせているのです
そして、その結果は、$rowsという配列オブジェクトに格納されます しかし、ここでのプログラミング言語は PHPですので、これを JSON形式に変換しないと、その後のデータ処理ができませんので
$json = json_encode($rows);
header('Content-type: application/json; charset=UTF-8');
echo($json);
exit;
によって、$rowsという php配列オブジェクトを JSONに変換しています そして、 echo($json); という文により、JSON形式のオブジェクトがクライアントに対して通信されているのです ここまでを行うプログラムはサーバー側のものであり、言語は PHPを用いています このプログラム・ファイルを get_each_h_enroll.php としました
次に、これを取得する方のプログラムですが、これはクライアント側のものであり、あくまでも htmlで書かれています ここではファイル名を each_hp_enroll.htmlとしました
ここでのキモは、d3.jsにより JSONデータ取得の ajax通信です それが
d3.json("get_each_hp_enroll.php", function(dataSet){
var dataE = [];
for (var key in dataSet) {
dataE.push(dataSet[key].ENROLL);
}
というものなのですが、d3.jsで定義されたJSON読み込み関数に従って、get_each_hp_enroll.phpより Ajax通信で渡された JSONデータを dataSetというオブジェクトに読み込みました
そして、それの中からデータとして使用する部分 – ここでは登録症例数 == ENROLLを配列 dataEに入れ込んでいます
後は、このdataEをもちいてグラフを描くだけですが、ここでは d3.jsの強力なデータ描画機能を用いるのです そのために、描画部分も d3という名前空間の中に閉じ込められています 従って さっきの部分も含めると
d3.json("get_each_hp_enroll.php", function(dataSet){
var dataE = [];
for (var key in dataSet) {
dataE.push(dataSet[key].ENROLL);
}
d3.select("#myGraph")
.selectAll("rect")
.data(dataE)
.enter()
.append("rect")
.attr("class", "bar")
.attr("width", function(d, i) {
return d;
})
.attr("height", 20)
.attr("x", 0)
.attr("y", function(d, i) {
return i*25;
})
});
ということになります
これを実行する = ブラウザで each_hp_enroll.htmlを開く と、以下のグラフが描画されます
DBから読み取り描かれたグラフ
これて見栄えは良くありませんが、とりあえずきちんと意図通りに作動するグラフが、SQL, HTML, Javascript, D3.jsを用いて描くことができました
ちなみに、一番重要な基幹技術は SVGなのです SVGというのは Scalable Vector Graphicsの頭文字ですが、その言葉通りに、 scaleできる == サイズを自由に変えることができる ベクトル化された描画 というものであり、HTML5の最新の技術なのです これが今使用されているブラウザで用いることができるようになり世界が変わったのですよっ
その話はまたね