Displaying Salesforce data in Google Image Charts

We have a requirement to display the accounts
i) having cases more than 5 in red color.
ii) having cases equal to 5 in yellow color.
iii) having cases less than 5 in green color.
Client needs two buttons monthly and weekly.
If client clicks on Monthly, it should show the month report and when clicked on Weekly it should show the past week report.
For this, we need to develop a VF page with a custom controller in Salesforce.
Here is the Apex class where we build URL. to which we need to hit the google.

public class googlechartcls{        public googlechartcls(ApexPages.StandardController controller) {      dt=System.now().addDays(-7);      System.debug('-----dt is+'+dt);      lstcase =[Select account.name,casenumber, origin, reason,status,status__c,subject,LastRespondedDateTime__c,Age__c  from Case WHERE CreatedDate >=: dt and status != 'Closed' and account.name!=null];      List<AggregateResult> aggres = new List<AggregateResult>();      aggres=[Select account.name,count(id) from Case WHERE CreatedDate = THIS_Week and status != 'Closed' and account.name!=null  group by account.name];      chart(aggres);      }        public List<case> getLstcases() {          return lstcase;      }        public List<case> lstcase;      public datetime dt{get; set;}      public void tdays() {          dt=System.now().addDays(-30);          aggres=[Select account.name,count(id) from Case WHERE CreatedDate >=: dt and status != 'Closed' and account.name!=null  group by account.name];          lstcase =[Select account.name,casenumber,origin, reason,status,status__c,subject,LastRespondedDateTime__c,Age__c from Case WHERE CreatedDate >=: dt and status != 'Closed' and account.name!=null];          chart(aggres);      }        public void sdays() {      dt=System.now().addDays(-7);      aggres=[Select account.name,count(id) from Case WHERE CreatedDate = THIS_WEEK and status != 'Closed' and account.name!=null  group by account.name];      lstcase =[Select account.name,casenumber,origin, reason,status,status__c,subject,LastRespondedDateTime__c,Age__c from Case WHERE CreatedDate = THIS_WEEK and status != 'Closed' and account.name!=null];      chart(aggres);      }    List<AggregateResult> aggres;    public googlechartCls(){  }    public void chart(List<AggregateResult> aggres){      imgurl='';      System.debug(aggres);      imgurl='http://chart.apis.google.com/chart?chxt=x,y&chbs=a&chbh=a&chds=0,15&chs=450x250&chdlp=b|l&cht=bvg&chxs=0,68228B,12|1,68228B&chdls=330033,12&chtt=Account+Status+Report';      string chco='';      string chd='';      String chxr='';      String chxl='0:|';      String chm='';      String chdl='';      String chxs='';      Integer s;      for (integer i=0; i<aggres.size();i++){          s = Integer.valueOf(aggres[i].get('expr0'));          System.debug('----------->'+aggres);          if(i<aggres.size()-1){                 if( s > 5){                      chco+= 'ED1B0E|';                      chd += aggres[i].get('expr0')+',';                      chxl += string.valueof(i+1)+'|';                      chm +='t'+s+',0000FF,0,'+i+',10|';                      chdl+=string.valueof(i+1)+'='+aggres[i].get('Name')+'|';                    }                  else if(s == 5){                      chco += 'FDD017|';                      chd += aggres[i].get('expr0')+',';                      chxl +=string.valueof(i+1)+'|';                      chm +='t'+s+',0000FF,0,'+i+',10|';                      chdl+=string.valueof(i+1)+'='+aggres[i].get('Name')+'|';                    }                  else{                      chco+= '41A317|';                      chd += aggres[i].get('expr0')+',';                      chxl +=string.valueof(i+1)+'|';                      chm +='t'+s+',0000FF,0,'+i+',10|';                      chdl+=string.valueof(i+1)+'='+aggres[i].get('Name')+'|';                  }          }          else{          System.debug('Else Part');                  if( s > 5){                      chco+= 'ED1B0E';                      chd += aggres[i].get('expr0');                      chxl +=string.valueof(i+1)+'|';                      chm +='t'+s+',0000FF,0,'+i+',10';                      chdl+=string.valueof(i+1)+'='+aggres[i].get('Name');                    }                  else if(s == 5){                      chco += 'FDD017';                      chd += aggres[i].get('expr0');                      chxl +=string.valueof(i+1)+'|';                      chm +='t'+s+',0000FF,0,'+i+',10';                      chdl+=string.valueof(i+1)+'='+aggres[i].get('Name');                    }                  else{                      chco+= '41A317';                      chd+= aggres[i].get('expr0');                      chxl +=string.valueof(i+1)+'|';                      chm +='t'+s+',0000FF,0,'+i+',10';                      chdl+=string.valueof(i+1)+'='+aggres[i].get('Name');                  }          }      }        imgUrl+='&chco='+chco+'&chd=t:'+chd+'&chxl='+chxl+'|1:|0|5|15|20&chm='+chm+'&chdl='+chdl;    }    public string imgurl{get; set;}    }

**************************************************************************************************
Visual Force page:

<apex:page standardController="case" extensions="googlechartcls" showHeader="false" sidebar="false">  <script>      function redirect(){          window.open('/apex/googlechartingreport','_blank');      }  </script>  <apex:form >  <div align="center">      <br/>      <apex:image value="{!imgurl}" onclick="redirect()"/>      <br/>      <br/>      <br/>      <apex:CommandButton value="7 Days" action="{!sdays}"/> &nbsp;&nbsp;&nbsp;&nbsp;      <apex:CommandButton value="30 Days" action="{!tdays}"/>      </div>      <br/>      <br/>      <apex:pageblock >          <div style="overflow:auto; height:290px">          <apex:pageBlockTable value="{!lstcases}" var="c">                    <apex:column headerValue="Case Number">                  <apex:outputlink value="/{!c.id}">{!c.casenumber}</apex:outputlink>                  </apex:column>                    <apex:column headerValue="Account Name" >                  <apex:outputlink value="/{!c.accountid}">{!c.account.name}</apex:outputlink>                  </apex:column>                    <apex:column value="{!c.origin}"/>                  <apex:column value="{!c.reason}"/>                  <apex:column value="{!c.Status}"/>          </apex:pageBlockTable>          </div>      </apex:pageblock>  </apex:form>  </apex:page>

Here is the output:

I think this will help to give start with google charts .

Google Charts in Visualforce Page

Google Charts in Visualforce Page:

   

     We have requirement populate the Charts in Salesforce by counting account type.  Google provides the online editor for creating charts and just pass our values/dimensions.

  We have written apex controller class which gets count of Account type and passing these values to Google API’s chart URL. Google gives us chart image then we populate in to Visualforce.

    We can create charts from Google site editor http://code.google.com/apis/chart/image/docs/chart_wizard.html

   As given below VF page code and apex class have example of chart.

VF page code:

<apex:page controller="googleChartController" tabStyle="Account">

<apex:sectionHeader title=" Type of Account"></apex:sectionHeader>

<apex:image url="{!chartData}"></apex:image>

</apex:page>

Controller class code:

public class googleChartController {

private String chartData;

public String getChartData()

{

 return chartData;

}

//Contructor

public googleChartController ()

{

 //get obtain a list of picklist values

 Schema.DescribeFieldResult F = Account.Type.getDescribe();

 List<Schema.PicklistEntry> P = F.getPicklistValues();

 //where chart data should be stored.

 List<ChartDataItem> items = new List<ChartDataItem>();

 //iterate through each picklist value and get number of accounts

 // I wish we could do GROUP BY in SOQL!

 for(Schema.PicklistEntry pValue : P)

 {

    integer Count = [select count() from Account where Type = :pValue.getValue() limit 10000];

    if (Count > 0)

      items.add(new ChartDataItem(pValue.getValue()+ '-['+ Count.format() + ']' , Count.format()));

 }

 //Prepare the chart URL

 String chartPath = 'http://chart.apis.google.com/chart?chs=600x200&cht=p3';

 chartData = chartPath +  getChartData(items);

}

private String getChartData(List<ChartDataItem> items)

{

 String chd = ''; //23,34,56

 String chl = ''; //Hello|World

 for(ChartDataItem citem : items)

 {

    chd += citem.ItemValue + ',';

    chl += citem.Label + '|';

 }

 //remove the last comma or pipe

 chd = chd.substring(0, chd.length() -1);

 chl = chl.substring(0, chl.length() -1);

 String result = '&chd=t:' + chd + '&chl=' + chl;

 return result;

}// end of method

public class ChartDataItem

{

 public String ItemValue {  get;  set; }

 public String Label {   get;   set; }

 public ChartDataItem(String Label, String Value)

 {

    this.Label = Label;

    this.ItemValue = Value;

  }

 }

}// end of class