1

Tengo el siguiente problema: quiero mostrar datos que obtengo desde mi base de datos con google charts, pero cuando intento hacerlo me aparece la pagina en blanco, este es mi codigo:

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['Inicial', 'churrasco cuadril', 'merma'],
     <?php
      echo "[".$r['inicial'].", ".$r['churrasco_cuadril'].", ".$r['merma']."]";
     ?>
     //['2004',  1000, 400]
   ]);

   var options = {
     title: 'Company Performance',
     curveType: 'function',
     legend: { position: 'bottom' }
   };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
}
</script>

Estoy buscando por internet alguna solución pero no encuentro data para resolverlo.

Todos los datos que quiero traer son de tipo decimal.

2
  • ¿Has cargado el script https://www.gstatic.com/charts/loader.js? ¿Existe un elemento con id curve_chart? ¿El resultado de echo "[".$r['inicial'].", ".$r['churrasco_cuadril'].", ".$r['merma']."]"; es igual a ['2004', 1000, 400]?
    – Marcos
    el 9 sep. 2019 a las 14:06
  • hola @Marcos, el script si esta cargado en la cabecera, la linea ['2004', 1000, 400] viene con el codigo que saque desde la pagina de google, igual esta comentada el 9 sep. 2019 a las 14:49

1 respuesta 1

2

Veo 2 problemas:

  1. La primera son con las concatenaciones.
  2. El tipo de dato, ya que si intentas pasarle un valor de tipo string, en donde REALMENTE espera un tipo de dato numérico, este nunca sera reflejada en el gráfico, ocasionando que nunca cargue el script. Te recomiendo revisar si tus datos son del tipo de dato numérico (int o float).

Ahora, implementé tu problema y la solución a la cual he llegado es la siguiente:

<?php 
    $arreglo = array(
        array(
            'inicial' => '2006',
            'churrasco_cuadril' => 3000,
            'merma' => 200
        ),
        array(
            'inicial' => '2004',
            'churrasco_cuadril' => 1000,
            'merma' => 400
        )
    );

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <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([
          ['Inicial', 'Churrasco Cuadril', 'Merma'],
          [<?php echo $arreglo[0]['inicial'] ?>, <?php echo $arreglo[0]['churrasco_cuadril'] ?>, <?php echo $arreglo[0]['merma'] ?>],
          [<?php echo $arreglo[1]['inicial'] ?>, <?php echo $arreglo[1]['churrasco_cuadril'] ?>, <?php echo $arreglo[1]['merma'] ?>]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
</head>
<body>

<div id="curve_chart" style="width: 900px; height: 500px"></div>

</body>
</html>

Notas:

  • El array que puse en el ejemplo, son para simular tus datos obtenidos de una base de datos, lo que tendrías que hacer es recorrer tu arreglo y colocar que datos quieres mostrar pero ya eso es otro tema.

  • Si la página te aparece en blanco, significa que hay un error en el script, la cual nunca se ejecuta y no añade nada al <div> en el cual va el resultado.

Espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.