I want the VF page to display a graph filtered by the account id. I will then add the visualforce page to my Account page layout.

Is it possible to do this? Is there any syntax for the page?

  • Do you want to put graph on standard page layout? – Santanu Boral Apr 6 '17 at 16:13
  • Yup I sure do, not just one either, loads! – Bart Apr 6 '17 at 16:14
  • Can you please clear, what does the graph means. I am understanding it like any ChartJs, Google chart etc over VF page? Or standard VF charts? – Ashwani Apr 6 '17 at 16:26
  • graph meaning chart – Bart Apr 7 '17 at 9:39

Yes, using <apex:chart> tag

<apex:page controller="PieChartController" title="Pie Chart">
    <apex:chart height="350" width="450" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name"/>
        <apex:legend position="right"/>

public class PieChartController {
    public List<PieWedgeData> getPieData() {
        List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Jan', 30));
        data.add(new PieWedgeData('Feb', 15));
        data.add(new PieWedgeData('Mar', 10));
        data.add(new PieWedgeData('Apr', 20));
        data.add(new PieWedgeData('May', 20));
        data.add(new PieWedgeData('Jun', 5));
        return data;

    // Wrapper class
    public class PieWedgeData {

        public String name { get; set; }
        public Integer data { get; set; }

        public PieWedgeData(String name, Integer data) {
            this.name = name;
            this.data = data;

Above will result as
Pie Chart

You can follow below URLs for more info:

Visualforce Charting

Building a Complex Chart with Visualforce Charting

  • Thanks @rsg I really struggle with the idea that one has to go to all this trouble just to be able to display more than two charts (graphs) in Classic page layout when its as easy as drag'n'drop in Lightning page layout. Knowing that Lightning can get around this additional workload and maintenance overhead means that the answer is clear. – Bart Apr 7 '17 at 9:38

You can look through the options for using Visualforce Charting.

Sometimes, people do not use Google Api for security reason and we do not want to pass secure data to other external API.

You need to create Standard Controller extension (as you want to place it on Account Page Layout) to prepare the chart data.

You can show multiple charts (>2 or lots)

<apex:page StandardController="Account" extensions="CustomExtn" title="Pie Chart">
    <apex:chart height="350" width="450" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name"/>
        <apex:legend position="right"/>
  • Thanks Santa, I though you'd brought my Christmas present early but alas, and I should have said previously that I am aware of the very well known functionality of adding up to a maximum of two graphs per p/l, as I alluded to in my previous comment I want to add "loads" not just two, thanks for trying though! – Bart Apr 6 '17 at 16:25
  • Pls find updated ans – Santanu Boral Apr 6 '17 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.