function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lee SinLee Sin 

VF Chart is not working?

My Controller:
global class AR_RepWorkingReport {
        //public Map<ID,User> reps;
        //
        //
        //DeclinedLeads: Invoice Status='Lead Refunded'
        //AcceptedLeads: Invoice Status='Lead Sold/Charged'
    public List<User> repsList;
    public String selectedRep{get;set;}
    public String startdate{get;set;}
    public String enddate{get;set;}
    public repstats statistics{get;set;}
    public List<clients> clientscount{get;set;}
    public List<PieWedgeData> ActivitiesPieData{get;set;}
    public List<PieWedgeData> ClientsPieData{get;set;}
    public boolean renderPie{get;set;}
    public AR_RepWorkingReport()
    {
        repsList=[select ID,Name from User where isActive=true and type_rep__c in ('Junior','Senior') order by Name ];
        statistics=new repstats();
        clientscount =new  List<clients>();  
        ActivitiesPieData=new List<PieWedgeData>();
        ClientsPieData=new List<PieWedgeData>();
        renderPie=false;
    }
    public List<PieWedgeData> getAcPieData()
    {
        return ActivitiesPieData;
    }
    public List<PieWedgeData> getclPieData()
    {
        return ClientsPieData;
    }
    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;
        }
    }
     public void getClientsPieData() {
        ClientsPieData = new List<PieWedgeData>();
        //List<PieWedgeData> clientsPie = new List<PieWedgeData>();
                For(clients c : clientscount)
        {
            if(Integer.valueOf(c.count)!=0){
                String chartclientName=c.Name==null?'None':C.name;
                ClientsPieData.add(new PieWedgeData(chartclientName, Integer.valueOf(c.count)));}
        }
    } 
    
    
    public void getActivitiesPieData() {
        ActivitiesPieData = new List<PieWedgeData>();
        //List<PieWedgeData> clientsPie = new List<PieWedgeData>();
        if(Integer.valueOf(statistics.voiceMail)!=0){
        ActivitiesPieData.add(new PieWedgeData('Voice Mail', Integer.valueOf(statistics.voiceMail)));
        }
        if(Integer.valueOf(statistics.ConversationCSuite)!=0){
        ActivitiesPieData.add(new PieWedgeData('Conversation with C Suite', Integer.valueOf(statistics.ConversationCSuite)));
        }
        if(Integer.valueOf(statistics.ConversationHR)!=0){
        ActivitiesPieData.add(new PieWedgeData('Conversation with HR', Integer.valueOf(statistics.ConversationHR)));
        }
        if(Integer.valueOf(statistics.ConversationOther)!=0){
        ActivitiesPieData.add(new PieWedgeData('Conversation - Other', Integer.valueOf(statistics.ConversationOther)));
        }
        if(Integer.valueOf(statistics.NML)!=0){
        ActivitiesPieData.add(new PieWedgeData('No Message Left', Integer.valueOf(statistics.NML)));
        }
        if(Integer.valueOf(statistics.FollowUpReminder)!=0){
        ActivitiesPieData.add(new PieWedgeData('Follow Up Reminder', Integer.valueOf(statistics.FollowUpReminder)));
        }
        if(Integer.valueOf(statistics.AcceptedLeads)!=0){
         ActivitiesPieData.add(new PieWedgeData('Accepted Leads', Integer.valueOf(statistics.AcceptedLeads)));
        }
        if(Integer.valueOf(statistics.DeclinedLeads)!=0){
         ActivitiesPieData.add(new PieWedgeData('Declined Leads', Integer.valueOf(statistics.DeclinedLeads)));
        }
        if(Integer.valueOf(statistics.RFI)!=0){
         ActivitiesPieData.add(new PieWedgeData('RFI', Integer.valueOf(statistics.RFI)));
        }
    } 
    /*
    public void getActivitiesPieData() {
        ActivitiesPieData = new List<PieWedgeData>();
        //List<PieWedgeData> clientsPie = new List<PieWedgeData>();
        ActivitiesPieData.add(new PieWedgeData('Voice Mail', 1));
        ActivitiesPieData.add(new PieWedgeData('Conversation with C Suite',2));
        ActivitiesPieData.add(new PieWedgeData('Conversation with HR', 3));
        ActivitiesPieData.add(new PieWedgeData('Conversation - Other',4));
        ActivitiesPieData.add(new PieWedgeData('No Message Left',5));
        ActivitiesPieData.add(new PieWedgeData('Follow Up Reminder', 6));
         ActivitiesPieData.add(new PieWedgeData('Accepted Leads', 7));
         ActivitiesPieData.add(new PieWedgeData('Declined Leads', 8));
         ActivitiesPieData.add(new PieWedgeData('RFI', 9));
    } */
    
    
    
    public void fetchRepBehaviors()
    {
        
        statistics=new repstats(); 
        clientscount =new  List<clients>();
        Map<String,integer> clientsmp=new Map<String,integer>();
        if(startdate!=null&&enddate!=null&&selectedRep!=null){
            Date statsstart=date.parse(startdate);
            Date statsend=date.parse(enddate);
            
            List<Task> repTasks=[select CallType__c,Contact_Type__c,whatId from Task where OwnerId=:selectedRep and createddate>=:statsstart and createddate<=:statsend];
            //IDs of Prospects
            List<ID> whatids=new LIst<ID>();
            List<Opportunity> repopps=[select Opportunity_Type__c,Opportunity_stage__c,Invoice_Status__c from Opportunity where (OwnerId=:selectedRep or Lead_sharing__c=:selectedRep) and createddate>=:statsstart and createddate<=:statsend];
           
            statistics.totalActivities=repTasks.size();
            System.debug('Number of Tasks: '+repTasks.size());
            for(Task t : repTasks)
            {
                if(t.CallType__c=='Conversation'){
                    if(t.Contact_Type__c=='Other'){statistics.ConversationOther++;}
                    else if(t.Contact_Type__c=='HR'){statistics.ConversationHR++;}
                    else if(t.Contact_Type__c=='C-Suite'){statistics.ConversationCSuite++;}
                }
                else if(t.CallType__c=='Left Voicemail'){
                    statistics.voiceMail++;
                }
                else if(t.CallType__c=='NML'){
                    statistics.NML++;
                }
                else if(t.CallType__c=='Follow up reminder'){
                    statistics.FollowUpReminder++;
                }
                whatids.add(t.whatid);
            }
            List<Account> prospects=[select Name,client_territories__c from Account where ID in :whatids];
            For(Account a: prospects)
            {
                if(clientsmp.containsKey(a.client_territories__c)){
                    Integer num=clientsmp.get(a.client_territories__c)+1;
                    clientsmp.put(a.client_territories__c, num);
                }
                else {
                    clientsmp.put(a.client_territories__c, 1);
                }
            }            
            For(String acctname : clientsmp.keySet()){
                clients c=new clients();
                c.count=clientsmp.get(acctname);
                c.name=acctname;
                clientscount.add(c);
            }
            
            For(Opportunity o : repopps){
                if(o.Opportunity_Type__c=='RFI'){
                    statistics.RFI++;
                }
                else if(o.Opportunity_Type__c=='Lead'){
                    if(o.Invoice_Status__c=='Lead Sold/Charged'){
                        statistics.AcceptedLeads++;
                    }
                    else if(o.Invoice_Status__c=='Lead Refunded'){
                        statistics.DeclinedLeads++;
                    }
                }
            }
            
        }
        renderPie=true;
        getActivitiesPieData();
        System.debug(ActivitiesPieData);
        getClientsPieData();
        System.debug(ClientsPieData);
    }
    

    
    //get the reps' names for the dropdown list
    public List<SelectOption> getReps(){
        List<SelectOption> options=new List<SelectOption>();
        for(User u : repsList){
            options.add(new SelectOption(u.id,u.name));
        }
        return options;
    }
    
    public class repstats
    {
        public repstats()
        {
            totalActivities=0;voiceMail=0;ConversationCSuite=0;ConversationHR=0;ConversationOther=0;AcceptedLeads=0;
            RFI=0;NML=0;FollowUpReminder=0;DeclinedLeads=0;
        }
        public integer totalActivities{get;set;}
        public integer voiceMail{get;set;}
        public integer ConversationCSuite{get;set;}
        public integer ConversationHR{get;set;}
        public integer ConversationOther{get;set;}
        public integer AcceptedLeads{get;set;}
        public integer RFI{get;set;}
        public integer NML{get;set;}
        public integer FollowUpReminder{get;set;}
        public integer DeclinedLeads{get;set;}
        
    }
    public class clients{
        public String Name{get;set;}
        public integer count{get;set;}
        public String ID{get;set;}        
    }
    
    
    
}

