• chuyler1
  • NEWBIE
  • 5 Points
  • Member since 2012

  • Chatter
    Feed
  • 0
    Best Answers
  • 1
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies

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>

 

 

 

 

 

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>

 

 

 

 

 

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>