Problema al usar Google Chart

Solilopi

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
5 Nov 2022
Mensajes
6
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

Kappa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 Feb 2010
Mensajes
2.712
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

Kappa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 Feb 2010
Mensajes
2.712
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

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
5 Nov 2022
Mensajes
6
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

Kappa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 Feb 2010
Mensajes
2.712
Prueba el codigo completo que te puse a ver si funciona.
Si no, mira la consola a ver si tienes error de js.
 

Solilopi

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
5 Nov 2022
Mensajes
6
Hola, lo he probado y da el error: Data column(s) for axis #0 cannot be of type string. ¿Hay problema con las fechas?
 

Solilopi

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
5 Nov 2022
Mensajes
6
Hola, sigue mostrando el mismo error.
Data column(s) for axis #0 cannot be of type string
 

Solilopi

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
5 Nov 2022
Mensajes
6
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>
 

Adjuntos

  • Historico tension_2022.zip
    2,2 KB · Visitas: 0

Solilopi

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta o intermediario gratuito!
Desde
5 Nov 2022
Mensajes
6
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>
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros, intermediario gratis
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba