Primefaces 3 e javaScript

Front-end
#1

Boa tarde pessoal,

Tenho uma aplicação em JSF e primefaces 3, e uso a API de gráficos do google. O problema está quando a página é redesenhada.

por exemplo:

[code]script type=“text/javascript” src=“https://www.google.com/jsapi”>

google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});
google.setOnLoadCallback(drawPizza1);
google.setOnLoadCallback(drawPizza2);
google.setOnLoadCallback(drawPizza3);
function drawPizza1() {

	        // Create the data table.
	        var data = new google.visualization.DataTable();
	        data.addColumn('string', 'Topping');
	        data.addColumn('number', 'Slices');
	        data.addRows([
			<h:outputFormat value="#{acompanhamentosBean.graficoPizzaTotal}"/>
	        ]);
	
	        // Set chart options
	        var options = {'title':'Distribuição por valor - Total',
	                       'width':330,
	                       'height':300,
	                       is3D: true};
	
	        // Instantiate and draw our chart, passing in some options.
	        var chart = new google.visualization.PieChart(document.getElementById('chart_pizza1'));
	        chart.draw(data, options);
	      }
      
      function drawPizza2() {
	  		
	        // Create the data table.
	        var data = new google.visualization.DataTable();
	        data.addColumn('string', 'Topping');
	        data.addColumn('number', 'Slices');
	        data.addRows([
			<h:outputFormat value="#{acompanhamentosBean.graficoPizzaNTrab}"/>
	        ]);
	
	        // Set chart options
	        var options = {'title':'Distribuição por valor - Não Trabalhista',
	                       'width':330,
	                       'height':300,
	                       is3D: true};
	
	        // Instantiate and draw our chart, passing in some options.
	        var chart = new google.visualization.PieChart(document.getElementById('chart_pizza2'));
	        chart.draw(data, options);
	      }
      function drawPizza3() {
	  		
	        // Create the data table.
	        var data = new google.visualization.DataTable();
	        data.addColumn('string', 'Topping');
	        data.addColumn('number', 'Slices');
	        data.addRows([
			<h:outputFormat value="#{acompanhamentosBean.graficoPizzaTrab}"/>
	        ]);
	
	        // Set chart options
	        var options = {'title':'Distribuição por valor - Trabalhista',
	                       'width':330,
	                       'height':300,
	                       is3D: true};
	
	        // Instantiate and draw our chart, passing in some options.
	        var chart = new google.visualization.PieChart(document.getElementById('chart_pizza3'));
	        chart.draw(data, options);
	      }
</script>

</h:head>

<h:body>

<div class="container">   
	<h:form id="form">
		<p:tabView id="tabView">
			
			<p:ajax event="tabChange" listener="#{acompanhamentosBean.mudarAba}"  update="tabView, @form"/>
			
			<p:tab title="title 1" id="tab">					
				<div id="chart_pizza1"></div>		
			</p:tab>
			
			<p:tab title="Title 2" id="tab2">
				<div id="chart_pizza3"></div>
			</p:tab>
		</p:tabView>
		
	</h:form>
	
</div>

</h:body>[/code]

Ao entrar nesta página, o gráfico da div “chart_pizza1” aparece, ai quando eu troco de aba, o chart_pizza3 não aparece e se eu volto para a aba original, o meu gráfico já sumiu também.

Como posso tratar essa renderização?

#2