ペベリンスキーズ・ブログ

ペベリンスキーのチラシの裏。

Google Chart API

Google Chart API

任意のURLにアクセスするだけでPNG形式のグラフを作成してくれるサービス。折れ線や棒グラフ、円グラフなどから散布図やレーダーチャート、マップチャート、QRコードなどにも対応している。(Javascriptコードを貼ることで、HTML5+SVGのグラフも作成できます。)
f:id:pebbleinsky:20110724144131p:image
Google Chart Tools - Google Code
http://code.google.com/intl/ja/apis/chart/

Code Examples - Google Chart Tools - Google Code
http://code.google.com/intl/ja/apis/chart/interactive/docs/examples.html

Google Chart APIでグラフを描いてみた - WEB総合情報サイト arisa.biz
http://arisa.biz/%E3%81%8A%E5%BD%B9%E7%AB%8B%E3%81%A1/2011-04-27/google-chart-api%E3%81%A7%E3%82%B0%E3%83%A9%E3%83%95%E3%82%92%E6%8F%8F%E3%81%84%E3%81%A6%E3%81%BF%E3%81%9F

Google Chart API入門
http://www.ajaxtower.jp/googlechart/

グラフジェネレータ

Google Code Playground
http://code.google.com/apis/ajax/playground/?type=visualization

Google Chart API でレーダーチャートを作る « Stop Making Sense
http://99blues.dyndns.org/blog/2010/10/radar-chart_by_google-chart-api/

日本地図ジェネレーター – OTCHY.NET
http://www.otchy.net/20110217/japan-map-generator/

FilemakerとGoogleChartAPI

FM11にはグラフ機能が一応ありますが、細かい表示形式を選べないなど自由度が低くなっています。
そこでWebビューアGoogle Chart APIへのアドレスを挿入することで、より自由度の高いグラフを表示できます。
f:id:pebbleinsky:20110724143159p:image
f:id:pebbleinsky:20110724144131p:image
Webビューアのアドレス

"data:text/html,<body style=border:0;margin:0;padding:0;overflow:hidden;>
<img src=http://chart.apis.google.com/chart?chs=500x370&chd=t:" &Web::gc_field01& "," & Web::gc_field02& "," &Web::gc_field03& "," & Web::gc_field04& "," &Web::gc_field05&" 
&cht="&Web::gc_style &"&style=width:500;height:370;></body>"

f:id:pebbleinsky:20110724143752p:image

"data:text/html,<body style=border:0;margin:0;padding:0;overflow:hidden;>
<img src=http://chart.apis.google.com/chart?chs=500x370&chd=t:" &Web::gc_field01& "," & Web::gc_field02& "," &Web::gc_field03& "," & Web::gc_field04& "," &Web::gc_field05& "|" 
&Web::gc_field01 2& "," & Web::gc_field02 2& "," &Web::gc_field03 2& "," & Web::gc_field04 2& "," &Web::gc_field05 2&" 
&chco=ff0000,0000ff&cht=lc style=width:500;height:370;></body>"

日本語使用時の注意点

Webビューアのアドレスには日本語はそのまま使用できせん。使用する場合は文字コードを以下のように指定するか、日本語をURLエンコードして置き換えましょう。

"DATA:text/html;charset=utf-8,

ファイルメーカーのWEBビューワでGoogle Chart APIのグラフが文字化け|星屋工作室
http://hoshiya.biz/blog/2010/06/webgoogle-chart-api.php

Webビューアいろいろ

GoogleChartAPIの他にも、FilemakerのWebビューアを使うと住所からGoogleMapを表示したり、郵便番号から住所を自動取得したりできます。

【ハウツー】FileMaker Pro×Webの可能性 - 外部Webアプリと連携する方法とは | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/articles/2010/10/26/fm2/index.html