Creating charst in Visualforce page by using JavaScript Remoting & Google Charts API.

This post is all about how to draw a chart in Visual force page by using JavaScript Remoting & Google Charts API.

I had faced some requirement to draw a different types of chart in a visualforce page and also to display number of  distinct record for further reference. I had done some work around and finally I had reached to the final destination. Here I have created one object ChartObject__c and two field Name and Amount.

Here I am sharing some code snippet for your reference. 

Page:

<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"/>

    <div id="chartBlockpie"/>

    <div id="chartBlockline"/>

    <div id="chartBlockbar" />

    <div id="chartBlockgauge" />

     

    <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) {...}

   // namespace : 

   // controller : GoogleChartsController

  // method : loadOpps

   

  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', 'Name');

     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.Amount]);

     }

     var chart = new google.visualization.PieChart(document.getElementById('chartBlockpie'));

     chart.draw(data, result);

      

     var chart = new google.visualization.LineChart(document.getElementById('chartBlockline'));

     chart.draw(data, result);

    

     var chart = new google.visualization.BarChart(document.getElementById('chartBlockbar'));

     chart.draw(data, result);

     

     /*var chart = new google.visualization.ScatterChart(document.getElementById('chartBlockscater'));

     chart.draw(data, result);*/

     

     var chart = new google.visualization.GaugeChart(document.getElementById('chartBlockgauge'));

     chart.draw(data, result);

      

     // 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>

    <p>Total Different Kind Of Production:<apex:outputText value="{!totalvalue}"/></p>

</apex:page>

Controller:

global with sharing class GoogleChartsController {

    public Integer totalvalue{get;set;}

    public GoogleChartsController() {        

        // Integer totalvalue;

        list<AggregateResult>  Namecount=new List<AggregateResult>();

        Namecount= [select  COUNT_DISTINCT(Amount) ctr from Opportunity];

        for(AggregateResult sobj:Namecount){

            

            totalvalue=Integer.valueOf(sobj.get('ctr'));

        }

        System.debug('################asish####################'+totalvalue);

    } 

    

    /**

Loads most recent 10 Opportunities

*/

    @RemoteAction   

    global static Opportunity[] loadOpps() {        

        return  [select Id, Name, Amount from Opportunity  order by CreatedDate DESC limit 10];        

    }  

}

Here I am sharing some image regarding chart.