ずっと作業が止まっていた、ボウリングスコア分析。

色々やりたいことがあるのだが、“やりたいこと”と“できること”のギャップを薄々感じていたため、どうも手が進まなかった。

しかし、サイトデザインもブログシステムの導入もある程度できつつある今、そろそろ重い腰を上げねばならない。

そこで、避けて通れないのが“過去のスコアなどをグラフ表示する”こと。

数字がだらだら書き連ねられるより、そりゃグラフで見たら分かりやすいでっしゃろ。

“カブトムシ飼育の紆余曲折”のブログでも、今のところカブトムシの体重をただ数字で書き連ねているだけだが、体重の推移をグラフ表示できたら、なんだか嬉しいじゃない?

エクセルで表を作って貼り付けるという原始的な手もあるが、ボウリングのスコアはmySQLに放り込んであるため、できればphpなんかと連携して動的にグラフを生成したい。

そのための“なんかええもん”があるかなと思い、ググってみた。

ウェブデザインに使えるチャート・グラフツールいろいろ
http://www.designwalker.com/2010/07/chart-tool.html

JavaScriptやFlashなどを使って比較的、簡単にグラフやチャートを生成できるツールをいろいろまとめてみました。

色々な手法で、グラフ描画ができるんもんなんですなあ。

シェアウェアのものからフリーのモノまで、全15件も紹介してくださっている。

この中でボクの理想に近い(というかピッタリ?)ものが、コレ。

pChart | a PHP Charting library
http://pchart.sourceforge.net/index.php

pChart is a PHP class oriented framework designed to create aliased charts. Most of todays chart libraries have a cost, our project is intended to be free. Data can be retrieved from SQL queries, CSV files, or manually provided. This project is still under development and new features or fix are made every week.

Focus has been put on rendering quality introducing an aliasing algorithm to draw eye candy graphics. Rendering speed has been dramatically enhanced since the first version, we'll still continue optimising the code!

えっと、、、、英検2級(ただし20年も前に取得、語彙力ズタボロ)の拙い英語力で頑張って“超訳”してみると、、、

pChartはエイリアスグラフを作成するために設計されたPHPのクラス指向のフレームワークです。昨今のチャートライブラリの多くは費用がかかりますが、私たちのプロジェクトはフリーであることを目指しています。データは、SQLクエリ、CSVファイルから取得、または手動で提供することができます。このプロジェクトはまだ開発中であり、新しい機能の開発や修正が毎週行われています。

私たちは、見た目の良いグラフを描画するためのエイリアシングアルゴリズムを導入して、レンダリングの質の向上に努めています。最初のバージョンに比べレンダリング速度が劇的に強化されており、私たちはまだまだコードを最適化し続けていきます!

てなカンジですか?

Saving web server speed and CPU is something that matter to us. We've created the pCache class to help you dealing with the fact that a chart can be computed once and displayed many times by different users.The pCache class can be used to simplify server side cache management.In green, the normal process : retrieve data, compute and display,in orange the cost saving path, retrieve the data, check if we have already computed it and display it!

pcache.png

こちらも“超訳”。

Webサーバの速度とCPUを守ることは、私たちにとって重要な問題です。チャートを一度描画し、それを異なるユーザーが何度も表示できるように、我々はpCacheクラスを作成しました。pCacheクラスは、サーバー側のキャッシュ管理を簡素化するために使用することができます。緑の部分は通常のプロセスで、データを取得し計算して表示します。オレンジの部分はコスト削減の経路で、データを取得し、すでにそれが計算されているかをチェックし、それを表示します。

もうちょい。

The documentation is trying to explain how to use, adapt and bring to production pChart scripts.Exemples are covering basic usage or highlighting specific features, we invite you to try by yourself.If you can't find any solution to your issues in this documentation, please use the sourceforge forums.

↓“超訳

マニュアルでは、pChartスクリプトの使用方法、応用方法を説明しています。“サンプル”で基本的な使用法をカバーし、また特徴的な機能を強調しているので、あなたが自分自身で試してもらうことをお勧めします。このマニュアルであなたの問題への解決策を見つけられない場合は、sourceforgeのフォーラムをご利用ください。

はあ、疲れた。

要はphpを使っていて、SQLクエリからデータを取得することができ、同じリクエストだと再度グラフを作るのではなくキャッシュされている画像を表示する。しかもサンプルのphpファイルが20近く収録されていて、それらを見たら大体使い方が分かる、ってことかな。

なんだか、いい感じじゃない?

ただ、全てのサンプルを紐解いて細かいことまで調べていたら、埒が明かない。

pChartの使い方を日本語で説明してくれているサイトがないものかと、またググってみた。

pChartの部屋
http://www.t-net.ne.jp/~cyfis/p_chart/index.html

頑張ってくれている人がいる。

さっきの英文中の“documentation”部分を和訳してくれている。

本当に助かります。ありがたや、ありがたや。

このサイトを見たら、分からないことは大体解決できそう。

ただ、パッと見た感じではmySQLとの連携に関してはまったく書かれていないような気がする。

ちょっと不安なので、“pChart mySQL”で三度ググってみたが、ヒットせず。

まあ、なんとかなるやろ。

とりあえず、カブトムシの成長記録をcsvにまとめて、表示できるかやってみた。