My VF Page:
<apex:page controller="AR_RepWorkingReport" showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
    var startdate,enddate;
    $(document).ready(function(){
        $("#arstart").datepicker({
        onSelect:function(dateText,inst){
            startdate=$(this).val();
            if(typeof enddate!=='undefined'){
                callActionMethod();
            }
        }}); 
        $("#arend").datepicker({
        onSelect:function(dateText,inst){
            enddate=$(this).val();
            if(typeof startdate!=='undefined'){
                callActionMethod();
            }
        }});    
    });
</script>
<script>
    function callActionMethod()
    {
        echo(startdate,enddate);
    }
</script>

<style type="text/css">
.pointer
{
    cursor:pointer;
    border:1px solid #ccc;
    padding: 5px;
}
</style>

</head>
<body>
    <div class="container">
        <div class="row well">
        <apex:form >  
            <div class="col-sm-2">         
                <apex:selectList value="{!selectedRep}" styleClass="form-control" size="1">           
                    <apex:selectOptions value="{!Reps}"></apex:selectOptions>
                    <apex:actionSupport event="onchange" reRender="resultPanel" action="{!fetchRepBehaviors}" status="myStatus"/>
                </apex:selectList>           
            </div>       
            <div style="float:left;">From:</div>
            <div class="col-sm-2 form-search">                        
                <input id="arstart"/>
            </div>
            <div style="float:left;">To:</div>
            <div class="col-sm-2">
                <input id="arend" />
            </div> 
         <apex:actionfunction name="echo" action="{!fetchRepBehaviors}" reRender="resultPanel" status="myStatus">
            <apex:param name="startdate" assignTo="{!startdate}" value=""/>
            <apex:param name="enddate" assignTo="{!enddate}" value=""/>    
        </apex:actionFunction>
        </apex:form>  
    </div>
