Browser hangs when Google Charts are used with .Do I have any options other than using jquery tabs instead visualforce tabs.

<apex:page sidebar="false" >
<h1>Google Chart Test</h1>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]

    var options = {
      title: 'Company Performance',
      vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  <apex:tabPanel title="myTab" switchType="server">
   <apex:tab >
     <div id="chart_div" style="width: 900px; height: 500px;"></div>
  • Wow, that's weird. It pegs one of my cores to 100% when I visit the page with that code in chrome.
    – Akrikos
    Dec 13, 2013 at 15:56

2 Answers 2


This appears to be a question that's been asked a few times at least:

These two appear to be incompatible for the time being. Would love to have a google or salesforce dev take a look at this.

My guess is that either Salesforce, Google, or probably both are changing something in the global variable space and then relying on nothing else to modify that thing. Things go sideways when that thing doesn't respond as expected.

I did spend some time with this, but since both sf and google code is minified, it's very difficult to figure out what's going on.


I came up with a workaround of using jquery tabs for visualforce page.Please find below link

Jquery tabs for Visualforce page

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .