Sign Up ›
  • BlueBerry
  • NEWBIE
  • 0 Points
  • Member since 2014
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
1 replies

Display Google gauge chart on selection of Account Name

Apex Class :

public with sharing class AccountController {

    public String account { get; set; }

public List<SelectOption> getListOfAccounts()
{
           List<Account> AccountList = [select id,Name from Account] ;
           System.debug('Accounts'+AccountList.size());
           List<SelectOption> AccountOptionList = new List<SelectOption>();
           AccountOptionList .add(new SelectOption( ' ' ,'---Select---'));
           for(Account acc : AccountList )
           {
                      AccountOptionList .add(new SelectOption(acc.id , acc.Name));
           }
          return AccountOptionList ;
}

    public String selectedaccountId { get; set; }

    public AccountController() {

    }
}

VF Page :

<apex:page controller="AccountController">

<apex:form >
       <apex:pageBlock >
         <apex:pageBlockSection title="Select the Account" >
                      <apex:OutputPanel >
                                 <apex:selectList value="{!selectedaccountId}" size="1" multiselect="false" id="theSelectList" onChange="doChange(); return false;">
                                          <apex:selectOptions value="{!ListOfAccounts}" />
                                 </apex:selectList>
                                 <script> var options = document.getElementById("{!$Component.theSelectList}"); </script>
                        </apex:OutputPanel>
          </apex:pageBlockSection>
      </apex:pageBlock>
</apex:form>
<html>
  <head>
  
  <script type="text/javascript">
             var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    <script src="../../soap/ajax/33.0/connection.js" type="text/javascript"></script>
    <script src="../../soap/ajax/24.0/apex.js" type="text/javascript"></script>
    
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
   
   var noOfCase;
   function doChange(){
      var accId =options.value; 
       console.log('@@selectedaccountId=='+accId);
      // alert(options.value); 
      
      var caseQuery = sforce.connection.query(" select Id from case where AccountId= \'"+accId +"\' ");
      var case_records = caseQuery.getArray("records");
      noOfCase = +case_records.length;
      console.log('@@noOfCase =='+noOfCase);
      
      
   }
     
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

       /* var data = google.visualization.arrayToDataTable([
         // ['Label', 'Value'],
          //['Memory', 80],
          //['CPU', 55],
          //['Network', 68]
        //]);
        */
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Cases'); // must be string
        data.addColumn('number', 'value');
        data.addRow(['Cases',noOfCase]);

        var options = {
          width: 400, height: 120,
          redFrom: 0, redTo: 33,
          yellowFrom: 34, yellowTo: 66,
          greenFrom: 67 , greenTo: 100
          minorTicks: 5 
          };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        /*setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);*/
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>
    
  
</apex:page>
     

The Google chart needs to be displayed with Case Count , upon selection of the Account Name .
Can you please help with the loading of the chart?