Problema al usar Google Chart

  • Autor Autor Solilopi
  • Fecha de inicio Fecha de inicio
Solilopi

Solilopi

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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
 
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
Hacer clic para expandir...

ASI.
$exec = Pg_query($db_conexion, $query);
 
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>
 
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>
 
Prueba el codigo completo que te puse a ver si funciona.
Si no, mira la consola a ver si tienes error de js.
 
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 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?
Hacer clic para expandir...
Aqui dice que pongas el formato de la fecha.
ASI format: "yyyy-MM-dd".
1667712674132.png
 
Hola, sigue mostrando el mismo error.
Data column(s) for axis #0 cannot be of type string
 
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

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>
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba