カテゴリー
Ajax D3.js Javascript ただの現状記述 (Daily Activities) インターネット一般 (Internet General) プログラミング (Programming)

大分と理解が進んできたぞーっ

朝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を開く と、以下のグラフが描画されます

DBから読み取り描かれたグラフ
DBから読み取り描かれたグラフ

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

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

その話はまたね

作成者: (KAMAKURA & SAPPORO)Dr_Radialist

Expert Interventional Cardiologist and Amateur Computer Programmer.

Winner for Master Clinical Operator Award in TCT 2019.
Winner for Ethica Award in EuroPCR 2015.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です