Google Fusion Tables 埋め込みチャート(embeddable code)のURL仕様
Google Fusion Tablesで定義したチャート(グラフ)は、「Get embeddable code」ボタンを押すと、iframeでブログやHPに埋め込むことができます(要public or unlisted)。
チャートの値の上をマウスオーバーさせると数値などが表示される、インタラクティブなものです(Flash形式かと思いましたが、iPadでも表示できたのでHTML5かもしれません)。
通常はそのままコピペして埋め込めばよいのですが、やはりカスタマイズできるならしたいですし、プログラムから呼び出す用途であれば、URLは可能な限り簡略化したいですね。
そんなわけで、このパラメータ仕様を解析し、使いやすくしていきたいと思います。
まずはGoogleが吐き出したそのままのコードを見てみましょう(from句のtableidはXXXXXXに置き換えてます)。
今回はURLの解析が目的なので、src部分だけ抜き出しましょう。
http://www.google.com/fusiontables/embedviz?gco_chartArea=%7B%22top%22%3A%2230%22%7D&containerId=gviz_canvas&isXyPlot=true&q=select+col0%2C+col14%2C+col15+from+XXXXXX+where+col0+%3E%3D+'1989'&qrs=+and+col0+%3E%3D+&qre=+and+col0+%3C%3D+&qe=+order+by+col0+asc+limit+22&viz=GVIZ&t=LINE&width=500&height=300
これを、パラメータ毎に分解します。
- gco_chartArea=%7B%22top%22%3A%2230%22%7D
- containerId=gviz_canvas
- isXyPlot=true
- q=select+col0%2C+col14%2C+col15+from+XXXXXX+where+col0+%3E%3D+'1989'
- qrs=+and+col0+%3E%3D+
- qre=+and+col0+%3C%3D+
- qe=+order+by+col0+asc+limit+22
- viz=GVIZ
- t=LINE
- width=500
- height=300
さてこれを解析し、それぞれのパラメータの意味と省略の可否を調べてみました。
解析結果
パラメータ | 意味 | 省略の可否 |
---|---|---|
gco_chartArea | 上記要素をデコードすると("top":"30")になり、余白を定義するようです。配列として認識するらしく、「("top":"30","left":"15")」(この場合、上30px、左15px)等と記述します。 | ○ |
containerId | きっとこれは変更しちゃいけないと思うw | - |
isXyPlot | falseに変更しても変化が見られませんでしたが、パラメータ自体をなくすと、カラム1番目をX軸として認識せず、値の1つとして認識します。 | ○ |
q | SQL文。内容が長いため後述。 | - |
qrs | なぜかq中にあるwhere句の一部(例:「and 単価 >」)が入ります。省略可。 | ○ |
qre | qrsと同じ。省略可。何なんだろ。 | ○ |
qe | これもorder句の一部が入りますが、省略は不可です。ただしlimit句は省略可。行数制限と思われるので、念のため省略のほうが望ましいかも。 | - |
viz | 意味不明ですが、省略は不可です。定型句って事で。 | - |
t | チャートの種類です。LINE・BAR・PIEなど、FTで選択できる種類を指定できます。 | - |
width | 横幅(px)です。無指定だと画面maxに広がります。ただしページを開いた時のサイズに合わせるだけで、その後画面を伸縮させても自動調整してくれません。まぁFlashだし。 | ○ |
height | 高さ(px)です。無指定も可能ですが、すごく低くて潰れてしまうため、明示してあげましょう。 | ○ |