REVELAR

Fórum Como fazer funcionar o Google Chart com angilar? #588969

20/11/2017

0

Angular 

 
//Tenho o seguinte cenário:  Requisição de informações relativas ao consumo de energia
//=================================================================================
	var app = angular.module("requisição", []);
	app.controller("medidor", function ($http, $scope,  $interval) 	{
		this.interval = $interval(function() 	{
			$http.get('http://192.168.0.25:6288').then(function (response) {
				$scope.acumuladores = response.data;
			})
	 		   	.catch(function(response)   	{	
				  	console.error('Erro ao obter estrutura JSon:', response.status, response.data);
				})
					.finally(function() {
						console.log("Json carregado com sucesso", response.data);
					});
		}, 10000);
	});

       /* Resultado  requisição em estrutura json: 
                                                                                       [{"hoje":"12/11/2017", 
											"hora":"17:05:36", "ciclo":"281.08 horas", "TempoConexao":"27406 minutos", "SinalWiFi":"59dB",
											"DelaydoLooping":"55544 milissegundos", 
                                                                                        "Fase1":20,
											"Fase2":30,
											"Fase3":40,
											"Total":90,
											"AcumMin":19, "Unit1":"WH", "AcumHora":184, "Unit2":"WH", "AcumDia":1, "Unit3":"WH", 	"AcumMes":1,
											"Unit4":"KWH", "Projetado":4, "Unit5":"KWH", "UltimaHora":1497,
											"Unit6":"WH (16) ", 	"UltimoDia":0,
											"Unit7":"KWH (11) ", "UltimoMes":0,
											"Unit8":"KWH (10) "}] ;


No Html: */
<!DOCTYPE html>
<html  ng-app="medidor">
<head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>                       
   <script type="text/javascript" src="controller/ReqJson.js"></script>
   <script type="text/javascript" src="myscripts/graficoGauge.js"></script> 
   ...
   ...
           <section>    
             <div id="div0" ng-controller="medidor" align="center">
                <div id="div1" ng-repeat="d in acumuladores">>
                   


                   <h2>Leitura das fases</h2>
                   <table>
                      <tr> <th color="red"  >Fase 1</th> 
                           <th color="blue" >Fase 2</th> 
                           <th color="green">Fase 3</th> 
                           <th>Total </th>
                      </tr>
                      <tr> <td color="red"  >{{d.Fase1}}</td> 
                           <td color="blue" >{{d.Fase2}}</td> 
                           <td color="green">{{d.Fase3}}</td> 
                           <td>{{d.Total}}</td>
                      </tr>
                   </table>
                   <!-- Campos auxiliares para movimentação do gráfico id="gauge_div"  -->
                   <!-- A solução deverá ser alterada para o uso de diretivas do Angular integradas com o Googel Chart  -->

                   <input type="hidden" id="F1lida" name="Fase1lida" value={{d.Fase1}}>
                   <input type="hidden" id="F2lida" name="Fase2lida" value={{d.Fase2}}>
                   <input type="hidden" id="F3lida" name="Fase3lida" value={{d.Fase3}}>
                   <div id="gauge_div"></div>
                </div> 
             </div>
        </section>


Até aí tudo funciona, porém o gráfico não funciona :

Tento deste modo: 

Javascript: 

// Variáveis para tratar informações da página index.html
//=======================================================
		var Fase1lida = 0; // Última leitura do Consumo das fase lidas na requiziçãodo 
		var Fase2lida = 0; // Obtidas por: document.getElementById("F1lida").value;  / / ("F2lida") e ("F3lida")
		var Fase3lida = 0; // Não funciona com a requisição

		//===============================================================
		// Gráfico dos reloginhos, com o consumo dps últimos 10 segundos.
		// Não funciona quando está utilizando requisições
		//===============================================================
		google.charts.load("current", {"packages":["gauge"]});
		google.charts.setOnLoadCallback(drawGauge);

		var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
		redFrom: 250, redTo: 280, minorTicks: 5};
		var gauge;

		function drawGauge() {
	                 // Aqui dá erro  de objeto null - Parece que o formulário não foi carregado
	                Fase1lida = document.getElementsByName('Fase1lida')[0].value; 
                        Fase2lida = document.getElementsByName('Fase2lida')[0].value; 
                        Fase3lida = document.getElementsByName('Fase3lida')[0].value; 
			
                        gaugeData = new google.visualization.DataTable();
			gaugeData.addColumn("number", "Fase 1");
			gaugeData.addColumn("number", "Fase 2");
			gaugeData.addColumn("number", "Fase 3");
			gaugeData.addRows(3);

		        gaugeData.setCell(0, 0, parseInt(Fase1lida));
		        gaugeData.setCell(0, 1, parseInt(Fase2lida));
	         	gaugeData.setCell(0, 2, parseInt(Fase3lida));

		       gauge = new google.visualization.Gauge(document.getElementById("gauge_div"));
		       gauge.draw(gaugeData, gaugeOptions);
 	}


Já experimentei com windows.loiad e nada.

Se puderem, agredeço uma luz aê ... Obrigado.
Guilherme Varejão

Guilherme Varejão

Responder

Posts

20/11/2017

Paulo Freitas

Olá Guilherme,