</div>
<apex:outputPanel id="resultPanel">
        <apex:actionstatus startText="Requesting..." stopText="" id="myStatus" styleclass="hassuccess"/>
    <div class="container">
        <div class="row">
            <div class="col-md-3">    
                <table class="table  table-hover">
                    <tr>
                    <td style="color:orange"><apex:outputLabel value="Activity Type"/></td>
                    <td style="color:orange"><apex:outputLabel value="Count"/></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Voice Mail"/></td>
                    <td><apex:outputText value="{!statistics.voiceMail}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Conversation with C Suite"/></td>
                    <td><apex:outputText value="{!statistics.ConversationCSuite}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Conversation with HR"/></td>
                    <td><apex:outputText value="{!statistics.ConversationHR}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Conversation - Other"/></td>
                    <td><apex:outputText value="{!statistics.ConversationOther}"></apex:outputText></td>
                    </tr>                
                    <tr>
                    <td><apex:outputLabel value="No Message Left"/></td>
                    <td><apex:outputText value="{!statistics.NML}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Follow Up Reminder"/></td>    
                    <td><apex:outputText value="{!statistics.FollowUpReminder}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><b><apex:outputLabel value="Total Activities" style="color:red;"/></b></td>    
                    <td><apex:outputText value="{!statistics.totalActivities}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Accepted Leads"/></td>
                    <td><apex:outputText value="{!statistics.AcceptedLeads}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="Declined Leads"/></td>
                    <td><apex:outputText value="{!statistics.DeclinedLeads}"></apex:outputText></td>
                    </tr>
                    <tr>
                    <td><apex:outputLabel value="RFI"/></td>
                    <td><apex:outputText value="{!statistics.RFI}"></apex:outputText></td>
                    </tr>
                </table>    
            </div>
  
        <div class="col-md-5">    
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th style="color:orange">Client Territory</th>
                        <th style="color:orange">Count</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:repeat value="{!clientscount}" var="List">
                    <tr>
                        <td><apex:outputLabel value="{!List.Name}"></apex:outputLabel></td>
                          <td><apex:outputLabel value="{!List.count}"></apex:outputLabel></td>
                    </tr>
                    </apex:repeat>
                </tbody>
            </table>
         </div>  
       </div>
    </div>
    
<div>
            <apex:chart height="350" width="450" data="{!AcPieData}" rendered="{!renderPie}">
                <apex:pieSeries dataField="data" labelField="name"/>
                <apex:legend position="right"/>
            </apex:chart>  
            </div>
            <div>

</div>
</apex:outputPanel>
         <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <p class="navbar-text pull-left">Site Built by Jack Wang, Dallas TX, 2014</p>
        <a class="navbar-btn btn-info btn pull-right" href="mailto:jack.wang@accelerationretirement.com">Contact Me</a> 
    </div>  
    </div>



</body>
</html>
</apex:page>

The JS Debug Log:
User-added image

User-added image
 
BharathimohanBharathimohan
Hi Lee Sin,

Did you got this to work?

The bootstap css overrides the salesforce native visualforce charting css causing the chart to distort. Please let me know if you found the solution or workaround.

Thanks,
Bharathi
Puneet KhoslaPuneet Khosla
Add the following style in your VF code
 
[hidden], template
    {
        display:block !important;
    }
Rajneesh Ranjan 23Rajneesh Ranjan 23
It really did magic... Thank Puneet you for sharing this. :)
Aman Singh ChhokarAman Singh Chhokar
I came across the same problem so a big thank you from my side to puneet as well. :)
manikandan muthurajmanikandan muthuraj
Thank you Puneet !!

I spent almost half a day to fix this.. Really this is helpful.

Mani
micha_smicha_s
@Puneet   +100500!!!!
Bappi GirikonBappi Girikon
thanks @puneet :) it is such a magic. very nice soluition.
Shyama NirmalShyama Nirmal
@Puneet - Thanks. Its saved my time. :)
Ekaksh KoriEkaksh Kori
Thanks for your excellent post, nice work keep it up thanks for sharing the knowledge. And i like to share about TN Post Office MTS Answer Key (https://postofficerecruitment.com/postal-mts-recruitment).
Utpal KonwarUtpal Konwar
I really enjoyed reading the post you shared. I hope you will get to read such an article in future also.
 Website: https://www.assamsakori.org/p/assam-career-2022-latest-assam-govt.html