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
Jawad Rehman01Jawad Rehman01 

Problem with Google Chart

Hi developers,

I am creating chart using google charting API. The chart is working on load of the page but when i use the api with button click, the chart is not rendering. I have debug the code and found that google api is calling the function but problem in remoting function on click of button

Visualforce Code
<apex:page controller="GoogleChartsController" sidebar="false"> 
    <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
     
    <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue"/>
    <apex:form >
         <apex:pageBlock >
        <apex:pageBlockSection >
             <apex:commandButton value="Go" onclick="testfunction();"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
   
    <!-- Google Charts will be drawn in this DIV -->
    <div id="chartBlock" />
     
    <script type="text/javascript">
    
        function testfunction()
        {
             // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
       
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initCharts);
   
        function initCharts() {         
          // Following the usual Remoting syntax
          // [<namespace>.]<controller>.<method>([params...,] <callbackFunction>(result, event) {...}
          // controller : GoogleChartsController
          // method : loadOpps
          ortoo_qra.GoogleChartsController.loadOpps( 
                 function(result, event){  
                     // load Column chart
                     var visualization = new google.visualization.ColumnChart(document.getElementById('chartBlock'));
                     // Prepare table model for chart with columns
                     var data = new google.visualization.DataTable();
                     data.addColumn('string', 'Opportunity');
                     data.addColumn('number', 'Expected Revenue');
                     data.addColumn('number', 'Amount');    
                     // add rows from the remoting results
                     for(var i =0; i<result.length;i++){
                        var r = result[i];
                        data.addRow([r.Name, r.ExpectedRevenue, r.Amount]); 
                      }
                    // all done, lets draw the chart with some options to make it look nice.
                    visualization.draw(data, {legend : {position: 'top', textStyle: {color: 'blue', fontSize: 10}}, width:window.innerWidth,vAxis:{textStyle:{fontSize: 10}},hAxis:{textStyle:{fontSize: 10},showTextEvery:1,slantedText:false}});
              }, {escape:true});
          } 
        }
       
    </script>
</apex:page>

Controller 
global with sharing class GoogleChartsController {
     
    /**
      Loads most recent 10 Opportunities
    */
    @RemoteAction   
    global static Opportunity[] loadOpps() {
        return [select Id, Name, ExpectedRevenue, Amount from Opportunity order by CreatedDate DESC limit 10];
    }   
 
}