Google chart apiのURLを作るpythonスクリプトを今日中につくるぞ。やりたいのは、超低レベルなんだけど、本当に２次関数というのは放物線を描くのかを自分でデータをつくってグラフ化して試したいのだ。一次関数が一直線なのは当たり前に分かるからな。
Google chart apiはURLを決められたルールで生成し、それにアクセスすることでグラフのイメージデータが返ってくる仕組みだ。グラフの種類、色、目盛、数値などをルールに沿っていれていけばいい。getだとURLの長さが結構制限が強いみたいだけど、Postで呼び出せばその制限は緩和されるようだ。postでどうやって呼び出すのかは、今のところわかっていない。getでどの程度の数の数値データを扱えるのかも分からない。
y=2x+4というのは一次関数だべよ。これは単純だ。x=0のときy=4で後は正比例のまっすぐなグラフになるのは一目瞭然だ。y=2x2(二乗）+4というのは２次関数だべよ。これはx=0のときy=4だけど、その後の動きが分からないのだ。100〜1000個くらいのデータをぶち込んで滑らかな放物線を描いてみたい。
どうやらGoogle chat apiには、数値データを一個一個ぶち込む方法と、数式をぶち込む方法の２種類あるように思える。
https://chart.googleapis.com/chart?cht=lc&chd=t:-1&chs=250x150&chco=FF0000&chfd=0,x,0,11,0.1,sin(x)*50%2b50&chxt=x,y
これは非常に短いURLだが、sin(x)*・・・・という数式めいたものが入っており、イメージ出力するとこうなる。
なんて便利なツールなんだ。そして奇麗な曲線が一瞬で描かれるのだ。すばらしい。
数式でグラフを作れるのは便利だけど、俺はその数式からくるグラフが本当なのかを実感したいので、数式をインプットするのは今の俺にとっては無意味だ。だから、数式のxをずらしながら、100ないし1000のyを出して、インプットしたxとアウトプットしたyの組み合わせを100ないし、1000作るのだ。その組み合わせを元にURLを自動生成するプログラムをpythonで作るのだ。
Google Chart APIのURLの仕組み
仕組みを試しながらマスターしよう。https://chart.googleapis.com/chart?が基本URLのようだ。cht=lcはチャートの種類を指定しているようだ。２次関数にせよグラフはラインチャートでOKなんで、cht=lcでOKだ。円グラフや地図の国別の色の濃さで国別シェアなんかも可視化できるようだ。今度試そう。
http://code.google.com/intl/ja/apis/chart/image/docs/gallery/line_charts.html
このページにいろいろと詳しい説明がのっているようだ。
https://chart.googleapis.com/chart?cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72
これは恐らく最もシンプルなchartApiの使いかただろう。chs=200x125というのは、画像の大きさのようだ。イメージ出力するとこうなる。
ためしに、chs=500x250にするとこうなる。
chd=t:40,60,60,45,47,75,70,72というのは、数値データそのものだ。８個あるとおり、グラフの点も8個あるのだ。t:というのはよくわからないので後で調べよう。これはすなわちy軸の数値データであり、x軸の数値データは記載がない。xは一定間隔という前提で、yの値のみインプットしているのだ。二次関数のグラフの形を確認するにあたっては、xの値を明示する必要がないから、はっきりいって、このシンプルな形態にそって、データを1000個いれさえすれば終わりだ。なんて簡単なんだ。xが-500〜500まで（1刻み）のyをプロットすればいいのだ。こういうのをきっとプロットというのだろう。
まあpythonで作るのは結構なことだけど、javascriptでつくっちゃえば、このBlog上で全てを完結できるので、せっかくだから、javascriptでやるか。まずはy=x２乗を出すぞ。
<script type="text/javascript"> <!-- var x; var y; var txt = ''; for (x = -500; x < 501; x = x +1){ y = x*x; if(txt == ''){txt = y;} else{txt = txt+','+y;} } document.write('<img src="https://chart.googleapis.com/chart?cht=lc&chs=500x250&chd=t:',txt,' "/>'); // --> </script>
これで1000個のデータをプロットしてみたけど、エラーになった。
too largeだそうだ。ということは数を減らしてみよう。そして、postでアクセスする方法も調べよう。
300個のデータならいけるらしい。上記はxが-150〜150までの、y=x2乗のグラフだ。しかし、何か天井にひっかかっているようだ。嘘のグラフを表示するとは何事。。恐らく、目盛を明示しないとこういったバグが生じるんだろう。最大数値を150*150=22500を与えれば天井のつっかかりはなくなるはずだ。
なくならない。理由が分かった。google chart apiは数字は0-100までしか扱えないらしい。100以上は100として扱うらしい。よって、天井ができるのだ。。。めんどうだ。扱う数値は、係数100/22500をかけることにしよう。
100/22500の係数をかけると、数字１つ１つの文字列数が多くなるので、エラーになる。数字の数で制限してるわけではなく、URLの長さで制限しているからだ。POSTでどの程度緩和されるのか分からないけど、結構めんどうな仕組みだ。よって、-50〜50のxを元に、グラフを作った。yは、0.04 の係数をかけて出している。よって、x=50のときのy2500が100になるのだ。
<script type="text/javascript"> var x; var y; var z = 0.04; var txt = ''; for (x = -50; x < 51; x = x +1){ y = x*x*z; if(txt == ''){txt = y;} else{txt = txt+','+y;} } document.write('<img src="https://chart.googleapis.com/chart?chxt=x,y&chxr=0,-50,50|1,0,100&cht=lc&chs=500x250&chd=t:',txt,' "/>'); </script>
Google Chart ApiをPOSTで使う
POSTで使う方法はここに詳細が載っている。
GETで使う場合は超お手軽だが、2kしか許されない。POSTは若干めんどくさいが、16Kまで許されるのだ。URLの長さが8倍までいいってことだろう。また数字を短縮する独自の表記法もあるようで、それを使えばもっとたくさんのデータを扱ってグラフを作ることができるだろう。ただ独自の表記を覚えるのがめんどくさそうだし、小数点以下にも対応していなそうだ。（多分）
pythonでPNGを吐き出すchart.pyをつくって、htmlから<img src="chart.py" />というように使うのだ。
これなら入力値に応じたグラフをリアルタイムに表示することも可能だ。データも8倍使えるしな。でもいずれにせよ制限があるから、使い方によっては、matplotlibのがやっぱりいいのかもしれない。ただ、GAEでmatplotlibが使えるのかは不明だ。
