【PHP】SQLの集計結果を折れ線グラフなどで表示させたい。

Question

WEBページに、PHPでMySQLのデータを集計し、
表を表示させていたのですが、欲が出てきて、
さらにグラフを表示させたくなりました。
SQLは下記の通り実行させていています。

//SQLはファイルから読み込む
$sql_3 = file_get_contents("test3.sql");

// SQLクエリを実行する
$result_3 = mysqli_query($link, $sql_3);

この状態で、mysqli_fetch_arrayを実行すれば連想配列の
状態で取得できると思っていて、
$data = mysqli_fetch_array($result_3,MYSQLI_ASSOC);

とりあえず、この$dataをCSVに掃き出させ、それからグラフ化しようと考えました。

$fp =fopen('test.csv','w');
foreach ($data as $fields){
fputcsv($fp, $fields);
}
fclose($fp);

しかし、CSVファイルには何も掃き出されず、困っています。
参考にしたサイトは、
http://qq3q.biz/pMcQ
です。
CSVファイルからグラフ作成をしているようです。
別に他にグラフ化できる方法があれば、無理にCSVを使う必要はないと思っています。

他にも、
http://lab.sonicmoov.com/development/morris-js-php-graph/

このサイトを参考にJSON形式への変換も試みましたが、
ダメでした。

$logJson = json_encode($data);

直接サーバにインストールすることはできないので、
JpGraphを使った方法はできないかなと思っています。

何か、解決方法等があれば教えてください。

【追記】
現在、GoogleChartsで折れ線グラフに挑戦中です。
しかし、JSON形式のデータがうまく取り込めず苦しんでいます。
単なる、{項目：値}の形式ではないので、多次元配列やら、jQueryでの処理やらが必要かと思います。

希望する折れ線グラフは、横軸に月（今月(this)、1ヶ月前(one)…）、縦軸にアクセス数で、各アクセスタイプごとに線が引かれる形式です。
JSON形式に出力したファイルの一部を記載します。
【JSON】
{"access_type":"\u30e1\u30cb\u30e5\u30fc(101)","this":"10","one":"76","two":"59","three":"26","four":"59","five":"0","six":"0","seven":"0","eight":"0","nine":"0","ten":"0","eleven":"0","year":"0"}
{"access_type":"\u7c21\u5358\u30ca\u30d3(201)","this":"5","one":"40","two":"15","three":"0","four":"0","five":"0","six":"0","seven":"0","eight":"0","nine":"0","ten":"0","eleven":"0","year":"0"}

Answer 1

GoogleCharts であれば、JavaScript で実装できますよ。

Comments

[Satochan24]

回答有難うございます。
JavaScriptでもできるんですね。
問題は、グラフ化するデータの取得と反映だと思いますが、こちらのサービスを
見た限りでは、CSV等から読み込めるのか不明でした。
そもそも、CSVにまで落とせていない現状ですが…

[退会済みユーザー]

CSVだと不可能ではないが実装は面倒ですね。JSONが適していると思います。

[Satochan24]

回答有難うございます。
$logJson = json_encode($data);
で変換するかたちでしょうか？
連想配列、$data = mysqli_fetch_array($result_3,MYSQLI_ASSOC);
から変換できないのが謎です。
原因の切り分け方法とかありますでしょうか？

[退会済みユーザー]

> 原因の切り分け方法とかありますでしょうか？
デバッグの仕方か￥がわからないということですか？
普段どのようにデバッグしていますか？

[Satochan24]

回答有難うございます。
普段は、ひたすら、変数の値などをechoなどで出力させて確認と、
Eclipseで文法的なチェックも時々行っています。
C#とかだと、VisualStudioを使って、1行づつ実行させ、それぞれの変数、NULLがないかとかを見ています。
現状では、$dataも、$result_3もechoで出力されないので、
mysqli_fetch_arrayの出力形式が単なる連想配列とは違うのかなぁと思っています。

[退会済みユーザー]

デバッグでは、echo ではなく、var_dump() を利用しましょう。echo では基本的に 配列とか出力されませんから。

あと、ini_set('display_errors', true); error_reporting(E_ALL); を忘れずに。

[Satochan24]

回答有難うございました。
var_dump($data)にしたら、NULLでした。
var_dump($result_3)は、連想配列らしき値が表示されるようになりました。
$dataは、$data = mysqli_fetch_array($result_3,MYSQLI_ASSOC);
で、表の作成に利用しているのですが、どうして表示されないのか謎です。

[退会済みユーザー]

値さえ入っていれば、json_encode は可能ですから、地道にデバッグするしかありませんね。頑張って下さい。
必ずどこかに関数の使い方が間違っているところがあったり、タイポがあったりするはずですので。

[Satochan24]

json_encodeできたとして、それをどのようにチャートに反映できますか？
教えて頂いたサイトにJSONデータの扱い方がどこかに記載されていますでしょうか？

[退会済みユーザー]

もちろん記述されていますし、「google chart json」で検索したら、幾つか説明しているサイトがヒットします。

[Satochan24]

回答有難うございます。
JSON形式でファイルに出力するところまで出来ました。
しかし、表で配列データの一部を日本語に書き換えた部分が文字化けしてしまいました。
このままで処理を進めても恐らく、グラフにも文字化けしたままだと思うのですが、
何か対策ありますでしょうか？
JSON出力ファイルarray.jsonをUTF-8で保存し直してもダメでした。

【文字化けしたarray.jsonファイルの一部】
{"access_type":"\u30e1\u30cb\u30e5\u30fc(101)","this":"10","one":"76","two"

【配列の一部を日本語に置き換えている部分】
switch($data['access_type']){
case 101:
$data['access_type'] = "メニュー(101)";
break;
//一部省略
}

[退会済みユーザー]

{"access_type":"\u30e1\u30cb\u30e5\u30fc(101)","this":"10","one":"76","two"
これは文字化けではなく、エンコーディングされたもので通常のものです。そのままJavaScriptで利用可能です。

[Satochan24]

回答有難うございました。
ただいま、Google-Chartsと格闘中です。
JSONファイルの読み込みをしてみましたが、何も表示されませんでした。
エラー内容が出ないと原因特定が難しいですね。
直接、簡単なデータをJavaScript内に書いたら、とりあえず表示されました。
恐らく、JSON形式のデータが1年間の毎月の集計データなので、データの指定の仕方
に問題があるのではないかと思っています。
とりあえず、簡単なJSONデータの読み込みに挑戦してみる予定です。

[退会済みユーザー]

> エラー内容が出ないと原因特定が難しい
ブラウザの開発者ツールを利用するとエラーがわかりますよ。

[Satochan24]

回答有難うございます。
ブラウザの開発者ツール！？
アドオンとかで追加する形でしょうか。
現状、簡単なJSON形式のサンプルなら折れ線グラフに成功しました。
参考にしたサイトは
http://nvnote.com/google-chart-scatter-create-from-json/#script
です。

恐らく、出力されたJSONファイルの形式が単なる｛項目：値｝の形式ではないので、
読み込みの処理で工夫が必要なんだと思います。

下記の形式のJSONでも処理可能でしょうか？
縦が数値、横がthisなどの月名、access_typeごとに線を引きたいと思ってます。
{accesstype:**,this:10, one:25,・・・・・,eleven:10,year:0｝
{accesstype:xxx,this:100, one:14,・・・・・,eleven:12,year:15}
:
:

[退会済みユーザー]

https://msdn.microsoft.com/ja-jp/library/gg589507%28v=vs.85%29.aspx
http://www.buildinsider.net/web/chromedevtools/01

こういうものです。

[Satochan24]

回答有難うございます。
使ってみましたが、特に解決に結びつくエラーは表示されませんでした。
（使い方が分かってないのかもしれませんが…）
JSON形式による読み込みで失敗しているんだと思います。
GoogleChartsのサイトにも、JSON形式についてそれほど詳しく書いてない印象でした。

[退会済みユーザー]

不可能ではないし、実際自分も使ったことがあるので可能です。
返信くれるのでなんとなく状況は推測できますが、質問があるのでしたら具体的な情報も合わせて提示してください。具体的な情報がないと推測でしか回答できません。

「〇〇となりました。」「こうなりました」という内容ばかりなので、質問されているのか、ただの報告なのか…読みとれません。

[Satochan24]

回答有難うございます。何度もすみません。
1点気になったのですが、このGoogleChartsのJavaScriptコード、
どこで、どっちが縦軸、どっちが横軸と認識しているのでしょうか？

[退会済みユーザー]

どっちとは何と何について言っているのですか？

[Satochan24]

例えば、http://nvnote.com/google-chart-scatter-create-from-json/#script
のサイトで、
var dataArray = [['Age','Weight']];としてますが、先のAgeが自動的に横軸になっている気がします。

話しは少し変わりますが、http://www.santarosa.edu/~jperetz/projects/ajax-json/
こちらのサイトで、私のJSON形式と似ているデータを処理しているようです。
やはり、あとはjQueryでの処理が必要かもしれない状況です。

[退会済みユーザー]

http://lib.nvnote.com/google-chart-scatter/
ページ上部のリンクから「デモ」を実行してみてください。

[Satochan24]

デモは実行してみました。
Ageが横軸ですね。

jQueryでのJSONファイルの処理方法について調べたほうがよさそうだと今更思いました。
来週、続きに挑戦してみます。

[退会済みユーザー]

JSONの読み込みは確かにjQuery を使うと楽です。

[Satochan24]

遅くなりましたが、GoogleChartsでグラフ表示（JSONファイルから読み込み）が
できるようになりました。
結局、JSONデータの方を、GoogleChartsで読める形に、JavaScroiptで加工しました。

【加工前】
{"access_type":"(101)","this":15,"one":76,"two":59,"three":26},
{"access_type":"(102)","this":7,"one":44,"two":6,"three":0}

これを下記のような縦と横を入れ替えた感じのJSONデータに加工しました。
【加工後】
[["","(101)","(102)"],["this",15,7],["one",76,44],["two",59,6],["three",26,0]]

それで、ようやく希望通りのグラフとなりました。
どうも有難うございました。
解決済みにします。