mabots' blog

知のレバレッジを最大化せよ (旧はてなダイアリーから移転しました。)

google Chart APIでQRコードも作れるときいて試しに使ってみる。

テクノロジー

4万アクセス記念にLTで仕様した、google Chart APIをエントリー化してみした。QRコード作成など便利なので使ってみてはいかかでしょうか

  • 特徴とか
    • imgタグでgoogleのプログラムを呼び出すことによって各種グラフを作成することかできる
    • グラフライブラリを使わずともグラフが描ける
      • 管理画面だけのサーバとか、JS中心の商品ページで使う
      • 大量のトラヒックでグラフライブラリやGDのサーバ資源消費量がすごいことになってる場合にも。
    • 豊富なサンプル、ライブラリ、継続性
      • グラフライブラリは結構バラバラに作られているのでサンプルソースが集まらない
      • 取り扱うライブラリは豊富(CPAN, PEAR, 各種JS libsもしかり)
  • fig.1
    • 最初のサンプル
      • chs
        • チャートサイズ。chs=300x200
      • chd
        • チャートデータ。chd=t:0.00,5.88,26.47,36.76,50.00,60.29,73.52,100.00のように渡すt:は後述しますがデータタイプです。今回はテキスト型
      • cht 


<img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=lc&amp;chd=t:0.00,5.88,26.47,36.76,50.00,60.29,73.52,100.00">
  • fig.2
    • 二系統にして色もつけてみる


<img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=lc&amp;chd=t:0.00,5.88,26.47,36.76,50.00,60.29,73.52,100.00|10,20,3,10,25,100&amp;chco=666666,3399ff">
  • fig.3
    • 軸もタイトルも追加
      • ただしこのままだと縦軸のデータとの縮尺が合わない。系統2は20でぐいーんと上昇するはずだが・・・


<img src="http://chart.apis.google.com/chart?chtt=People+per+1+train+car&amp;chs=300x200&amp;cht=lc&amp;chd=t:0.00,5.88,26.47,36.76,50.00,60.29,73.52,100.00|0.00,8.00,10.00,14.00,17.00,20.00,22.00,100.00&amp;chco=666666,3399ff&amp;chxt=x,y&amp;chxl=0:|shibuya|ebisu|meguro|gotanda|1:|0.00|10.00|25.00|50.00|75.00">
  • fig.4
    • 軸のスタート位置の調整 (chxr:: index, min, max)。この場合は0と100としておく。indexは1を指定。chxpは対応するラベル位置を指定(index, ラベル位置)
      • これで縦軸の縮尺が実際のデータと合致するようになる。
        • 縦軸の10と20のあたりがよくわかるようになりました。横軸は指定していないのでautomatic(gchartが均等割りする)ということです。ラベルがintなのかstringなのか指定できてautomaticだといいんですが。


<img src="http://chart.apis.google.com/chart?chtt=People+per+1+train+car&amp;chs=300x200&amp;cht=lc&amp;chd=t:0.00,5.88,26.47,36.76,50.00,60.29,73.52,100.00|0.00,8.00,10.00,14.00,17.00,20.00,25.00,100.00&amp;chco=666666,3399ff&amp;chxt=x,y&amp;chxl=0:|shinjuku|yoyogi|shibuya|ebisu|meguro|gotanda|1:|0|10|20|40|80|100&amp;chxr=1,0,100&amp;chxp=1,0,10,20,40,80,100">
  • fig.5
    • バーチャート。bvgにする。縦軸の軸ポジションを指定しデータ分析をしやすくしています。


<img src="http://chart.apis.google.com/chart?chtt=Bar+Chart&amp;chs=600x200&amp;chxt=x,y&amp;chxl=0:|GroupA|GroupB|GroupC|GroupeD|GroupeE|1:|0.00|10.00|25.00|70&amp;cht=bvg&amp;chd=t:3.84,15.38,19.23,38.46,46.15|7.69,15.38,19.23,61.53,100.00&amp;chdl=data1|data2&amp;chco=0000ff,ff0000&amp;chbh=25&amp;chxp=1,0,10,25,70">
  • fig.6
    • パイチャート 

<img src="http://chart.apis.google.com/chart?chtt=pie&amp;chts=000000,8&amp;chs=300x100&amp;chf=bg,s,ffffff&amp;cht=p3&amp;chd=t:37.50,31.25,17.85,13.39&amp;chl=a|b|c|d&amp;chco=99ff00,996633,99cccc,99ff33">


<img src="http://chart.apis.google.com/chart?chs=150x150&amp;cht=qr&amp;choe=Shift_JIS&amp;chl=http%3A//www.google.com/">
  • 考察とか
    • ラベルを表示しようとすると枠からあふれてしまうことがあった。
    • 軸について数値を使う場合は気をつけてつくる必要がある
    • 大量のデータを渡すときに注意。(最大でも拡張エンコードの範囲までしかわたせない)
    • 項目数が多すぎると画像の途中でとぎれてしまう
      • 縮小処理などは別途必要(大きい画像でグラフを取得して別途GDで縮小するとか)
      • データをまとめてあげる必要がある
    • 単純な推移データや、棒グラフ、ラベルなし円グラフであれば十分使えそう。


Refence


おしまい!