Primefaces 3 e javaScript

0 respostas
R

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:

script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">
	      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>

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?

Criado 7 de maio de 2013
Respostas 0
Participantes 1