カテゴリー: D3.js

朝6:00AM前に起床し、新古賀病院にPCIで訪問するまでの　そうですね実質 1.5時間ぐらい懸案のプログラミングに挑みました

必要要件としては

1. サーバー側のデータベースから施設あたり登録症例数を取得する
2. 取得したデータを JSON(JavaScript Object Notation)形式でクライアントに ajax通信する
3. クライアント側では ajax通信により JSON形式データを取得する
4. 取得した JSON形式データを加工する
5. それをグラフとして出力する

というものです　まずは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を開く　と、以下のグラフが描画されます

これて見栄えは良くありませんが、とりあえずきちんと意図通りに作動するグラフが、SQL, HTML, Javascript, D3.jsを用いて描くことができました

ちなみに、一番重要な基幹技術は SVGなのです　SVGというのは Scalable Vector Graphicsの頭文字ですが、その言葉通りに、 scaleできる == サイズを自由に変えることができる　ベクトル化された描画　というものであり、HTML5の最新の技術なのです　これが今使用されているブラウザで用いることができるようになり世界が変わったのですよっ

その話はまたね