entre Desarrolladores

Question

Me gustaria que me dijeran como hacer una grafica con google chart con php y mysql! ya que e visto ejemplos y ninguno me ha ejecutado bien!

de antemano gracias!!

eso te aparece si solo dejo
console.log(datos);
[["MES","Bano","Computadora","Televisores"],["ENERO"],["FEBRERO"]]
y esto tmb creo que si esta bn todo
[Array[4], Array[1], Array[1]]
No encuentro el problema, lo he comprobado en http://json.parser.online.fr/ y la cadena siguiente parece correcta:

[["MES","Bano","Computadora","Televisores"],["ENERO"],["FEBRERO"]]

Si la variable datos tiene ese contenido antes de la línea

datos = JSON.parse(datos);

no entiendo por qué salta el error. A ver si alguien puede ayudarte, aunque creo que estoy merecería abrir una pregunta independiente o derivada.
Por favor publica la respuesta y márcala como correcta :)

Gracias.

Answer 1

2 Respuestas

Peter · Answer 2 · 2014-03-04T11:06:23+0000

Las gráficas de Google Chart no se programan con PHP ni MySQL sino con HTML y Javascript. En la documentación puedes encontrar un ejemplo simple.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

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

Cuestión aparte es que para generar el HTML y el JS utilices la combinación de PHP y MySQL.

Debe tomártelo como 2 pasos:

Conseguir con HTML y JS que se dibuje la gráfica que quieres.
Si quieres que la gráfica cambie dinámicamente, el HTML y JS anteriores deben generarse con PHP (o equivalente), pero esto ya se trata de un problema independiente de Google Chart.

Para el punto 1 la documentación es tu mejor amiga.

lo se hermano y tmb se utiliza el json, si pero quiero realizar de forma dinamica implementando consultas con mysql!!
En ese caso necesitas que los arrays de JS se carguen con información obtenida en formato JSON (aunque podría ser otro) como bien dices. Desde Javascript debes hacer una llamada AJAX a un URL de tu aplicación que devuelva tus datos en formato JSON en función de parámetros.

Un ejemplo de código PHP que devuelve datos en formato JSON:

<?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr); ?>
@eldoni2 Por favor publica tus comentarios como comentarios y no como respuestas :)

Saludos.

Answer 3 · 2014-03-05T09:21:44+0000

Te paso un ejemplo, a mi me funciona como está, claro que quitaré algunas cosas y serán comentadas.

<?php
//Archivos de inclusion
//Configuraciones
//Conexion a BBDD
//Funciones, etcétera

//Función para formato de fecha a 'YYYYMMAA HH:MM:SS'

$personas = obtenerPersonas();
?>
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">

    <!-- Reset CSS -->
    <link rel="stylesheet" href="http://187.210.109.99/css/reset.css" />

    <!-- jQuery plugin -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>

    <!-- plugin Gráficas Google -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

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

    <!-- Local CSS -->
    <link rel="stylesheet" href="../css/consulta.css" />
    <link rel="stylesheet" href="../css/impresion.css" media="print" />

    <!-- Local script -->

    <title>
        Reporte semanal
    </title>
</head>
    <body>

        <header>
            <img src="../imagenes/logo.png" alt="Empresa" id="logo">
            <h1>
                Reporte
            </h1>
        </header>
        <nav>
        </nav>
        <section class="reporte">
            <form action="resultado.php" method="post" class="consulta">
                <legend>
                    Especifique las fechas
                </legend>
                <ul class="fechas">
                    <li>
                        <label for="semana">
                            Seleccione semana: 
                        </label>
                        <input type="week" name="semana" id="semana" value="<?php echo $semana;?>" />
                    </li>

                    <li>
                        <input type="submit" name="consultar" id="consultar" value="Consultar" />
                    </li>
                </ul>
                <p class="rango-fechas">
                    Reporte del <span class="fecha-inicial"></span> al <span class="fecha-final"></span>
                </p>
            </form>
<?php
    $dias = array('Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');

    foreach ($personas as $valor) {

        $consulta['id'] = trim($valor['codigoPersona']);
        $agenda = array();
        $citas = array();
        $agenda = obtenerResultadoAgenda($consulta);
        $citas = obtenerCitasPersona($consulta, false);

        echo '
        <section class="persona">

        <!-- Tabula los datos en HTML -->

            <script type="text/javascript">
                function drawVisualization() {

                var data = google.visualization.arrayToDataTable([
                    [\'Día\', \'Atendidas\', \'Agendadas\', \'Asistidas\']';
    foreach ($musculo[$consulta['id']] as $key => $value) {
        echo '
                    ,[\''. $key .'\', '. $value['atendidas'].', '. $value['agendadas'] .', '. $value['asistidas'] .', ]';
    }
                  echo '
                ]);

                var options = {
                    title : \'Producción por persona\',
                    vAxis: {title: "Cantidad",
                        minValue: 0, count: 8
                    },
                    hAxis: {title: "Día", color: \'#333\', count: 8 },
                    seriesType: "bars",
                    series: {5: {type: "line"}},
                    colors: [\'#FF0000\', \'#00FF00\', \'#0000FF\'],
                    setColumnLabel : ["Atendido", "Agendada", "Asistida"]
                };

                var chart = new google.visualization.ComboChart(document.getElementById(\''. $consulta['id'] .'\'));
                chart.draw(data, options);
              }
              google.setOnLoadCallback(drawVisualization);
            </script>

            <div id="'. $consulta['id'] .'" style="width: 860px; height: 500px;"></div>
            ';
    }

 echo '
        </section>
        </section>

        <footer>
            <pre>';
echo '
            </pre>
        </footer>
    </body>
</html>
';
?>

Pregunta

google chart

eldoni2 comentado Mar 5, 2014

eldoni2 comentado Mar 5, 2014

carlossevi comentado Mar 6, 2014

eldoni2 comentado Mar 10, 2014

Peter comentado Mar 10, 2014

Por favor, accede o regístrate para añadir un comentario.

2 Respuestas

eldoni2 comentado Mar 4, 2014

carlossevi comentado Mar 4, 2014

eldoni2 comentado Mar 4, 2014

Peter comentado Mar 4, 2014

Por favor, accede o regístrate para añadir un comentario.

eldoni2 comentado Mar 5, 2014

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para responder a esta pregunta.

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta