数週間ほど前、DaveCarollとSandeep Bhanotが行ったWebinarでWinter 12'リリースのプラットフォーム新機能について解説されました。

その中の一つにSandeepがデモしたVisualfroceチャートがあります。
これはWinter '12でパイロットリリースの機能で、カスタマイズした複雑なチャートをVisualforceのコンポーネントやタグだけで実現出来るものです。
シンプルなパイチャートから、左のスクリーンショットの様に棒グラフ&折れ線グラフを複合した複雑なものまで、標準のVFチャートコンポーネントをを使って表現できます。
このチャートでは2つの異なるデータが一つのチャートに入っています。棒グラフは月毎のトータルの売上を表しています。折れ線グラフは月毎の受注した商談数を表しています。
以下がVFページのサンプルです。

Visualforce Page : OppsChart

<apex:page controller="OppsChartController" showHeader="false" sidebar="false"> 

    <apex:sectionHeader title="Opportunity Analysis for 2011"/> 

    <apex:chart height="380" width="700" data="{!oppDataWithMonthNames}"> 

        <apex:legend position="right"/> 

        <apex:axis type="Numeric" position="left" fields="monthlyRev" title="Revenue ($)"/> 

        <apex:axis type="Category" position="bottom" fields="month" title="Month of the Year"> 

        <apex:chartLabel rotate="315"/> 

        </apex:axis> 

        <apex:barSeries title="Monthly Sales" orientation="vertical" axis="left" xField="month" yField="monthlyRev"> 

            <apex:chartTips height="20" width="120"/> 

        </apex:barSeries> 

        <apex:axis type="Numeric" position="right" fields="noOfClosedOpps" title="Opportunities Closed" grid="true"/> 

        <apex:lineSeries title="Closed-Won" axis="right" xField="month" yField="noOfClosedOpps" fill="true" 

            markerType="cross" markerSize="4" markerFill="#FF0000"/> 

    </apex:chart> 

</apex:page> 

こちらはApexコントローラ側

Apex : OppsChartController

public with sharing class OppsChartController {
    public OppsChartController (){}
    public List getOppDataWithMonthNames() {
        AggregateResult[] result = [SELECT SUM(amount) monthlyRev, COUNT(name) noOfClosedOpps,
                                    CALENDAR_MONTH(CloseDate) month,
                                    CALENDAR_YEAR(CloseDate) year
                                    FROM Opportunity GROUP BY CALENDAR_YEAR(closeDate),
                                    CALENDAR_MONTH(CloseDate), stageName
                                    HAVING stageName='Closed Won' AND
                                    CALENDAR_YEAR(CloseDate) = 2011];
        List oppsData = new List();
        for (AggregateResult a : result)
        {
            Datetime d=Datetime.newInstance((Integer)a.get('year'),(Integer)a.get('month'), 1);
            OpportunityData opp = new OpportunityData(d.format('MMM'),
                                                      (Integer)a.get('noOfClosedOpps'),
                                                      (Double)a.get('monthlyRev'));    
            oppsData.add(opp);
        }
        return oppsData;
    }

    public class OpportunityData
    {
        public String month { get; set; }
        public Integer noOfClosedOpps { get; set; }
        public Double monthlyRev { get; set; }

        public OpportunityData(String mon, Integer noOfOpps, Double rev)
        {
            month = mon;
            noOfClosedOpps = noOfOpps;
            monthlyRev = rev;
        }
    }
}

上記のコードをもう少し解説していきます。

1) VFチャート コンポーネント/タグ:

Winter ’12でVisualforceのライブラリに様々なChartタイプをサポートするコンポーネント及びタグが追加されました。この高度なコンポーネントはを使うには、まず <apex:chart>(3行目)タグを利用する必要があります。
またいくつかの属性をを持っていますが、一番必要な属性は'data'です。'data'属性にチャートにバインドさせるデータを指定します。 <apex:chart>コンポーネントは複数の入れ子のコンポーネントを持つことができ、表示させたいChartタイプを指定します。
現在は3つのChartタイプをサポートしていて、パイチャート(<apex:pieSeries>), バーチャート(<apex:barSeries>) そしてラインチャート(<apex:lineSeries>)があります。 サンプルの様に、バーチャートとラインチャートは同一チャート上に重ねて表示することが可能です。それぞれのバーチャートとラインチャートは<apex:axis>コンポーネントを使用した2つのaxis(軸)が必要となります。ポジションとタイプ(‘Numeric’ もしくは ‘Category’)を軸ごとに属性に定義できます。

注意として、2つの異なるデータチャートで軸をシェアすることができます。バーチャートとラインチャートでは同じX軸(今年の月毎)を共有しています。

2) VFとのデータのバインディング :

VFチャートではデータとチャートをバインドするのにいくつかの方法が用意されています。<apex:chart>コンポーネント内の‘data’ 属性に、Controller/extensionからreturnされるSObjectもしくはApex ObjectのListを設定します。SObjectのListの場合、単純にSObjectのフィールドをチャート上のデータにプロットします。またはApex Objectをreturnさせることもできます。

このサンプルの場合はまず、<AggregateResult>としてSOQLクエリより取得したリストがあります。ここでSOQLのCALENDAR_MONTHファンクションは数値(1-12)を返しますが、チャートでは文字列を表示たいので、Monthの値を数値から文字列へ変更するシンプルなWrapperクラス(OpportunityData)を使って適切なデータを作成しています。 <apex:chart>コンポーネントの'data'属性にControllerメソッドバインディングすることに加え、バーチャートやラインチャートがどのSObject/Objectのフィールド/プロパティを利用するのかをX軸及びY軸に定義する必要があります。これは<apex:axis>コンポーネントの'fields'属性と、<apex:barSeries>/<apex:lineSeries>コンポーネントの‘xField’と‘yField’ 属性で設定できます。

最後に、より高度なユースケースとして、ChartをVFページ中に定義したJavascriptのfunctionもしくはJavascriptのArrayにバインドさせることも出来ます。Javascript functionとのバインディングでは、データをJavascript Remotingを使ってSalesforceから取得することも可能です。

この場合Javascriptによって取得されるデータは、VF Chartがレンダリングされるより前に取得されます。Javascript remotingの詳細についてはVisualforce Developers Guideの該当ページを確認してみて下さい。

3) その他: 

VF Chartingには他にも<apex:chartTips>や<apex:chartLabel>の様な、チャートの表示を調整する為のコンポーネントがいくつか用意されています。

サンプル中では、9行目に<apex:chartLabel>コンポーネントを使用して月のテキストを回転させています。その他の詳細はこれらのコンポーネントをVisualforce Developers Guideで確認して下さい。

このサンプルがVFチャート機能で何が出来るのかを理解するのに役立ちますでしょうか？数行のコードを書くだけでレポート等の分析機能と同じような高度なチャートが作成できます。また、ダッシューボードにこのカスタムVFページを埋め込むことによって、カスタムチャートを表現することも可能です。チャートはJavascriptによってレンダリングされるため(Flashや外部プラグインはいりません)、これらのカスタムチャートはVisualforceページに対応しているモバイルデバイスならば表示可能です。

VFチャートはWinter '12ではパイロットリリースとなっています。まずはDE or Sandbox組織上で有効化するよう、セールスフォース・ドットコムのサポートに依頼してください。今すぐ試してみましょう！！