Pie chart and Bar chart using Apex in Visualforce page

Sample Code:

Visualforce page:

<apex:page controller="Graph" >
    <apex:pageblock title="Members and their Years of experience" >
        <apex:chart height="250" width="350" data="{!pieData}">
            <apex:pieSeries tips="true" dataField="data" labelField="name"/>
            <apex:legend position="bottom"/>
        </apex:chart>
    </apex:pageblock>
                       
    <apex:pageblock title="Members and their Years of experience" >
        <apex:chart height="250" width="350" data="{!pieData}">
            <apex:axis type="Numeric" position="left" fields="data" title="Years of experience"/>   
            <apex:axis type="Category" position="bottom" fields="name" title="Member"/>           
            <apex:barSeries orientation="vertical" axis="left" xField="name" yField="data"/>
        </apex:chart>
    </apex:pageblock>           
</apex:page>


Apex Controller:

public with sharing class Graph

    public List<PieWedgeData> getPieData()
    { 
        List<PieWedgeData> data = new List<PieWedgeData>();
        List<Member__c> memb = new List<Member__c>(); 
       
        String sql = 'SELECT Name, Year_s_Of_Experience__c FROM Member__c';
        memb = Database.Query(sql);
        for(Member__c temp:memb)
        {          
            data.add(new PieWedgeData(temp.Name,temp.Year_s_Of_Experience__c));
        }
        return data; 
    } 
   
    // Wrapper class 
    public class PieWedgeData
    { 
        public String name { get; set; } 
        public Decimal data { get; set; } 
       
        public PieWedgeData(String name, Decimal data)
        { 
            this.name = name; 
            this.data = data; 
        } 
    } 
}


Output:


9 comments:

  1. When I am implementing the same , I can see lable name inside chart. I want to remove these labels from chart only want on legend. I have seen sales force documentation there is also same thing but In my case I am unable to remove them, Might be this is happening because of releases and updates.

    ReplyDelete
  2. Same here. I want to dump pie chart labels & can't do it.

    ReplyDelete
  3. OK. Here's how to remove labels. Close your apex:pieSeries with a > not a />

    Then, as a child to pieSeries, insert




    That will give you the Legend with name, but keep that name off the pie chart.

    ReplyDelete
  4. OK, that didn't show...
    apex:chartLabel display="none"
    apex:pieSeries

    where the first is a one line tag and the second closes the apex:pieSeries you started above.

    ReplyDelete
  5. Can someone help me understand where the pie data is stored? I understand the rest.

    ReplyDelete
  6. Can someone help me to understand me how to get details stored in particular bar on clicking that bar and get details displayed in that bar on nextpage

    ReplyDelete
  7. how we are getting the different colors in piechart when we add the more records...

    ReplyDelete
    Replies
    1. By default Salesforce takes its own colors. To define the color use colorset attribute. Check this link - http://www.infallibletechie.com/2016/11/chart-colors-in-visualforce-charting.html

      Delete