How to make Google Chart work with SQL (Postgres)

1

Currently I want to make a query with a standing graph but I can not get it to show me the results, I'm not very versed in php so I guess it must be a beginner's mistake.

This is my code:

<?php
//Invoco el archivo de conexion:
include (conexion.php);

//Aqui hago mi consulta
$query = "SELECT leidos, reenviados FROM ex_tbl_campanas WHERE id_admin='196'";
$result = pg_query($query);

//Finalizo y comienzo el codigo html
<?

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Language', 'Rating'],
                <?php
                if($result->num_rows > 0){
                    while($row = $result->fetch_assoc()){
                        echo "['".$row['leidos']."', ".$row['reenviados']."],";
                    }
                }
                ?>
            ]);

            var options = {
                title: 'Most Popular Programming Languages',
                width: 900,
                height: 500,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
<!-- Display the pie chart -->
<div id="piechart"></div>
</body>
</html>
    
asked by Luis Alfredo Serrano Díaz 26.04.2018 в 16:39
source

1 answer

1

I have already seen the problem, although it does not show me the results of the way I want it, but the query generates it:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Leidos', 'Reenviados'],
                <?php
                if($result){
                    while($row = pg_fetch_assoc($result)){
                        echo "['".$row['leidos']."', ".$row['reenviados']."],";
                    }
                }
                ?>
            ]);

            var options = {
                title: 'Most Popular Programming Languages',
                width: 900,
                height: 500,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
<!-- Display the pie chart -->
<div id="piechart"></div>
</body>

<?php
//Invoco el archivo de conexion:
include (conexion.php);

//Aqui hago mi consulta
$query = "SELECT leidos, reenviados FROM ex_tbl_campanas WHERE id_admin='196'";
$result = pg_query($query);

//Finalizo y comienzo el codigo html
<?

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Language', 'Rating'],
                <?php
                if($result->num_rows > 0){
                    while($row = $result->fetch_assoc()){
                        echo "['".$row['leidos']."', ".$row['reenviados']."],";
                    }
                }
                ?>
            ]);

            var options = {
                title: 'Most Popular Programming Languages',
                width: 900,
                height: 500,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
<!-- Display the pie chart -->
<div id="piechart"></div>
</body>
</html>
    
answered by 26.04.2018 / 16:48
source