しぃぶろぐ。

仕事とか技術関係のこと。他色々

GoogleのChartAPI+jQuery+JSON+PHPでグラフデータを動的に変更。

お久しぶりです。生きています。

色々ありまして、もうしばらくしたらフルタイムな正社員に戻る予定です。

 

いじょう。報告。

で、本日の本題。JSON使って生まれて初めて自分でAjaxしてみてるよ!うまく動かなくてすんごい苦労したよ!!

という話です。

無駄にマニアックな話になるので、興味ない方はリターンされたほうがお得です。

 

PHPでDBから表を出力→セルをクリックするとグラフ表示、という要件がございまして。

まぁ、javascriptからPHPに抽出元データ渡してjsonで返してもらえばGoogleVisualizationAPIさんがうまいことやってくれんじゃん?とタカをくくっていました。

自分javascriptjsonもましてやGoogleAPIもろくに使ったことないくせに…!

出来るのはわかっているけど、やり方が分からないアレですよ。見切り発車もいいところですよ…!!

結論としては、その方向で間違いないのですが、普段Javascriptいじっていないので無駄に悩んでしまいました。。。

 

以下ポイント箇条書き。

 

  • 最初のロードでデフォルト値のグラフを描画しておく。
  • クリック時にjQueryで必要なデータをひろってphpに投げる。
  • jsonで返す。フォーマットに注意。evalも要らなかった。
  • 帰ってきたjsonをDataTableに入れてもっかいdrawする。

 

つまづいたのは、最初のグラフ描画と再描画をわける必要があるとこ、jsonのフォーマットとevalの要不要、再描画できること。の3つですね。

特にフォーマットは最初に「公式」を参考にするべきです!!!

公式のjsonサンプルが円グラフだったので、適当な参考っぷりで後から後悔です。

他のブログに載っているサンプルも動いたり動かなかったりというか、私のコピペでは動きませんでしたorz

 公式のサンプルをそのまま表示させるところからやり直したら無事に進みましたよ。

公式大事です。

 

まだ完璧には動いていないのと、gitに入れられる状態にしていないので、

もろもろ片付いたらサンプルコードあげて詳しく書きます。

んではまた。