あかつきのお宿

と、いうわけで、前回の記事で宣言した通り、実際にグラフを作成してみましょう。

まあ、そんなに複雑なグラフは書きやせん。基本的な折れ線グラフを2つほど作成してみたいと思います。

まずは普通の折れ線グラフを

こまけぇこたぁ抜きにして、とりあえず出力してみましょう。

今回はサンプル用のphpファイルを用意してみましたので、出力結果についてはそちらを見てみてください。

まあ、ぶっちゃけソースに関してはこちらのサイトさんのサンプルのほぼ丸パクリです。

require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_line.php');

// Some (random) data
$ydata = array(11,3,8,12,5,1,9,13,5,7);
$ydata2 = array(1,19,15,7,22,14,5,9,21,13);

// Setup the graph
$graph = new Graph(900,400);
$graph->SetScale("textlin");

$graph->SetBox(false);

$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);

$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xgrid->SetColor('#e3e3e3');

// Create the line
$lineplot1 = new LinePlot($ydata);
$lineplot2 = new LinePlot($ydata2);

// Create the line
$graph->Add($lineplot1);
$graph->Add($lineplot2);

// Output line
$graph->Stroke();

出力結果

とりあえず、こんな感じで折れ線グラフは描画できます。

基本的にやっていることは、グラフにしたいデータの入力と、X軸やY軸に関する設定、あとはグラフのタイトルとかの設定ですかね。

iframeを使って読み込む

さて、この前もお話したように、そして実際に上の出力結果のページを見れば分かる通り、このphpファイルでは単純に画像が表示されただけの状態になってます。

例えばの話、上のサンプルソースの下に何かしらのHTMLコードを書いても、それらはブラウザ上に出力されません。

でも、ページの真ん中に作成した画像を表示したい場合だって、あるかもしれないですよね。

そこでどうしようかってことで、今回僕が取った作戦が『iframeで読み込む』でごぜーやす。

簡単にいえば、適当なhtmlファイルを用意して、その中で遅延的にline_graph.phpを読み込むってことですね。

といっても、別に難しいことはありません。必要なソースはこれだけです。

<iframe id="graphFrame" name="graphFrame" width="900" height="400" scrolling="no" frameborder="0" src="http://norm-nois.com/reference/line_graph.php"></iframe>

とりあえずこれで、iframe内に上記で作成したグラフが出力されます。試しに、お宿のページの内部に出力してみましょうか。

出力結果

前回の記事ではjqueryを使っているみたいなことを言いましたが、これは動的なデータをグラフにするために、php側で取得したデータをPOSTする必要があったからで、今回みたいに$ydataとか$ydata2とかで出力するデータを固定させてるような場合はその必要はないです。


それにしても、今まで完全に見落としてたけど、うちのサイトってフッターがブラウザの最下部に固定されていないんだね……line_graph.htmlみたいにページの真ん中に出力するものの高さがあれだと、それがバレちゃう。

恥ずかしいから今度直しとこ。

2軸グラフを作成する

さてさて、基本的な折れ線グラフの描画の仕方については（こんな拙い説明でもたぶん）分かったと思うんですが、上みたいに2つのデータの値が近い場合は特に問題ないですが、大幅に桁に違いがあったりすると、ちょい見辛い感じのグラフになってしまうと思います。

例えば、こんなデータでグラフを出力してみましょう。

$ydata = array(11,3,8,12,5,1,9,13,5,7);
$ydata2 = array(1000,1900,1500,700,2020,1400,1780,960,2100,1300);

出力結果


よーく見ないと分からないかもしれませんが、$ydataの方の折れ線グラフが、ほぼX軸上にかぶってしまってますよね。

こんなときは、もう一つY軸を設けて2軸グラフを作成する場合があると思います。ちょっとそれをやってみましょう。

require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_line.php');

// Some (random) data
$ydata = array(11,3,8,12,5,1,9,13,5,7);
$ydata2 = array(1000,1900,1500,700,2020,1400,1780,960,2100,1300);