Example16.phpというファイルがcsvを読み込んで画像を吐き出すサンプルみたいなので、これを流用。

日本語を使うため、UTF-8でcsv、phpファイルともに保存。

あ、当然pngに日本語を出力するためには、そのためのフォントファイルが必要となるので、Windowsのフォントフォルダから拝借してサーバーにアップロード。

csvファイルはこんなカンジ。
http://www.nonukes-maria.net/pChart.1.27d/Sample/beetles.csv

Example16.phpに少し手を加えたbeetle.phpのコードに、コメントで簡単な説明を加えたものがコチラ。

<?php

// Standard inclusions   
include("pChart/pData.class");
include("pChart/pChart.class");

// Dataset definition

// 新しいpDataがオブジェクトを作成 
$DataSet = new pData;

// CSVファイルをインポート
$DataSet->ImportFromCSV("Sample/beetles.csv",",",array(1,2),TRUE,0);

// 全てのデータセットをグラフで使用できるように追加
$DataSet->AddAllSeries();

// データセットを横座標値として使用するよう指定
$DataSet->SetAbsciseLabelSerie();

// Y軸へ名前を与え、グラフを描画した後に名前を水平に描く
$DataSet->SetYAxisName("体重");

// Initialise the graph

// 新しいチャートオブジェクトを作成
$Test = new pChart(500,500);


$Test->reportWarnings("GD");

// フォントのプロパティを設定
$Test->setFontProperties("Fonts/meiryo.ttc",8);

// グラフを作成するとき、この機能への呼び出しは必須
$Test->setGraphArea(60,30,480,480);

// 角の丸い塗りつぶされた四角形を描画
$Test->drawFilledRoundedRectangle(7,7,493,493,5,240,240,240);

// 角の丸い線グラフを描画
$Test->drawRoundedRectangle(5,5,495,495,5,230,230,230);

// グラフ領域の背景色を描画
$Test->drawGraphArea(255,255,255,TRUE);

// 左右に軸を描いて、その値を設定
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,90,2);

// グラフエリア上にグリッドを描画
$Test->drawGrid(4,TRUE,230,230,230,50);

// Draw the 0 line

// フォントのプロパティを設定
$Test->setFontProperties("Fonts/meiryo.ttc",6);

// 水平方向のしきい線を描画
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);

// Draw the line graph

// すべての登録されたデータセットを使って折れ線グラフを描画
$Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());

// すべての登録されたデータセットを使用するプロットグラフを描画
 $Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);

// Finish the graph

// フォントのプロパティを設定
$Test->setFontProperties("Fonts/meiryo.ttc",8); 

// 指定された位置にグラフの凡例(データの色やデータ名)を描画  
 $Test->drawLegend(70,40,$DataSet->GetDataDescription(),255,255,255); 

// フォントのプロパティを設定  
$Test->setFontProperties("Fonts/meiryo.ttc",10);

// グラフのタイトルを記述
$Test->drawTitle(60,22,"カブトムシ幼虫の体重推移",50,50,50,585);

// 出力するファイル名にPNG形式でグラフデータを出力
 $Test->Render("beetles.png");

?>

とりあえず、ローカルサーバーで確認してみよう。

F12(dreamweaverの“ブラウザでプレビュー”)で、ざん!

Warning: imageftbbox() [function.imageftbbox]: any2eucjp(): something happen in ~

ん?

生成されたpng画像を確認すると、、、

文字化け。

なぜだ、、、UTF-8でちゃんと保存しているのに、、、

上記の“Warning~”+“文字化け”+“pChart”でググってみると、、、

pChartでの日本語表示にハマる
http://blog.still-laughin.com/archives/2010/09/pchart.html

とりあえず日本語が表示できるかなと思ってやってみたら、いきなり躓きました。

「Warning: imageftbbox() [function.imageftbbox]: any2eucjp(): something happen in ~」なんていうのが出ます。

pChartはグラフの画像データを作成するんですが、GDの imagettftext を使って画像に文字を書き込みます。XAMPP 1.7.3 (というよりPHPのWindows版バイナリの)GDは、コンパイルオプションに「-DJISX0208」がついているので、JIS-mapped Japanese Font Support が enabled になっています。

本来 imagettftext はUTF-8でエンコードされた文字列を受け取るのですが、JIS-mapped Japanese Font Support が enabled になっていると Shift-JIS で受け取るように変更されるようです。 これは php.ini などで実行時オプションで変更することは出来ないみたい。

FreeBSDなら、コンパイルし直せばOKなんですが、XAMPPだとそうもいきません。mb_convert_encoding でSJISを指定して変換すればいいのですが、面倒なのでとりあえずpChartでグラフを描く部分だけ、別のPHPファイルに切りだして文字エンコーディングを Shift-JIS にして保存しました(他のファイルはUTF-8)。

だってさ。

XAMPPのせいなのねえ、、、

とりあえず、csvとphpのファイルをsjisに直して、もう一度F12で、ざん!

今度は文字化けしなかったが、値が欠落している部分は線でつないでくれないのね。

beetles.png

できれば、全てのプロットを結んでほしいのだが、、、

アカン、力尽きた、、、今日はここまで。

また、調べよう。

寝ます。