Hi,

Im trying to create a class and VF page.Here i need to show some reports in google chart.Below mentioned is the class .

public class GoogleChartsController
{
@RemoteAction
public list<AggregateResult> lstAR = new list<AggregateResult>();

public GoogleChartsController()
{
lstAR = [SELECT  SUM(Almost_Overdue__c) AO ,SUM(Balance_Overdue__c) BO ,SUM(Total_Balance__c) TB ,Account_NameLookup__c from Invoice__c GROUP BY Account_NameLookup__c];
}
public list<OppClass> getResults()
{
list<OppClass> lstResult = new list<OppClass>();
for (AggregateResult ar: lstAR)
{
oppClass objOppClass = new oppClass(ar);
lstResult.add(objOppClass);
}
return lstResult;
}

class oppClass
{
public Double AO
{ get;set; }
public Double BO
{ get;set; }
public Double TB
{ get;set; }



public oppClass(AggregateResult ar)
{
//Note that ar returns objects as results, so you need type conversion here
AO = (Double)ar.get('AO');
BO = (Double)ar.get('BO');
TB = (Double)ar.get('TB');


}
}
}

<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"/>
 
    <!-- Google Charts will be drawn in this DIV -->
    <div id="chartBlock" />
     
    <script type="text/javascript">
        // 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
          GoogleChartsController.Results( 
                 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('number', 'AO');
                     data.addColumn('number', 'BO');
                     data.addColumn('number', 'TB');    
                     // add rows from the remoting results
                     for(var i =0; i<result.length;i++){
                        var r = result[i];
                        data.addRow([r.AO, r.BO, r.TB]); 
                      }
                    // all done, lets draw the chart with some options to make it look nice.
                    visualization.draw(data)
          } 
    </script>
</apex:page>

 I used @remote action also.But values are not displaying in VF page.Do we need to used global in class?If yes where i need to give the global variable.Can anyone help me on this??