Visualforceで散布図を表示

Winter'13でグラフを表示するためのapex:chartが正式にリリースされました。

これを使用して散布図を表示することができます。

Apex

public with sharing class Chart_ScatterSeries {
    
    public List<Data> getData() {
        return Chart_ScatterSeries.getChartData();
    }
    
    @RemoteAction
    public static List<Data> getRemoteData() {
        return Chart_ScatterSeries.getChartData();
    }
    
    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90));
        data.add(new Data('Feb', 44, 15));
        data.add(new Data('Mar', 25, 32));
        data.add(new Data('Apr', 74, 28));
        data.add(new Data('May', 65, 51));
        data.add(new Data('Jun', 33, 45));
        data.add(new Data('Jul', 92, 82));
        data.add(new Data('Aug', 87, 73));
        data.add(new Data('Sep', 34, 65));
        data.add(new Data('Oct', 78, 66));
        data.add(new Data('Nov', 80, 67));
        data.add(new Data('Dec', 17, 70));
        return data;
    }
    
    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Data(String name, Integer data1, Integer data2) {
            this.name = name;
            this.data1 = data1;
            this.data2 = data2;
        }
    }
}

Visualforce

<apex:page controller="Chart_ScatterSeries">
    <apex:chart height="530" width="700" animate="true" data="{!data}">
        <apex:scatterSeries xField="data1" yField="data2"  markerType="circle" markerSize="3"/>
        <apex:axis type="Numeric" position="bottom" fields="data1"  title="Torque" grid="true">
            <apex:chartLabel />
        </apex:axis>
        <apex:axis type="Numeric" position="left" fields="data2"  title="Lateral Motion" grid="true">
            <apex:chartLabel />
        </apex:axis>
    </apex:chart>
</apex:page>