Balizadora Inteligente - PARTE 6

Fala pessoal!

Desculpe pelo atraso na postagem da ultima etapa do projeto Balizadora Inteligente. Estive envolvido em novo projetos nas ultimas semanas.

Essa ultima etapa, vai tratar da API do Google para gráficos, no endereço:

https://developers.google.com/chart/interactive/docs/gallery

Você encontra vários tipos de gráficos disponíveis, no nosso caso vamos utilizar um em Linha:

https://developers.google.com/chart/interactive/docs/gallery/linechart

Nessa pagina você encontra o código fonte para gerar o gráfico, assim como quais variáveis manipular para alterar parâmetros.

Para o nosso caso, onde as informações estão em um banco de dados, é necessario fazer a busca, para isso vamos utilizar uma pagina em PHP auxiliar:

smart_get_data.php

<?php
 $temperature = $_REQUEST['temperature'];
 $temperature = str_replace(',','.',$temperature);
 $T_painel = str_replace(',','.',$T_painel);
 $query = "SELECT count(*) as `num` FROM a6399975_data.smart_control;";

 $link = mysql_connect('mysql15.000webhost.com','a6399975_micro','******');
        mysql_set_charset('utf8',$link);
        mysql_select_db('a6399975_data');

 $handle = mysql_query($query);
 $linha = mysql_fetch_array($handle, MYSQL_ASSOC);
 $total_num = $linha["num"];
 $reg_num = 20;
 $limit = "";
 if($total_num > $reg_num)
 {
  $limit = "LIMIT ".($total_num - $reg_num).",".$total_num;
 }

 $query = "SELECT date_format(timestamp,'%Y-%m-%d %H:%i:00') as `timestamp`, temperature, 

umidade, T_painel, status FROM a6399975_data.smart_control ORDER BY timestamp ASC $limit;";

 $handle = mysql_query($query);
 
 $data = "['Data','Temperatura','Umidade','Tensao Painel','Status LED'],";

 while($linha = mysql_fetch_array($handle, MYSQL_ASSOC)){
  $data = $data."['".$linha["timestamp"]."',".$linha["temperature"].",".$linha["umidade"].",

".$linha["T_painel"].",".$linha["status"]."],";
 }
 
 mysql_close($link);

 echo $data;
?>

Essa pagina se encarrega de acessar o banco, coletar os dados e formatar da maneira que o API do Google utiliza para construir o gráfico, então nessa pagina vamos ter algo do tipo:

['Data','Temperatura','Umidade','Tensao Painel','Status LED'],['2016-07-28 13:44:00',36,26,0,0],['2016-07-28 14:15:00',33,27,0,0], ....

Feito isso, com os dados"mastigados", podemos adicionar o Chart a nossa pagina principal da aplicação IoT:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() 
   { 
        var data = google.visualization.arrayToDataTable([<?php include("smart_get_data.php") ?>]);

        var options = 
  {
          title : 'Dados Balizadora Smart',
          vAxes: [{title: "Temperatura x Umidade x Tensao Painel x Status"}],
          hAxis: {title: "Data"},
          seriesType: "bars",
          series: {3: {type: "line",targetAxisIndex:1}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    </script>

Perceba que no script acima, a variável data, busca as informações da pagina construída pelo script anterior.

No final, esse é o resultado:

Bom é isso, assim finalizamos o projeto. Essa ultima parte ficou mais corrida, se alguém se interessar e tiver alguma duvida pergunte nos comentários.