Usar Google Chart con AJAX

johhan160 · #1 (**permalink**) 27/01/2012, 14:29

Pues hoy me tope con Google Chart buscando una buena api de gráficos, me funciona todo a la perfección, lo único malo es que no puedo echarlo a andar con AJAX, se recarga el pedazo de la pagina, veo con firebug que envía respuesta, pero no muestra el gráfico como tal, si recargo la pagina completa si muestra el grafico sin problemas

codigo del grafico

grafico_poll.php

Código HTML:

Ver original<html>
  <head>
  <?php 
include_once('cone.php');
$link=conectarse();
 
$sql = mysql_query("select * from exitpoll",$link) or die(mysql_error());
$array=mysql_fetch_array($sql);
 
$capriles = $array['capriles'];
$diego = $array['diego'];
$maria = $array['maria'];
$medina = $array['medina'];
$pablo = $array['pablo'];
  
  ?>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Capriles Radonsky', <?php echo $capriles; ?>],
          ['Diego Arria', <?php echo $diego; ?>],
          ['Maria C. Machado', <?php echo $maria; ?>],
          ['Pablo Medina', <?php echo $medina; ?>],
          ['Pablo Perez', <?php echo $pablo; ?>]
        ]);
 
        // Set chart options
        var options = {'title':'Grafico de Exit Poll',
        
        titleTextStyle: {color: '#5c5c5c',fontSize: 25},
               titlePosition: 'out' , legend : 'rigth', pieSliceTextStyle: {color: 'black',fontSize: 18},
               
               colors: ['yellow', '#b2c8b2', 'gray', '#cdded1','blue'],
                       'width':600,
                       'height':300, is3D: true};
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
 
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

parte del codigo de la pagina donde se muestra

Código HTML:

Ver original<div id="grafico_poll" align="center">
 
    <div align="center">
    <?php include_once('grafico_poll.php'); ?>
    </div>
 
<!-- otras cosas mas -->
    
</div>

parte del ajax

Código Javascript:

Ver originaldivResultado3 = document.getElementById('exitpoll');
        //instanciamos el objetoAjax
        ajax3=objetoAjax();
        ajax3.open("GET", "funciones.php?mesa_centro="+centro+"&exitpoll=si");
        ajax3.onreadystatechange=function() {
            
            if (ajax3.readyState==4) {
                //mostrar resultados en esta capa
                divResultado3.innerHTML = ajax3.responseText;
                divResultado3.style.display="block";
            }
        }
        ajax3.send(null);

espero que alguien sepa algo al respecto

chrystopher · #2 (**permalink**) 05/12/2012, 03:46

hola que tal oye tengo el mismo problema no se si tu pudiste resolver el tuyo espero y me puedas ayudar . tengo un archivo index.php en el cual tengo un formulario . que tiene una fecha de inicio y una fecha de fin esos datos los quiero enviar a otro archivo para hacer una consulta a una base de datos y generar el grafico pie con google charts un saludo porfavor ayudame