Creating complex Custom Dashboard/Chart in Salesforce

Salesforce visualforce charting helps us to build custom or complex Charts.

Use Visualforce charting to assemble a variety of chart components into a complex chart that represents multiple sets of related data. The end result can be quite sophisticated and attention getting.

Below is a sample Visualforce and Apex code to build a custom Chart in salesforce.

public class ChartController {

    // Return a list of data points for a chart

    public List<Data> getData() {

        return ChartController.getChartData();

    }

    

    // Make the chart data available via JavaScript remoting

    @RemoteAction

    public static List<Data> getRemoteData() {

        return ChartController.getChartData();

    }

    // The actual chart data; needs to be static to be

    // called by a @RemoteAction method

    public static List<Data> getChartData() {

        List<Data> data = new List<Data>();

        data.add(new Data('Operation1', 80, 90, 55));

        data.add(new Data('Operation2', 65, 15, 65));

        data.add(new Data('Operation3', 50, 32, 75));

        data.add(new Data('Operation4', 72, 28, 85));

        data.add(new Data('Operation5', 65, 51, 95));

        data.add(new Data('Operation6', 48, 45, 99));

        return data;

    }

    

    // Wrapper class

    public class Data {

        public String name { get; set; }

        public Integer data1 { get; set; }

        public Integer data2 { get; set; }

        public Integer data3 { get; set; }

        public Data(String name, Integer data1, Integer data2, Integer data3) {

            this.name = name;

            this.data1 = data1;

            this.data2 = data2;

            this.data3 = data3;

        }

    }

}

<apex:page controller="ChartController">
<apex:chart data="{!data}" height="400" width="500">
    <apex:legend position="left"/>
    <apex:axis type="Numeric" position="left" title="Success Records" grid="true"
        gridFill="true" fields="data1,data2,data3" dashSize="2">
        <apex:chartLabel />
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="name" title="Operation Name">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries orientation="vertical" axis="left" stacked="true" colorSet="#AA9BFC,#0FD,#F10"
        xField="name" yField="data1,data2,data3" highlightColor="#AD9CFC"  title="Update,Delete,Insert"/>
</apex:chart>
</apex:page>

Regards,

Naveen

http://www.autorabit.com