December 12, 2013

Radar Chart using Visualforce and Apex in Salesforce

Sample Code:

Visualforce page:

<apex:page sidebar="false" Controller="Sample" showHeader="true" id="pg">
<apex:chart height="750" width="800" legend="true" data="{!data}">
    <apex:legend position="left"/>
    <apex:axis type="Radial" position="radial">
        <apex:chartLabel />
    <apex:radarSeries xField="memName" yField="tenthPercent" tips="true" opacity="0.4"/>
    <apex:radarSeries xField="memName" yField="twelthPercent" tips="true" opacity="0.4"/>
    <apex:radarSeries xField="memName" yField="age" tips="true" markerType="cross" strokeWidth="2" strokeColor="#f33" opacity="0.4"/>

Apex Controller:

public class Sample {   

    public List<RadarData> data {get;set;}
    public sample() {
    data = new List<RadarData>();
        List<Member__c> memList = new List<Member__c>();
        memList = [SELECT Name, Age__c, X10th__c, X12th__c FROM Member__c];
        for(Member__c mem : memList) {
            data.add(new RadarData(mem.Name, mem.X10th__c, mem.X12th__c, mem.Age__c));
    public class RadarData {
        String memName {get;set;}
        Decimal tenthPercent {get;set;}
        Decimal twelthPercent {get;set;}
        Decimal age {get;set;}
        public RadarData(String memName, Decimal tenthPercent, Decimal twelthPercent, Decimal age) {
            this.memName = memName;
            this.tenthPercent = tenthPercent;
            this.twelthPercent = twelthPercent;
            this.Age = age;


1 comment:

  1. Would you please provide some sample data that you are selecting from the Member__c object? That would make this article more informative. Thanks