function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
crop1645crop1645 

Google Visualizations work in Firefox not in Chrome

This post defines the problem and will be followed with the solution in the reply

 

Problem: Using the Codeshare Project Force.com for Google Visualization: http://developer.force.com/codeshare/apex/projectpage?id=a06300000030w9LAAQ

 

Line Chart displays fine in IE8 and Firefox, but fails with 'google not defined' in Chrome

 

For reference, I'm showing the VF page plus associated VF component. Note the many javascript window.alert debugging statements that I used.

 

The VF page:

<apex:page standardController="Account" showheader="false">
	<html>
	   <body>	
		<c:PurchaseHistoryAndFutureRenewals width="1200" height="400" 
		            hAxisTitle="{!JSENCODE('Timeline')}" 
		            vAxisTitle="{!JSENCODE('IgnoreMe')}"/>  
	   </body>
	</html>
</apex:page>

 The VF Component:

<apex:component controller="GoogleChartsCustomController" >
	<apex:attribute name="jsonData" description="This is the chart data from the controller" type="string" assignTo="{!GoogleChartablePurchaseHistoryAndFutureRenewals}"/>
	
	<!-- Doc for this component is here: http://code.google.com/apis/visualization/documentation/gallery/linechart.html  -->
	
	<apex:outputPanel id="chart_div">
		<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
		<script type="text/javascript">
			window.alert('Script starts');
			try {
				google.load("visualization", "1", {packages: ["corechart"]});
				window.alert('google visualization package loaded');
				google.setOnLoadCallback(drawLineChart);
				window.alert('google callback set');
				}
			catch (err) {
				window.alert("exception="+err.message);
				}

 			function drawLineChart() {
  				var data = new google.visualization.DataTable( eval( '({!GoogleChartablePurchaseHistoryAndFutureRenewals})' ) );
  				window.alert('datatable evaluated'); 
				var chart = new google.visualization.LineChart(document.getElementById('{!$Component.chart_div}'));
			  	chart.draw(data, {	hAxis: 	{title: "{!hAxisTitle}"}, 
			  						vAxis: 	{title: "{!vAxisTitle}"}, 
			  						height: {!height},
			  						width: 	{!width}
			  						}
			  				);
			  	window.alert('chart drawn'); 								  
 			}
		
		</script>
	</apex:outputPanel>
</apex:component>

 Many dead ends followed trying to figure out why (especially since I'm more of an APEX/stock VF guy than a Javascript guy)

 

and the solution is ....

 

 

Best Answer chosen by Admin (Salesforce Developers) 
crop1645crop1645

The solution is that when Ron Hess posted the code to CodeShare in 2008, the line in the component:

 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

 may have been fine then but it will fail for Chrome now. It works as is for Firefox and IE8. The line needs to be:

 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

 That is, https, not http.  I missed this even after reading https://developers.google.com/loader/ twice.

 

I especially want to thank Bob Buzzard whose post: http://boards.developerforce.com/t5/Visualforce-Development/actionFunction-in-Chrome/m-p/423765/highlight/true#M48832 gave me the tip as to how to debug this in Chrome