Você tentou usar o document.getElementsById('F1lida) ao invés de document.getElementsByName('Fase2lida')[0].value;?
Responder

Gostei + 0

21/11/2017

Guilherme Varejão

Olá Paulo, obrigado pela resposta.

Sim, tentei pelo Nome do elemento, mas não deu certo.
A questão, é que a requisição no controller acontece depois da execução da função referente ao gráfico, deste modo os elementos ainda não existem.
Estou iniciando o estudo do Angular e creio que o gráfico também deva estar num controller sob uma diretiva que ainda não sei.
Neste outro controller, se eu estiver pensando certo, devo compartilhar a estrutura Json, refletindo-a no gráfico, de um modo mais simples do que estou fazendo.

Por enquanto, fiz uma gambiarra para poder exibir o gráfico, mas não é o ideal. A ideia é exibir a página de uma vez e já com o gráfico montado.
Criei um botão no formulário e alterei a função do gráfico. Deste modo o botão executo a função do gráfico após a página ser exibida.

Estamos assim:
--Controller --
/*=============================== Controler ================================================*/	
var app = angular.module("Aplicacao", []);
app.controller("Controle", function ($http, $scope,  $interval) {
	this.interval = $interval(function() {
		$http.get('http://999.999.999.22:8888').then(function (response) 	{
			$scope.acumuladores = response.data;
			console.log(response.data);
		})
			   	.catch(function(response)   	{	
			        	console.error('Erro ao obter estrutura JSon:', response.status, response.data);
			        })
				.finally(function() 	{
					console.log("Json carregado com sucesso");
				});
	}, 10000);
});


Html com a parte de recepção dos dados :
        <section>    
            <div id="div0" align="center">
                <div id="div1">
                    <div id="cntrl" ng-controller="Controle" align="center">
                        <div id="acum" ng-repeat="d in acumuladores">
                            <br><br>
                            <h2>Leitura das Fases em tempo Real</h2>
                            <table color="grey">
                              <tr> <th color="red"  >Fase 1</th> 
                                   <th color="blue" >Fase 2</th> 
                                   <th color="green">Fase 3</th> 
                                   <th>Total </th>
                              </tr>
                              <tr> <td color="red"  >{{d.Fase1}}</td> 
                                   <td color="blue" >{{d.Fase2}}</td> 
                                   <td color="green">{{d.Fase3}}</td> 
                                   <td>{{d.Total}}</td>
                              </tr>
                            </table>
                            <!-- Campos auxiliares para apresentação do gráfico id="gauge_div"  -->
                            <!-- São as mesmas informações que estão na <table> -->
                            <input type="hidden" id="F1lida" name="Fase1lida" value={{d.Fase1}}/>
                            <input type="hidden" id="F2lida" name="Fase2lida" value={{d.Fase2}}/>
                            <input type="hidden" id="F3lida" name="Fase3lida" value={{d.Fase3}}/>
                        </div>
                    </div> 
                    <!-- O gráfico abaixo deveria ser apresentado automaticamente na exibição da página -->  
                    <div id="gauge_div"></div>
                    <input type="button" value="Gráficos das Fases" onclick="updateDrawgauge()"/>
                </div>   
            </div>
        </section>


Função modificada para executar no acionamento do botão:
Esta solução está fora do domínio do Angular.
A ideia é por a solução no contexto do Angular. Talvez em um outro controller, mas com a estrutura Json, obtida no 1º controller, compartilhada. 
// Variáveis para tratar informações da página index.html
//=======================================================

	function updateDrawgauge () {
		if(document.getElementById('F1lida') != null) {
			var Fase1lida = 0; // Última leitura do Consumo das fase lidas na requiziçãodo Arduíno
			var Fase2lida = 0; // Obtidas por: document.getElementById("F1lida").value;  / / ("F2lida") e ("F3lida")
			var Fase3lida = 0; // 
			
			console.log("Load do Gauge");
			google.charts.load("current", {"packages":["gauge"]});
			google.charts.setOnLoadCallback(drawGauge);

			var gaugeOptions = {min: 0, max: 10000, yellowFrom: 4000, yellowTo: 7000,
			redFrom: 7000, redTo: 10000, minorTicks: 5};
			var gauge;
			var gauge2;

			function drawGauge() {
				var recursiva = function () {

			        //Recupera as informações da página para apresentar np gráfico
			        Fase1lida = document.getElementById('F1lida').value; 
		            Fase2lida = document.getElementById('F2lida').value; 
		            Fase3lida = document.getElementById('F3lida').value;

		            Fase1lida = parseFloat(Fase1lida).toFixed(2); 
		            Fase2lida = parseFloat(Fase2lida).toFixed(2); 
		            Fase3lida = parseFloat(Fase3lida).toFixed(2); 

					console.log("Montando o gráfico Gauge");
					gaugeData = new google.visualization.DataTable();
					gaugeData.addColumn("number", "Fase 1");
					gaugeData.addColumn("number", "Fase 2");
					gaugeData.addColumn("number", "Fase 3");
					gaugeData.addRows(3);
		
		  			gaugeData.setCell(0, 0, Fase1lida);
					gaugeData.setCell(0, 1, Fase2lida);
					gaugeData.setCell(0, 2, Fase3lida);

					gauge = new google.visualization.Gauge(document.getElementById("gauge_div"));
					gauge.draw(gaugeData, gaugeOptions);

					setTimeout(recursiva,1000);
				}
				recursiva();	
	 		}
		}
	}
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar