Tema: Usar Google Chart con AJAX
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/01/2012, 14:29
johhan160
 
Fecha de Ingreso: enero-2012
Mensajes: 16
Antigüedad: 13 años
Puntos: 1
Usar Google Chart con AJAX
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
  1. <html>
  2.   <head>
  3.   <?php 
  4. include_once('cone.php');
  5. $link=conectarse();
  6.  
  7. $sql = mysql_query("select * from exitpoll",$link) or die(mysql_error());
  8. $array=mysql_fetch_array($sql);
  9.  
  10. $capriles = $array['capriles'];
  11. $diego = $array['diego'];
  12. $maria = $array['maria'];
  13. $medina = $array['medina'];
  14. $pablo = $array['pablo'];
  15.   
  16.   ?>
  17.     <!--Load the AJAX API-->
  18.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  19.     <script type="text/javascript">
  20.  
  21.       // Load the Visualization API and the piechart package.
  22.       google.load('visualization', '1.0', {'packages':['corechart']});
  23.  
  24.       // Set a callback to run when the Google Visualization API is loaded.
  25.       google.setOnLoadCallback(drawChart);
  26.  
  27.       // Callback that creates and populates a data table,
  28.       // instantiates the pie chart, passes in the data and
  29.       // draws it.
  30.       function drawChart() {
  31.  
  32.         // Create the data table.
  33.         var data = new google.visualization.DataTable();
  34.         data.addColumn('string', 'Topping');
  35.         data.addColumn('number', 'Slices');
  36.         data.addRows([
  37.           ['Capriles Radonsky', <?php echo $capriles; ?>],
  38.           ['Diego Arria', <?php echo $diego; ?>],
  39.           ['Maria C. Machado', <?php echo $maria; ?>],
  40.           ['Pablo Medina', <?php echo $medina; ?>],
  41.           ['Pablo Perez', <?php echo $pablo; ?>]
  42.         ]);
  43.  
  44.         // Set chart options
  45.         var options = {'title':'Grafico de Exit Poll',
  46.         
  47.         titleTextStyle: {color: '#5c5c5c',fontSize: 25},
  48.                titlePosition: 'out' , legend : 'rigth', pieSliceTextStyle: {color: 'black',fontSize: 18},
  49.                
  50.                colors: ['yellow', '#b2c8b2', 'gray', '#cdded1','blue'],
  51.                        'width':600,
  52.                        'height':300, is3D: true};
  53.  
  54.         // Instantiate and draw our chart, passing in some options.
  55.         var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  56.         chart.draw(data, options);
  57.       }
  58.     </script>
  59.   </head>
  60.  
  61.   <body>
  62.     <!--Div that will hold the pie chart-->
  63.     <div id="chart_div"></div>
  64.   </body>
  65. </html>

parte del codigo de la pagina donde se muestra


Código HTML: 
Ver original
  1. <div id="grafico_poll" align="center">
  2.  
  3.     <div align="center">
  4.     <?php include_once('grafico_poll.php'); ?>
  5.     </div>
  6.  
  7. <!-- otras cosas mas -->
  8.     
  9. </div>



parte del ajax
Código Javascript: 
Ver original
  1. divResultado3 = document.getElementById('exitpoll');
  2.         //instanciamos el objetoAjax
  3.         ajax3=objetoAjax();
  4.         ajax3.open("GET", "funciones.php?mesa_centro="+centro+"&exitpoll=si");
  5.         ajax3.onreadystatechange=function() {
  6.             
  7.             if (ajax3.readyState==4) {
  8.                 //mostrar resultados en esta capa
  9.                 divResultado3.innerHTML = ajax3.responseText;
  10.                 divResultado3.style.display="block";
  11.             }
  12.         }
  13.         ajax3.send(null);


espero que alguien sepa algo al respecto