SimpleGraph

サンドボックスについて

SimpleGraphをスムーズに体験して頂くために、Sandboxを用意しております。
ダウンロードしたzipファイルを解凍すると「SimpleGraph_Sandbox」がありますので、Windows環境の方はローカルにWA(M)P環境を、Linux環境の方はローカルにLA(M)P環境を構築して頂き、Apacheのドキュメントルートに、解凍した「SimpleGraph_Sandbox」を配置してください。
※MySQLなどのデータベースは必要ありません。ローカルでApache、PHPが動作する環境を構築してください。

そして、WEBブラウザを起動して、「http://localhost/SimpleGraph_Sandbox/」をロケーションバーに入力して閲覧してください。
SimpleGraphで生成したグラフイメージが2つ見えるはずです。一方は「imgタグのsrc属性指定でのグラフ生成例」で、他方は「ajaxでのグラフ生成例」です。 以下にSandboxのコードの説明をしながら、SimpleGraphの使用法をご説明していきます。

【SandBox構成】
/┳css
 ┣graph　※SimpleGraphライブラリ本体
　　　┣font
　　　┣BarGraph.class.php
　　　┣CircleGraph.class.php
　　　┣Graph.class.php
　　　┣GraphBuilder.class.php
　　　┣LineGraph.class.php
 ┣index.html　※Sandbox内での表示ファイル
 ┣make_graph_image.php　※「imgタグのsrc属性指定でのグラフ生成例」でグラフイメージを生成するファイル
 ┣send_graph_image.php　※「ajaxでのグラフ生成例」でグラフイメージを生成するファイル

Sandbox内の「graph」フォルダが、SimpleGraphライブラリ本体となります。
実際にSimpleGraphを使用する際は、この「graph」フォルダをWEBシステム・アプリケーション内の任意のディレクトリに配置して、 グラフ生成クラスを利用します。

SimpleGraph本体となる「graph」フォルダ内の構成は以下になります。
①GraphBuilder.class.php　※グラフオブジェクト生成のfactoryメソッドを提供するクラス
②Graph.class.php　※SimpleGraphライブラリ基底クラス
③BarGraph.class.php　※棒グラフ生成クラス
④CircleGraph.class.php　※円グラフ生成クラス
⑤LineGraph.class.php　※折れ線グラフ生成クラス
⑥font　※SimpleGraphで使用するフォント格納ディレクトリ

クイックスタート（imgタグのsrc属性指定でのグラフ生成例）

「imgタグのsrc属性指定でグラフ生成する例」をご説明してきます。

まず、「index.html」のソースコードは以下のようになっています。

【index.html】
<h3>imgタグのsrc属性指定でのグラフ生成例</h3>
<img src="make_graph_image.php?とても良かったです=25&良かったです=59&普通=158
&悪かった=25&とても悪かった=12">

imgタグのsrc属性に、グラフイメージを生成するファイルである「make_graph_image.php」を、クエリパラメータにグラフデータを付けて指定しています。

次に、実際にグラフイメージを生成して、クライアント（ブラウザ）に返却する「make_graph_image.php」のソースコードを見てみましょう。

【make_graph_image.php】
<?php
// グラフライブラリ ビルダークラスのインクルード
require_once './graph/GraphBuilder.class.php';

// グラフデータの取得
$data = array();
foreach ($_GET as $key => $value) {
	$data[$key] = $value;
}

// グラフオブジェクトの生成
$graph = GraphBuilder::factory('BarGraph', $data, 'jpeg');
//$graph = GraphBuilder::factory('CircleGraph', $data, 'jpeg');
//$graph = GraphBuilder::factory('LineGraph', $data, 'jpeg');

// グラフイメージの出力
$graph->flush();
?>

まず、①SimpleGraph本体の「graph」フォルダ内にある「GraphBuilder.class.php」をインクルードします。
「GraphBuilder.class.php」はグラフ生成のためのグラフオブジェクトを生成するためのfactoryメソッドを提供します。
次に、②「index.html」から送られてきたクエリパラメータ(GETパラメータ)を取得して、配列として整形します。
ソースコード内の「$data」は、実際にグラフに表示するデータとなり、以下の対応となります。

$key : [データ項目]
$value : [データの値]

そして、③グラフ生成オブジェクトをfactoryメソッドを使用して生成します。
その際、引数として以下のパラメータを渡します。

第1引数 : グラフタイプ
第2引数 : グラフデータ（連想配列）
第3引数 : グラフ生成のMIMEタイプ

