[Force.comでWeb制作]Google Charts で簡単グラフ表示

By |11月 1, 2009|Force.comでWeb制作, |

このエントリーをはてなブックマークに追加
Delicious にシェア

Google Chartsという便利なサービスがあります。
例えばこんな感じでURLにパラメータ付けてやるだけで、簡単にグラフ画像を生成してくれるサービスです。
http://chart.apis.google.com/chart?cht=p3&chd=t:0.3,0.7&chs=275×100&chf=bg,s,F3F3EC&chl=Won|Lost&chco=5555ff
URLの書式は
http://chart.apis.google.com/chart?<パラメータ 1>&<パラメータ 2>&<パラメータ n>
こんな感じになっており、グラフのタイプやサイズや色やデータの値などを渡すだけで、グラフ画像が返されます。

このGoogle Chartsと、数式タグであるImage（）関数を組み合わせることで、ノンプログラミングで簡単にSalesforce上にグラフを作ることができます。例えば、レコードの詳細画面に簡易グラフを付けたり、ビューの画面で各レコードの情報をそれぞれのグラフを出して一覧表示したり、ということができます。これによって、従来はレポート/ダッシュボードだけに依存していたようなグラフ表示がSalesforceのほとんどの画面で簡単に現場担当者レベルで設定することができるようになります。

参考：Using Formulas and Google Charts to Visualize Data

[完成例]

レコード詳細画面

ビュー画面
ws000078

[やってみよう]

実装方法は単純で、例えば新規にカスタム項目を作って[数式項目]→[テキスト]として作成して、数式の内容に

[php]
IMAGE("http://chart.apis.google.com/" &
//チャートタイプを3次元円グラフに設定
"chart?cht=p3" &
//チャートデータを設定
"&chd=t:" &
//チャートデータに渡す成約商談率を算出
Text(Won__c/(Won__c + Lost__c)) & "," &
//チャートデータに渡すロスト商談率を算出
Text(Lost__c/(Won__c + Lost__c)) &
//チャート画像サイズを設定
"&chs=275×100" &
//チャート背景色、ラベルテキスト、チャート色を設定
"&chf=bg,s,F3F3EC&chl=Won|Lost&chco=5555ff",
//画像のaltテキストを設定
"chart text")
[/php]

と記述すると、以下のような内容が出力されます。

ここで、カスタム項目「Won__c」は積み上げ集計項目で取引先に紐づく商談の契約済みフェーズのものの合計金額、カスタム項目「Lost__c」は積み上げ集計項目で取引先に紐づく商談のロストフェーズのものの合計金額に設定されている前提です。

[IMAGE()関数について]

数式タグのIMAGE()関数は、以下の書式です。

[php]
IMAGE( image_url, alt_text )
[/php]

このimage_urlの部分にGoogle ChartsへのURLを設定します。この時に積み上げ集計項目などの値をURL文字列に連結していくときは、その項目値をTEXT（）関数で数値型から文字列型に変換する必要があります。

[Google ChartsのURLパラメータについて]

詳細はGoogle Charts API デベロッパーズガイドに詳しいです。
必須のパラメータとして、チャートサイズ、チャートデータ、チャートタイプ、を設定する必要があり他のたくさんあるパラメータはオプションで設定できます。チャートの色や棒グラフの太さや表示ラベルなどなど、かなり細かく表示設定をすることができます。たぶんSalesforceのダッシュボードと同じくらい細かい設定ができます。

必須パラメータとオプション パラメータ

選択できるチャートタイプには、

  • 折れ線グラフ
  • スパークライン
  • 棒グラフ
  • 円グラフ
  • ペン図
  • 散布図
  • レーダーチャート
  • 地図
  • Google-o-meter

と見慣れたものから珍しいものまで大抵のグラフは生成可能です。各チャートの解説とチャートデータパラメータの渡し方はデベロッパーズガイドの各チャートタイプの説明に詳しく書いてます。

[サンプルパッケージ]

Google Chartsを活用したカスタム項目のセットが一発インストールできるパッケージがSalesforceのエンジニアの方により配布されてます。
https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t30000000WmHY
これは便利！取引先と商談に設定するGoogle Chartsのカスタム項目サンプルがたくさん入ってます。

[ポイント]

  • IMAGE（）関数を使う
  • Google Chartsへのパラメータのチャートデータの値に、積み上げ集計項目値などのグラフ表示したい項目値を渡す。