後編では、DBなどから受け取ったPHPデータを、jQueryの「amcharts」を使ってグラフで表示するテクニックについて解説します。ソースコードは「チャート生成ライブラリ「amCharts」 JavaScript/HTML5版 | mutter」さんのを一部改変して用いています(何かありましたらご連絡下さい)。又amchartsのライセンスや仕様などは、お手数ですが各自でご確認頂きますようお願い致します。
例えばデータベースに格納されている毎日の売上や気温の変化などを、グラフで表示できるようにしたいとします。このとき、PHPとjQueryプラグイン「amcharts」を使い、以下のように表示する事ができます。
ソースコード
表示結果(キャプチャー)
実行結果:http://www10341ui.sakura.ne.jp/practice01/amchart.php
コツ
表示結果の一番上のJSONを見れば分かる通り、dateには日付のタイムスタンプ、valueにはdateに対応する縦軸の値を入力していきます。
コツは13行目から19行目のようにPHPの「.=」を使って、JSONのパーツを一つ一つ組み立てて行くような感じで実装して行く事です。ループで「,」が一個分余計だったので、17行目で「,」を削除し、18行目で最後の〆の「]」を追加していきます。そして26行目の所にphpのコードを出力すれば、JavaScript側にJSONが反映され、グラフが表示されます。
使っているPHPのフレームワークや、SQLの出力結果が格納された配列の仕様に応じて設定が少し変わる場合があるので何度もトライしてみて下さい。
後書き
さてこういったツールは機能を実装するというより、どういう風に数値を解釈するかの方が大切です。そのため数値を解釈する上で必要だと思った機能を、その都度追加して行くと良いでしょう。さて、自分なりのグラフの読み方の注意点を「過去の売上の情報などをjQueryプラグインで表示してみる(前編):グラフの読む際の2つの注意点」にまとめました。宜しければ合わせて見てみて下さい。
例えば結果をcsvで出力する機能を実装すれば、Excelなどを使って数値を解釈しやすくなったり、会計や事務作業をやっている人の作業が楽になることもあります。最後に読者の皆さんが短い目でなく、長い目で見て自分らの作業を楽にできる事を心より願います。