＜グラフタイプ＞
SimpleGraphでは、現在以下のグラフタイプに対応しています。
(1)棒グラフ : 'BarGraph'
(2)円グラフ : 'CircleGraph'
(3)折れ線グラフ : 'LineGraph'

＜グラフデータ＞
実際に表示するグラフデータは、上記で示したように、①データ項目、②データの値をペアとした連想配列として渡す必要があります。

＜グラフ生成のMIMEタイプ＞
SimpleGraphでは、現在以下のMIMEタイプに対応しています。
(1)png
(2)jpeg
(3)gif
なお、MIMEタイプを省略した場合は、デフォルトのMIMEタイプとしてpngが出力されます。

最後に、④flushメソッドをコールして、グラフイメージを出力します。
SimpleGraphで提供されているflushメソッドは、png・jpeg・gifイメージを出力するメソッドです。
生成したグラフイメージをクライアントに返却するには、このflushメソッドをグラフ生成処理を記述したPHPファイルの最後にコールします。

クイックスタート（Ajaxでのグラフ生成例）

次に、「ajaxでのグラフ生成例」について説明をしていきます。

「index.html」のソースコードは、以下のようになっています。

【scriptタグ】
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var url = './send_graph_image.php';
// 棒グラフ・円グラフ用
var dataObj = {
		'とても良かったです' : 25,
		'良かったです' : 59,
		'普通' : 158,
		'悪かった' : 25,
		'とても悪かった' : 12
};

// 折れ線グラフ用
/*
var dataObj = {
		'1965' : 3,
 		'1970' : 5,
 		'1975' : 36,
 		'1980' : 25,
 		'1985' : 10,
 		'1990' : 25,
 		'1995' : 59,
 		'2000' : 158,
 		'2005' : 25,
 		'2010' : 12
};
*/

// ajax通信でグラフイメージ(base64エンコード)を取得する
$.ajax({
	url: url,
	dataType: 'text',
	data: dataObj,
	success: function(data){
		setGraphImage(data);
	}
});

function setGraphImage(data)
{
	var imgTag = '<img src="data:image/jpeg;base64,' + data + '">';
	$('#graph').html(imgTag);
}
</script>

【HTML】
<h3>ajaxでのグラフ生成例</h3>
<div id="graph"></div>

まず、scriptタグでは、jQueryを読み込んでいます。これは、ajax通信の実装を簡略化するためです。
ajax通信で送信するグラフデータを、dataObjとして用意します。
このグラフデータの生成部分を変更することで、様々なUIを実装できます。
ajax通信のdataプロパティーにdataObjをセットすることで、オブジェクトがクエリー文字列に変換されてGETリクエストとして付加されます。
ajax通信のレスポンス（data）を、setGraphImage関数にて、imgタグのsrc属性にセットして、div#graph要素のコンテンツとして書き込みます。
※この段階で、生成したグラフイメージが表示されます。
※jQueryのajax通信に関する詳細な解説は、他のサイトを参照してください。
※プレーンなJavaScriptで、XMLHttpRequestオブジェクトを使用した実装をする場合も、上記説明にならって実装をしてください。

次に、ajax通信のサーバサイドプログラムとなる「send_graph_image.php」の説明を致します。

<?php
// グラフライブラリクラスのビルダーのインクルード
require_once './graph/GraphBuilder.class.php';

// グラフデータの取得
$data = array();
foreach ($_GET as $key => $value) {
	$data[$key] = $value; 
}

//$graph = GraphBuilder::factory('BarGraph', $data, 'jpeg');
$graph = GraphBuilder::factory('CircleGraph', $data, 'jpeg');
//$graph = GraphBuilder::factory('LineGraph', $data, 'jpeg');

// グラフイメージを取得・base64エンコードして出力
$graphImage = $graph->fetch();
echo base64_encode($graphImage);
?>

まず、①SimpleGraph本体の「graph」フォルダ内にある「GraphBuilder.class.php」をインクルードします。
次に、②「index.html」から送られてきたクエリパラメータ(GETパラメータ)を取得して、配列として整形します。
ソースコード内の「$data」は、実際にグラフに表示するデータとなります。
そして、③fetchメソッドでグラフイメージを取得して、④flushメソッドをコールし、グラフイメージをブラウザに出力します。
※出力をbase64エンコードするのは、imgタグにイメージコードを直接記述するために必要となるからです。