Problema ao usar Google Chart

Solilopi · 05/11/2022

Hola, estoy intentando hacer una página web con php en la que intento mostrar los datos de una tabla postgres en un gráfico google chart pero no consigo que me muestre nada. Mi código es:
<!DOCTYPE html>

<?php
$db_conexion = pg_connect("host=localhost dbname=base_datos user=usuario password=contraseña");
?>

<html>
<head>
<meta charset="UTF-8">
<title> GRÁFICA WEB </title>
<script src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([

['fecha','sistolica','diastolica','pulsaciones','saturacion'],
<?php
$query = "SELECT * from VALORES";
$exec = Pg_query($db_conexiononexion,$query);
while($row = pg_fetch_array($exec))
{
echo "['".$row['fecha']."',".$row['sistolica']
."',".$row['diastolica']."',"
.$row['pulsaciones']."',".$row['saturacion']."],";
}
?>

]);
var options = {
title: 'VALORES OBTENIDOS',
hAxis: {title: 'FECHAS', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>

¿Podéis echarme una mano?. Gracias

YeltsinReyes · 05/11/2022

Solilopi disse:
Hola, estoy intentando hacer una página web con php en la que intento mostrar los datos de una tabla postgres en un gráfico google chart pero no consigo que me muestre nada. Mi código es:
<!DOCTYPE html>

<?php
$db_conexion = pg_connect("host=localhost dbname=base_datos user=usuario password=contraseña");
?>

<html>
<head>
<meta charset="UTF-8">
<title> GRÁFICA WEB </title>
<script src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([

['fecha','sistolica','diastolica','pulsaciones','saturacion'],
<?php
$query = "SELECT * from VALORES";
$exec = Pg_query($db_conexiononexion,$query);
while($row = pg_fetch_array($exec))
{
echo "['".$row['fecha']."',".$row['sistolica']
."',".$row['diastolica']."',"
.$row['pulsaciones']."',".$row['saturacion']."],";
}
?>

]);
var options = {
title: 'VALORES OBTENIDOS',
hAxis: {title: 'FECHAS', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>

¿Podéis echarme una mano?. Gracias

ASI.
$exec = Pg_query($db_conexion, $query);

YeltsinReyes · 05/11/2022

PHP:

<?php

$db_conexion = pg_connect('host=localhost dbname=base_datos user=usuario password=contraseña');

?>

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>GRÁFICA WEB</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

</head>
<body>

<div id="chart_div" style="width: 100%; height: 500px;"></div>

<script src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart(){
  
    var data = google.visualization.arrayToDataTable([

        ['fecha', 'sistolica', 'diastolica',
        'pulsaciones','saturacion'],
  
        <?php
      
        $exec = Pg_query($db_conexion, 'SELECT * from VALORES');
      
        while($row = pg_fetch_array($exec)){
          
            echo '[
                "'.$row['fecha'].'",
                "'.$row['sistolica'].'",
                "'.$row['diastolica'].'",
                "'.$row['pulsaciones'].'",
                "'.$row['saturacion'].'"
            ],';
          
        }
      
        ?>
      
    ]);
  
    var options = {
        title: 'VALORES OBTENIDOS',
        hAxis: {title: 'FECHAS', titleTextStyle: {color: '#333'}},
        vAxis: {minValue: 0}
    };
  
    var chart_div = document.getElementById('chart_div');
    var chart = new google.visualization.AreaChart(chart_div);
    chart.draw(data, options);
  
}
</script>

</body>
</html>

Solilopi · 05/11/2022

Hola, gracias por tu respuesta, ya lo corregí pero sigue sin mostrar nada. He probado a ejecutar el php fuera del html y si funciona, pero en su lugar no hace nada. Dejo por aquí el código corregido:
<!DOCTYPE html>
<?php
$db_conexion = pg_connect("host=localhost dbname=bd user=user password=pss");

if ($db_conexion)
{
echo 'CONEXIÓN CORRECTA.';
}
else
{
echo 'FALLÓ LA CONEXIÓN.';
}
?>
<html>
<head>
<meta charset="UTF-8">
<title> GRÁFICA WEB </title>
<script src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['fecha','sistolica','diastolica','pulsaciones','saturacion'],
<?php

$query = "SELECT * from VALORES";

$ejecutable = Pg_query($db_conexion,$query);
while($row = pg_fetch_array($ejecutable))
{
echo "['".$row['fecha']."',".$row['sistolica']
."',".$row['diastolica']."',"
.$row['pulsaciones']."',".$row['saturacion']."],";
}

// mostramos los datos de la tabla

if(!$ejecutable)
{
echo "An error occurred.\n";
exit;
}
echo "<table>";
while ($row = pg_fetch_array($ejecutable))

{
echo "<tr>";
echo "<td>Fecha:".$row["fecha"]."</td>";
echo "<td>Sistolica:".$row["sistolica"]."</td>";
echo "<td>Diastolica:".$row["diastolica"]."</td>";
echo "<td>Pulsaciones:".$row["pulsaciones"]."</td>";
echo "<td>Saturacion:".$row["saturacion"]."</td>";

echo "<tr>";
}
echo "<table>";

?>

]);

var options = {
title: 'VALORES OBTENIDOS',
hAxis: {title: 'FECHAS', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
var visualization = new google.visualization.AreaChart(container);

</script>

<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

</body>
</html>

YeltsinReyes · 05/11/2022

Prueba el codigo completo que te puse a ver si funciona.
Si no, mira la consola a ver si tienes error de js.

Solilopi · 05/11/2022

Hola, lo he probado y da el error: Data column(s) for axis #0 cannot be of type string. ¿Hay problema con las fechas?

YeltsinReyes · 05/11/2022

Solilopi disse:
Hola, lo he probado y da el error: Data column(s) for axis #0 cannot be of type string. ¿Hay problema con las fechas?

Aqui dice que pongas el formato de la fecha.
ASI format: "yyyy-MM-dd".

Solilopi · 05/11/2022

Hola, sigue mostrando el mismo error.
Data column(s) for axis #0 cannot be of type string

Solilopi · 10/11/2022

Hola, he conseguido por fin mostrar la gráfica pasándole la tabla en csv, el problema que tengo es que los valores del eje "Y" no se corresponden con la realidad, he intentado poner máximos, etc y no hay manera de cuadrarlo. Adjunto el csv.
Mi código es:


<?php
include('logic.php'); ?>

<!DOCTYPE html>
  <html>
      <head>
  <meta charset="UTF-8">
<title>GRÁFICA WEB</title>
<!-- Cargamos la libreria de google para mostrar graficas:-->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- script que genera la grafica-->
    <script>
      google.charts.load('current', {'packages':['corechart'],'language': 'es'});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
//pasamos el json a la grafica
        var data = google.visualization.arrayToDataTable(<?php echo $arrayToDataTable ?>);

        var options = 
    {
    isStacked: 'absolute',
    title: 'VALORES OBTENIDOS',
    backgroundColor:'#D3D3D3',
    chartArea: {left:40,top:5,width:'97%',height:'90%'},
    selectionMode: 'multiple',
    keepInBounds: true,
    colors: ['#4B0082', '#663399', '#9932CC', '#800080'],
    
    legend: {position: 'top',textStyle: {color: 'blue', fontSize: 14}},    
    
    vAxis: 
        {
        viewWindowMode:'maximized',
        title: 'VALORES',
        titleTextStyle: {color: '#A52A2A',fontSize: 14, Bold:'true'},        
        textPosition:'out',
        textStyle: {fontSize:11}        
//        maxValue: '100'        
//        gridlines: { count: 15}
        },

    hAxis: 
        {
        title: 'FECHAS',
        titleTextStyle: {color: '#A52A2A',fontSize: 14, Bold:'true'},
        textPosition:'out',
        textStyle: {fontSize:11},
        slantedTextAngle:-90           
        }
    
    };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
//        chart.getChartLayoutInterface().getVAxisValue(0);
      }
      
    </script>
  </head>
  <body>
  <h3 style="text-align: center;">TOMAS DIARIAS DE TENSIÓN ARTERIAL.</h3>
  
    <!-- div donde se muestra la grafica-->
    <div id="chart_div" style="width: 100%; height: 901px;"></div>
  </body>
  </html>

Solilopi · 10/11/2022

Solucionado, Dejo aquí el código por si alguien lo necesita.

PHP:

<?php
include('tablaCsv.php'); ?>

<!DOCTYPE html>
  <html>
      <head>
  <meta charset="UTF-8">
<title>GRÁFICA WEB</title>
<!-- Cargamos la libreria de google para mostrar graficas:-->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- script que genera la grafica-->
    <script>
      google.charts.load('current', {'packages':['corechart'],'language': 'es'});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart()
                        {
//pasamos el json a la grafica
                                var data = google.visualization.arrayToDataTable(<?php echo $arrayToDataTable ?>);
                                var options =
                            {
                            legend: {position: 'top',textStyle: {color: '#B22222',fontSize: 14,bold: 'true'}},   
                          titleTextStyle:
                                  {
                                      color: '#DC143C', 
                                      fontSize: 14,
                                      bold: true,
                                      italic: true
                                  },
                            title: 'VALORES OBTENIDOS',
                            backgroundColor:'#D3D3D3',
                            chartArea: {left:40,top:50,width:'100%',height:'80%'},
                            selectionMode: 'multiple',
                            keepInBounds: true,
                            colors: ['#4B0082', '#663399', '#9932CC', '#800080'],
                            hAxis:
                                    {
                                    titleTextStyle: {color: '#A52A2A',fontSize: 14, Bold:true, format:"dd-MM-yyyy"},
                                    title: 'FECHAS',
                                    textPosition:'out',
                                    textStyle: {fontSize:11, Bold:true},
                                    slantedTextAngle:-90
                                },
                            vAxis:
                                    {
                                    titleTextStyle: {color: '#A52A2A',fontSize: 14, Bold:true},
                                    title: 'VALORES',
                                    maxValue:100,           
                                    textStyle: {fontSize:11, Bold:true},
                                    gridlines: { count: 25}
                                    }
                             };

                                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                                chart.draw(data, options);
                        }
      
    </script>
  </head>
  <body>
  <h3 style="text-align: center;">TOMAS DIARIAS DE TENSIÓN ARTERIAL.</h3>
 
    <!-- div donde se muestra la grafica-->
    <div id="chart_div" style="width: 100%; height: 911px;"></div>
  </body>
  </html>

Problema ao usar Google Chart

Solilopi

YeltsinReyes

YeltsinReyes

Solilopi

YeltsinReyes

Solilopi

YeltsinReyes

Solilopi

Solilopi

Anexos

Solilopi

Tópicos similares