highchartであれこれ
旦那が盲腸で手術になったりしましたが、私含め元気です。
盲腸怖いですね。。。
最近GoogleChartから諸事情でHighchartの方にシフトしています。
Highchartはサンプルが充実しているせいか、
あまり日本語で解説されていないんですね。。。
どうやったらjsonで引っ張ってこれるのか、乏しい英語読解力で頑張りました。
参考にしたのは
How to load MySQL results to Highcharts using JSON
です。
今日は６時間ぐらいBluetoothと格闘して消耗しているので、キモのところだけを箇条書きにします。
元気がでたらまた別エントリでまとめますね。
PHPからJsonでHighchartにデータを渡す方法
- パラメータをPOST色々渡したかったので、dataを$.ajaxでPHPから取得する
- PHPではMysqlへSQL投げて配列へ格納して、ループでjson形式へ整形
- JS側に戻ってdataをjsonにパースする
- Highcharts.Chartをnewしてseriesにパースしたdataをセットする
以上です。
$.getJSONを使ったサンプルが多かったんですが、
パラメータの渡し方がイマイチわからなかったので断念しました。
$.ajaxの方法はGoogleChartのコードを流用です。（参考：グラフAPIの件、続き。 - しぃぶろぐ。）
あと小さなポイントとしては、文字列は""で囲む。''じゃダメでした。
…あれ、これってJS界では常識なのかな…。。。
今回JSONLintにもお世話になりました。
SublimeTextにもLinter入れないとなー。職場には入れたけど、個人のには未だ入れてないんだよなー。
SublimeTextに関しても備忘録代わりにエントリ投げたいのですが力尽きたのでまた今度。
不定イコール不定は不定
先週のになりますが。現場でうぉーたー！した話です。
今の現場ではプロシージャでなんでもやっているらしく。パフォーマンスがえらい悪いわけですよ。
ある帳票の出力に1時間とかかかるんです。。。
中身みたら、ななせんぎょう以上ありました。ありえん。
しかも繰り返しが入れ子で、いくつsql発行してるんだって話ですよ。たしか三千こえてた気が…
でまぁ、中を見ると同じような文ばかりなもんで、なんじゃこりゃーーーーーーー！
前置きが長くなりました。
結局どういうことだったかと言いますと、
項目がnullの時とそれ以外の時でsqlを分けてたんですね。
調べて初めて知ったのですが、
MySQLではnull=nullがTrueにならず、nullになるんですよ！
てっきり同じだからtrueになると思ってました。
基本的にはis nullを使用すること、となっていましたが、まだるっこしくてやってられません。
そこで。
null <=> null だとtrueになります！
もちろん他の値もちゃんと比較できます。
公式に載っていなかった気がしますが、ちゃんと使えます。
これのおかげでsqlがざっくり六分の一位にできそうです。
nullという値は空ではなく、「不定」なんだと認識しましたとさ。
しぃ は prop() を おぼえた！
いい加減眠いので今日覚えたことを簡単に。
私、今日はじめてattr()以外にprop()があることを知りました。
jQueryでドロップダウンのselectedになってるoptionのインデックスを取るには、propでないとダメなんですね。
やりたかったのは、
「ドロップダウンのselectedを上下に動かす」です。
ついでにフォームのsubmitもしています。
グラフAPIの件、続き。
今週は半分以上扁桃腺炎で高熱出して寝込んでいました。
40度超えると当たり前ですけどしんどいですね。。。
さて、前回の続きです。もうめんどうなのでベタッと貼り付けます。
仕事で作ったところから不要なところを削除しています。
余計な処理とか変な処理が残っていますので、心の目で読んでください。
ちなみに折れ線グラフです。
長くてみてられないよ！て人は、最後の方までスクロールするといいかもしれません。
HTMLの方で、グラフを二回持ってきています。
これは、一度目はデフォルト用のダミーで、
二回目にクリックした情報をjQueryで吸いだしてajaxでPHPに投げています。
PHPの方では、POSTされてきたデータをもとに、
データベースからsqlでデータを引き出し、
GoogleAPI用のjsonに変換して戻しています。
HTML側、戻ってきたjsonデータはそのまま google.visualization.DataTable に突っ込んでいます。
それで表示できます。
最後に、HTML側最後、setTimeoutを利用しています。
これは今回、複数種類のグラフを切替なければならなかったのでこうなりました。。。
どういうことかというと、googleAPIのグラフは表示された状態でスクリプトが走らないと凡例やら何やらが微妙にズレるんです。
表示→非表示させるために入れてあります。
ダミー用はそれのためもあります。
さぁ、まとめです。
各機能だけをシンプルに抜き出します。
https://gist.github.com/10fc5d4ac1b86b124aa9.git
以上！
GoogleのChartAPI＋jQuery＋JSON＋PHPでグラフデータを動的に変更。
お久しぶりです。生きています。
色々ありまして、もうしばらくしたらフルタイムな正社員に戻る予定です。
いじょう。報告。
で、本日の本題。JSON使って生まれて初めて自分でAjaxしてみてるよ！うまく動かなくてすんごい苦労したよ！！
という話です。
無駄にマニアックな話になるので、興味ない方はリターンされたほうがお得です。
PHPでDBから表を出力→セルをクリックするとグラフ表示、という要件がございまして。
まぁ、javascriptからPHPに抽出元データ渡してjsonで返してもらえばGoogleVisualizationAPIさんがうまいことやってくれんじゃん？とタカをくくっていました。
自分javascriptもjsonもましてやGoogleAPIもろくに使ったことないくせに…！
出来るのはわかっているけど、やり方が分からないアレですよ。見切り発車もいいところですよ…！！
結論としては、その方向で間違いないのですが、普段Javascriptいじっていないので無駄に悩んでしまいました。。。
以下ポイント箇条書き。
- 最初のロードでデフォルト値のグラフを描画しておく。
- クリック時にjQueryで必要なデータをひろってphpに投げる。
- jsonで返す。フォーマットに注意。evalも要らなかった。
- 帰ってきたjsonをDataTableに入れてもっかいdrawする。
つまづいたのは、最初のグラフ描画と再描画をわける必要があるとこ、jsonのフォーマットとevalの要不要、再描画できること。の3つですね。
特にフォーマットは最初に「公式」を参考にするべきです！！！
公式のjsonサンプルが円グラフだったので、適当な参考っぷりで後から後悔です。
他のブログに載っているサンプルも動いたり動かなかったりというか、私のコピペでは動きませんでしたorz
公式のサンプルをそのまま表示させるところからやり直したら無事に進みましたよ。
公式大事です。
まだ完璧には動いていないのと、gitに入れられる状態にしていないので、
もろもろ片付いたらサンプルコードあげて詳しく書きます。
んではまた。
aspもphpもみんなまとめて同じ文法にならないかな。。。
前回書きましたが、環境の関係でPHPをASPに書き換えています（途中）。
まぁ、プログラムなんて一度書いてしまえば、文法的に違う所書き換えればいいだけっしょ☆
とたかをくくっていました…orz
いえ、間違ってないです。
もとから何千行もあるプログラムでもないし、
手続き型で上から下へ行くだけの処理だったので、構造ごと変えなきゃいけない事態でもないし。
その「文法的に違う所を書き換える」だけで一苦労しただけです。。。
aspというかこの場合はvbscriptですね（この言語ももう随分レガシーですが）、
VBに触ったのが年単位で昔になってしまったので、記憶だけで書いてたら動かない動かない。。。
phpやjavaみたいに行番号がでて「ここが違ってるヨ！」みたいなの出てくれればいいものを、
「なにこれ！よくわかんない！ちゃんと処理できないから全部エラーだお！（５００）」みたいな。
文法忘れてるから、検索するわけですよ。書き方を。
ネットで見たとおりに書き直しても５００エラーがバンバンとか、どうしろと！
導入（愚痴）が長くなってしまいましたorz
以下、今回の教訓をもとに、書き換え方法をまとめます。
| PHP | VBScript | 備考 | |
| コメント | // スラッシュ×２ |
' シングルコーテーション |
|
| if文 | if(条件式){ 処理文 }else if(条件式){ 処理文 }else{ 処理文 } |
If 条件式 Then 処理文 Else If 条件式 処理文 Else 処理文 End If |
まず、｛｝じゃないのにつっかかる。 |
| Case文 | switch(条件変数){ case"1": 処理文 break; case"2":case"3": 処理文 break; } |
select case 条件変数 case "1" 処理文 case"2","3" 処理文 end select |
いちいちBreakしなくていいのは楽ちん。 |
| For each文 | foreach(連想配列 as $key => $val){ 処理文 } |
For Each key In 連想配列 処理文 Next |
valが取れないので、都度、連想配列(key)で取得。 |
| 連想配列 | $dataAry = array("01" => 55); もしくは $dataAry["01]=55; |
Dim dataAry Set dataAry = CreateObject("Scripting.Dictionary") dataAry.add "01",55 |
Scripting.Dictionaryてなに。。。 |
| フォームからの値取得 | $_POST['項目'] | Request.Form("項目") | 変数で持ってないのか。。。指定がjavascriptっぽい。 |
| 日付計算 | $date = mktime(0,0,0,$Mon,$Day-1,$Year); | bdate = DateAdd("d",-1,fdate) | VBScriptは関数がある。 phpはいちいち分解するのが面倒。 |
| アウトプット | <input type="hidden" name="name" value=<?php print(date("Y",$date)); ?> > | Response.Write("<input type=""hidden"" name=""name"" value=""" & Year(bdate) & """>") | VBScriptだとタグ内入れ込みはできない。 |
色々他にもつまったところはあるけれど。
こういうちょっとした違いは、なんでもいいから統一されればいいのに！
