0

I need to Build a pie chart on a visualforce page that I used in Case Console as Top component. This pie Chart must show the Cases: Open and Closed (Image below). enter image description here

There is a simple way to build this chart using apex and visualforce? I had in my apex controller the List with all Case, the List with Open Cases and the List with Closed Case, I only need a way to put this in a donut chart.

My apex code:

//get all cases
            cases=[SELECT COUNT() FROM Case 
                   WHERE  AccountId =: currentcase.AccountId];

            //get all open cases
            opencases=[SELECT COUNT() FROM Case 
                   WHERE  AccountId =: currentcase.AccountId AND Status !='CLOSED'];
            //get all closed cases  
            closedcases=[SELECT COUNT() FROM Case 
                   WHERE  AccountId =: currentcase.AccountId AND Status ='CLOSED']; 
1

Assuming only there are two statuses (Open, Closed) are available for your cases, you can create a Donut Chart as below using VF and Apex. You may modify this code if you have more than two statuses present, or else the data presentation won't be correct.

VF Code

<apex:page controller="DonutChartController" title="Donut Chart">
    <apex:chart height="350" width="450" data="{!pieData}">
        <apex:pieSeries dataField="caseCount" labelField="caseType" donut="50" />
        <apex:legend position="right"/>
    </apex:chart>
</apex:page>

Controller

public class DonutChartController {
    public List<PieWedgeData> getPieData() {
        Integer openCaseNo = 1000;//[SELECT COUNT() FROM Case WHERE  AccountId =: currentcase.AccountId] 
        Integer closeCaseNo = 500;//closedcases=[SELECT COUNT() FROM Case WHERE  AccountId =: currentcase.AccountId AND Status ='CLOSED']; 
        List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Open', openCaseNo));
        data.add(new PieWedgeData('Closed', closeCaseNo));
        return data;
    }

    // Wrapper class
    public class PieWedgeData {
        public String caseType { get; set; }
        public Integer caseCount { get; set; }
        public PieWedgeData(String caseType, Integer caseCount) {
            this.caseType = caseType;
            this.caseCount = caseCount;
        }
    }
}

Screenshot

enter image description here

0

Thank you Saroj for your help but I have so issues. I use your idea,inside my custom controller CarinServiceTopComponentController I wrote the wrapper class PieWedgeData and the method getPieDataCall

public class CarinServiceTopComponentController {
private Id recid;
public String accName{get; set;}
public String accPhone{get; set;}
public Integer callsNumber {get;set;}
public Integer callsNumberAnswered {get;set;}
public Integer callsNumberUnanswered {get;set;}

public CarinServiceTopComponentController(){
       recid = ApexPages.currentPage().getParameters().get('id');
Account currentAccount= [SELECT Id,Name,Phone FROM Account WHERE Id=:recid];
      callsNumber = [SELECT COUNT() FROM OCTO_Call_log__c WHERE OCTO_Case__r.AccountId =: recid];
            callsNumberAnswered = [SELECT COUNT() FROM OCTO_Call_log__c WHERE OCTO_Case__r.AccountId =: recid AND OCTO_Call_Result__c = 'ANSWERED'];
            callsNumberUnanswered = [SELECT COUNT() FROM OCTO_Call_log__c WHERE OCTO_Case__r.AccountId =: recid AND OCTO_Call_Result__c = 'NO ANSWER'];
}

public List<PieWedgeData> getPieDataCall() {
        System.debug('getPieDataCall');
        System.debug(callsNumberAnswered);
        System.debug(callsNumberUnanswered);
        List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Answer', 200));
        data.add(new PieWedgeData('Lost', 100));
        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;
        }
    }

}

and inside my vf page:

<div class="slds-p-horizontal--small slds-size--1-of-8 boderSection tile">
<div class="slds-p-horizontal--small slds-text-align--center slds-size--1-of-1">
     <span class="slds-text-heading--small">CASES</span>
</div>                         
<apex:chart height="100" width="100" data="{!pieDataCall}">
  <apex:pieSeries dataField="data" labelField="name" donut="50" colorset="#005FB2,#00396B" />
</apex:chart>
</div>

I think the code is good but The donut chart is not appearing in the Vf page. Below I show you the image: enter image description here

Which is the problem in your opinion?

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.