Como fazer funcionar o Google Chart com angilar?
20/11/2017
0
//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
Curtir tópico
+ 0
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;?
Você tentou usar o document.getElementsById('F1lida) ao invés de document.getElementsByName('Fase2lida')[0].value;?
Responder
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 --
Html com a parte de recepção dos dados :
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.
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
Clique aqui para fazer login e interagir na Comunidade :)