[SalesForce] Google chart not displayed on VF Page

I am New to salesforce i am looking for embedding a Google chart in visualforce, I found this following snippet in Saleforce developer forums, I just copy phasted this to observe the response, But i am not getting the desired Chart,

<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) {...}
      // namespace : abhinav
      // controller : GoogleChartsController
      // method : loadOpps
      abhinav.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>


        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];
}                                                                                }

Above snippet Actual display as below, Remained un Achived for me

I found following java script error, Any one help me on this please,

Javascript error

Best Answer

Since you are using javascript from google,

<apex:includeScript id="a" value="https://www.google.com/jsapi" />

first check if you have added "https://www.google.com" in remote site settings.

Once that is done, you can open browser console. It will show javascript errors if there is any.

Related Topic