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
Tatiana Cooke 9Tatiana Cooke 9 

Am trying to use the google gauge functionality to bring in a guage chart on an account. I

Team, 

Am trying to use the google gauge functionality to bring in a guage chart on an account. I it to show the percent compelete of a record. I am using this link as a reference. http://salesforceselflearn.blogspot.in/

For some reason the visualforce page component is not showing up in the page layout of the Account. I have created the class and the visualforce page in our sandbox. Below is the code. 

Class
 
public class googleChartController {

    Public String acctId {get; set;}
    Public String query {get;set;}
    Private Decimal TotalFieldCount {get;set;}
    Private Decimal FilledFieldCount {get;set;}
    Public Decimal TotalPercentage {get;set;}
    
    Public GoogleChartController(ApexPages.StandardController controller){
        acctId = controller.getRecord().id;
        fetch();
    }
    
    public void fetch() {
        String SObjectApiName = 'Account';
        Map<String, Schema.SObjectType> objectMap = Schema.getGlobalDescribe();
        Map<String, Schema.SObjectField> fieldMap = objectMap.get(SObjectApiName).getDescribe().fields.getMap();
        
        String fieldString = '';
        for (String fieldName : fieldMap.keyset())
        {
            if(fieldString == '')
            {
                fieldString = FieldName; 
                } else{
                    fieldString = FieldString + ',' + fieldName;
                }
            }
        query = 'Select' + fieldString + 'from' + SObjectApiName + 'WHERE id = :accID' ;
        Account accountRecord = Database.query(query);
        TotalFieldCount = 0;
        FilledFieldCount = 0;
        for (String fieldName : fieldMap.keyset())
        {
            TotalFieldCount++;
            if(accountRecord.get(fieldName) != null || string.isBlank(fieldName))
            {
                FilledFieldCount++;
            }
        }
        TotalPercentage = (FilledFieldCount/TotalFieldCount) * 100;
        TotalPercentage = TotalPercentage.setScale(0);
        }
}

Visualforce Page
 
<apex:page > standardController="Account" extensions="googleChartController">
    <head>
        <script type = "text/javascript" src = "https://www.google.com/jsapi"> </script>
        <script type = "text/javascript">
            google.load("visualization", "1", {packages: ["guage"]});
            google.setOnLoadCallback (drawChart);
            
            
           function drawChart() {
                var totalFields = {TotalPercentage};
                var data= google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    [' % ', totalFields],
                    ]);                
                var options = {
                    width: 400, height: 200,
                    redFrom: 0, redTo: 75,
                    greenFrom: 75, greenTo: 100,
                    minorTricks: 10
               };
               
            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
            chart.draw(data, options);
            
          }
       </script>
   </head>
   <body>
       <div id="chart_div" style="width: 400px; height: 200px;"></div>
   </body>
</apex:page>


Apprecaite any help. 

Regards, 

TC
 
BHinnersBHinners
You might want to start with the code in the Visualforce Guide as an example:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_quick_start_advanced_google_charts.htm