function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
chuyler1chuyler1 

Google Charts hanging when used with <apex:TabPanel>

I've been able to get Google Visualization Charts to work fine on several pages, but when it comes to pages with TabPanels, the entire browser hangs when the chart is drawn.  Google's code gets stuck in some sort of race condition. If I remove the TabPanel it works fine again.  Can anyone help me with a work around?

 

<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"]});
      google.setOnLoadCallback(drawChart);
      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);
      }
  </script>
  <apex:tabPanel title="myTab" switchType="server">
    <apex:tab >
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
    </apex:tab>
  </apex:tabPanel>
</apex:page>

 

 

 

 

 

ra1ra1

I am facing same problem.. did you get any solution for this.

 

Thanks & Regards,

 

chuyler1chuyler1

The only solution I have at this time is to use jQuery Tabs instead of VisualForce Tabs.  Out of the box the tabs will look different but you can restyle them to look almost identical to the VisualForce Tabs.

 

Please don't accept this as a final solution.  SalesForce needs to dig deeper and figure out what the conflict is between their API and the Google Charting API. They could do that, or perhaps they could improve their own charts so I don't have to use Google Charts...but I ran into issues with VisualForce Charts within Tabs also. :-/

Soul AgesSoul Ages

Had the same problem. Here's my StackExchange question:

http://salesforce.stackexchange.com/questions/18683/google-chart-not-working-when-using-apextabpanel

 

Now I switched to Visualforce Charts and find that if you use switchType="client" the charts don't render for all tabs except the selected one. I'm starting to hate the people behind VF...

Avidev9Avidev9
I think I have seen a similar issue with jquery and apex:tab . You can try using JQUERY tabs here is VF implementation of the same http://blogforce9.blogspot.in/2013/05/easy-jquery-tabs-for-visualforce-pages.html