// Setup the graph
$graph = new Graph(900,400);
$graph->SetScale("textlin");
$graph->SetY2Scale("lin");

$graph->SetBox(false);
$graph->title->Set("Line Graph Sample");

//$graph->img->SetAntiAliasing();
//$graph->img->SetMargin(40,50,20,50);    

//$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);
$graph->y2axis->SetColor("#888888", "#444444");

$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
//$graph->xaxis->SetTickLabels(array_keys($form));
$graph->xgrid->SetColor('#e3e3e3');

// Create the line
$lineplot1 = new LinePlot($ydata);
$lineplot2 = new LinePlot($ydata2);

// Create the line
$graph->Add($lineplot1);
$graph->AddY2($lineplot2);

// Output line
$graph->Stroke();

出力結果

最初のサンプルと違うところは、『$graph->SetY2Scale(“lin”);』や『$graph->AddY2($lineplot2);』の部分ですね。グラフの右側にもY軸を作成するには、これらの関数が必要になるようです。

何か右側のY軸の目盛りの表示おかしくね？

んで、ですね。

このline_graph3.phpの右側の軸を見てほしいんですけど、目盛りの数値が2桁分しか出力されてないですよね。本当なら2200くらいまで出力されなきゃいけないんですが、一番上の目盛りには22としか出ていない。

実はこれ、今回僕が無駄につまづいたところでして……分かってみたら全然大した問題じゃなかったんですけど、何で全部出ないのかな～って思ってソースを読みあさったりしたんで、せっかくだからあえてピックアップしときます。

結論から言うと……ってか結論に至るまでの過程とかほぼ説明することないんですけど、マージンの問題だったみたいです。

要はグラフ全体の横幅に対して目盛り表示部分のマージンが少ないから起きてたみたいで……後で思い返すとちょっと考えれば分かりそうなものなんですが、初めて2軸グラフを作成してこの問題にぶち当たっていたときの自分は「右側の軸ってデフォルトは強制的に値を上2桁しか出さないようにしてんじゃね？　でもサンプルを見るとそうでもないよなぁ……きっとライブラリの一部が書き変わってるんだな。よーし、頑張ってそこ洗い出しちゃうよ～」的な思考に陥ったせいで、恥ずかしいのであまり言いたくないんですが、解決するまでに数時間かかっちゃいました。やっちゃったなー、やっちゃったよー。

まあやっちゃったもんは仕方ないんで、解決方法を載せときます。っつっても、ソースに一行加えるだけです。

$graph->img->SetMargin(40,50,20,50);

CSSのマージンなんかと一緒で、上下左右に関して設定ができるようになっているみたいです。




とまあ、こんな感じでJpGraphを使ってグラフをブラウザ上に出力させることができるわけです、はい。

ソースを一行ずつ解析して何やってるかを一つ一つ理解するのは結構大変かもしれませんが、僕がいじってみた限りの印象では、とりあえずサンプルサイトに乗っているサンプルの中から自分が出力したいグラフに近いもののソースを引っ張ってきて、あとはそれをカスタマイズすればそんなに手間もかからずに作成できます。

うん、決してここで一つ一つ丁寧に説明するのがめんどーだからやらないとか、そういうことじゃないからね？　いや、ぶっちゃけそれもちょっとはあるけど……たぶん、一つ一つ細かに説明しても、読む気になれないんじゃないかと思うです。僕なんかはいわゆる説明書読まないタイプなんで、なおさらそうっすね。

確かにマージンのところで僕は無駄につまづいたけどさ……説明書読まないからそうなるんだろって言われても反論はできないけどさ……でもあれはイレギュラーだったんだよ。黒歴史なんだよ。本人も反省しているみたいだし、許してやってよ。


まあ、もちろん質問などに関してはいつでも受け付けておりますゆえ、もしソースで説明が欲しい部分とかあれば、コメントに書くなりなんなりしてもらえれば、お答えします。

もちろん、僕に分かる範囲でなら、ですけどね。