function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rafael.Martins.SantosRafael.Martins.Santos 

How create a Gauge chart and add on visualPage?

Hi,

I tried test the example of the below link, and the gauge is not displaying on the page.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_charting_appearance_gauge_charts.htm

Can someone share an example of a gauge chart with apex code?

Thanks
Rafael
Best Answer chosen by Rafael.Martins.Santos
Amit Chaudhary 8Amit Chaudhary 8
try to update apex class like below 
public class GaugeChartController {
    public String acctId {get;set;}
    
    public GaugeChartController(ApexPages.StandardController controller){
        acctId = controller.getRecord().Id; //'001x00000035SxX' ;
    }
    
    public List<gaugeData> getData() {
    	  Integer TotalOpptys = 0;
    	  Integer TotalAmount = 0;
          Integer thisMonth = date.Today().month();

          AggregateResult ClosedWonOpptys = [select SUM(Amount) totalRevenue, CALENDAR_MONTH(CloseDate) theMonth, COUNT(Name) numOpps
                                   from Opportunity
                                   GROUP BY CALENDAR_MONTH(CloseDate) LIMIT 1];
          
          List<gaugeData> data = new List<gaugeData>();
          data.add(new gaugeData(Integer.valueOf(ClosedWonOpptys.get('numOpps')) + ' Opptys', Integer.valueOf(ClosedWonOpptys.get('totalRevenue'))));
          return data;
     }

    public class gaugeData {
        public String name { get; set; }
        public Integer size { get; set; }

        public gaugeData(String name, Integer data) {
            this.name = name;
            this.size = data;
        }
    }
}

Let us know if this will help you
 

All Answers

Amit Chaudhary 8Amit Chaudhary 8
Please chech below post for code
1) http://blog.mirketa.com/dynamic-gauge-in-salesforce/
2) https://salesforce.stackexchange.com/questions/49771/how-to-build-a-gauge-dashboard-on-visual-force-page
3) https://github.com/developerforce/Visualforce-Charting-Examples/blob/master/src%20files/pages/GaugeDemo.page

Apex class 
public class GaugeChartController {
    public String acctId {get;set;}
    
    public GaugeChartController(ApexPages.StandardController controller){
        acctId = controller.getRecord().Id; //'001x00000035SxX' ;
    }
    
    public List<gaugeData> getData() {
    	  Integer TotalOpptys = 0;
    	  Integer TotalAmount = 0;
          Integer thisMonth = date.Today().month();

          AggregateResult ClosedWonOpptys = [select SUM(Amount) totalRevenue, CALENDAR_MONTH(CloseDate) theMonth, COUNT(Name) numOpps
                                   from Opportunity
                                  where AccountId =: acctId
                                   and StageName = 'Closed Won' 
                                   and CALENDAR_MONTH(CloseDate) =: thisMonth 
                                   GROUP BY CALENDAR_MONTH(CloseDate) LIMIT 1];
          
          List<gaugeData> data = new List<gaugeData>();
          data.add(new gaugeData(Integer.valueOf(ClosedWonOpptys.get('numOpps')) + ' Opptys', Integer.valueOf(ClosedWonOpptys.get('totalRevenue'))));
          return data;
     }

    public class gaugeData {
        public String name { get; set; }
        public Integer size { get; set; }

        public gaugeData(String name, Integer data) {
            this.name = name;
            this.size = data;
        }
    }
}



VF page 
<apex:page standardController="Account" extensions="GaugeChartController">
    <script>
            myChart.on('beforeconfig', function(config) {
            config.axes[0].margin=-10; 
        });
    </script>
    
    <apex:chart name="myChart" height="300" width="450" animate="true" data="{!data}">
        <apex:axis type="Gauge" position="gauge" title="Closed Won Opportunities"  minimum="0" maximum="30000" steps="10"/>
        <apex:gaugeSeries dataField="size" donut="50" colorSet="#78c953,#ddd"/>
    </apex:chart>
</apex:page>

Let us know if this will help you
 
Rafael.Martins.SantosRafael.Martins.Santos
Hi Amit,

Occurs this message:
List has no rows for assignment to SObject
Amit Chaudhary 8Amit Chaudhary 8
try to update apex class like below 
public class GaugeChartController {
    public String acctId {get;set;}
    
    public GaugeChartController(ApexPages.StandardController controller){
        acctId = controller.getRecord().Id; //'001x00000035SxX' ;
    }
    
    public List<gaugeData> getData() {
    	  Integer TotalOpptys = 0;
    	  Integer TotalAmount = 0;
          Integer thisMonth = date.Today().month();

          AggregateResult ClosedWonOpptys = [select SUM(Amount) totalRevenue, CALENDAR_MONTH(CloseDate) theMonth, COUNT(Name) numOpps
                                   from Opportunity
                                   GROUP BY CALENDAR_MONTH(CloseDate) LIMIT 1];
          
          List<gaugeData> data = new List<gaugeData>();
          data.add(new gaugeData(Integer.valueOf(ClosedWonOpptys.get('numOpps')) + ' Opptys', Integer.valueOf(ClosedWonOpptys.get('totalRevenue'))));
          return data;
     }

    public class gaugeData {
        public String name { get; set; }
        public Integer size { get; set; }

        public gaugeData(String name, Integer data) {
            this.name = name;
            this.size = data;
        }
    }
}

Let us know if this will help you
 
This was selected as the best answer
Rafael.Martins.SantosRafael.Martins.Santos
Hi Amit,

Thank you very much.
Now it's working.

Just one more thing.
Do you have some document that explain how build gauges?
i'm mean, that explain step by steps how create of the right way.

Thanks again.
Rafael
 
Rafael.Martins.SantosRafael.Martins.Santos
Hi Amit,

When the opportunity is low than 10000 the graphic become like the image below.

User-added image

Do you know how fix this?

Rafael