Problema al usar Google Chart

Solilopi · 5 Nov 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 · 5 Nov 2022

Solilopi dijo:
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 · 5 Nov 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 · 5 Nov 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 · 5 Nov 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 · 5 Nov 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 · 5 Nov 2022

Solilopi dijo:
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 · 5 Nov 2022

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

Solilopi · 10 Nov 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 Nov 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 al usar Google Chart

Solilopi Seguir

YeltsinReyes

YeltsinReyes

Solilopi

YeltsinReyes

Solilopi

YeltsinReyes

Solilopi

Solilopi

Adjuntos

Solilopi