Código Fonte:



<html>

<head>

<title>PHP - MySQL</title>

</head>

<body>

<h1>Exercício: Utilizar o Google Chart</h1>

<?php



include '/home/rml/acessoMysql/mysql_connect.php';





if (!mysqli_select_db( $conn,"smpw")) {

    die("Falhou o acesso à base de dados. Erro: " . mysqli_error($conn));

}





$sql = "SELECT * FROM lixo";



$result = mysqli_query($conn, $sql);

$dados ="";

while($row = mysqli_fetch_array($result))



  {

    $dados = $dados . "[".$row{'id'}.",".$row{'valor'}."],";



  }



//echo $dados;







?> 

<!--- Bloco para alojar o gráfico --->

<div id="grafico" style="max-width: 500px; height: 300px;"></div>



<!--- Referenciar a API dos gráficos da Google --->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>



<!--- Função usando JavaScript --->

<script type="text/javascript">

    google.load("visualization", "1", {packages:["corechart"]});

    google.setOnLoadCallback(drawChart);

    

    <!--- Função para desenhar o gráfico --->

    function drawChart() {

        var data = google.visualization.arrayToDataTable([

        ['Id', 'Temperatura'],

        <?php echo $dados ?>

    ]);

<!--- Informações opcionais do gráfico: Título e dimensões --->

        var options = {

            title: 'Sensor Temperatura',

            curveType: 'function',

            vAxis: {title: 'Temp (ºC)'},

            legend:  { position: 'bottom' }

        };

        

<!--- Função que coloca o gráfico dentro da DIV correcta --->

        var chart = new google.visualization.LineChart(document.getElementById('grafico'));

        chart.draw(data, options);

    }

</script>



<h2>Nota: O gráfico anterior não faz sentido, mas estes sim:</h2>



<?php

$sql = "SELECT * FROM lixo Where sensor='exterior'";



$result = mysqli_query($conn, $sql);

$dados ="";

while($row = mysqli_fetch_array($result))

  {

    $dados = $dados . "[".$row{'id'}.",".$row{'valor'}."],";



  }





?>

<!--- Bloco para alojar o gráfico --->

<div id="exterior" style="max-width: 500px; height: 300px; float: left;"></div>



<!--- Referenciar a API dos gráficos da Google --->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>



<!--- Função usando JavaScript --->

<script type="text/javascript">

    google.load("visualization", "1", {packages:["corechart"]});

    google.setOnLoadCallback(drawChart);

    

    <!--- Função para desenhar o gráfico --->

    function drawChart() {

        var data = google.visualization.arrayToDataTable([

        ['Id', 'Temperatura'],

        <?php echo $dados ?>

    ]);

<!--- Informações opcionais do gráfico: Título e dimensões --->

        var options = {

            title: 'Sensor Temperatura Exterior',

            curveType: 'function',

            vAxis: {title: 'Temp (ºC)'},

            legend:  { position: 'bottom' }

        };

        

<!--- Função que coloca o gráfico dentro da DIV correcta --->

        var chart = new google.visualization.LineChart(document.getElementById('exterior'));

        chart.draw(data, options);

    }

</script>





<?php

$sql = "SELECT * FROM lixo Where sensor='interior'";



$result = mysqli_query($conn, $sql);

$dados ="";

while($row = mysqli_fetch_array($result))

  {

    $dados = $dados . "[".$row{'id'}.",".$row{'valor'}."],";



  }



mysqli_free_result($conn); //libertar os resultados da memória



mysqli_close($conn);  

?>

<!--- Bloco para alojar o gráfico --->

<div id="interior" style="margin-left: 320px; max-width: 500px; height: 300px;"></div>



<!--- Referenciar a API dos gráficos da Google --->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>



<!--- Função usando JavaScript --->

<script type="text/javascript">

    google.load("visualization", "1", {packages:["corechart"]});

    google.setOnLoadCallback(drawChart);

    

    <!--- Função para desenhar o gráfico --->

    function drawChart() {

        var data = google.visualization.arrayToDataTable([

        ['Id', 'Temperatura'],

        <?php echo $dados ?>

    ]);

<!--- Informações opcionais do gráfico: Título e dimensões --->

        var options = {

            title: 'Sensor Temperatura Interior',

            curveType: 'function',

            vAxis: {title: 'Temp (ºC)'},

            legend:  { position: 'bottom' }

        };

        

<!--- Função que coloca o gráfico dentro da DIV correcta --->

        var chart = new google.visualization.LineChart(document.getElementById('interior'));

        chart.draw(data, options);

    }

</script>



</body>

</html>