Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: basickdagger en 28 Abril 2014, 17:49 pm


Título: graficar google chart dinamico
Publicado por: basickdagger en 28 Abril 2014, 17:49 pm
tengo un select, el cual selecciono 2 opciones y realizo una grafica con sus respectivos datos tomandolos de una consulta en sql...

lo que ahora quiero es que el usuario con algún checkbox, pudiera elegir que dato mostrar/ocultar de la grafica...

hasta ahora no lo he conseguido más que por via get/post  colocando otra opción donde de a elegir y utilizando algunos if, el problema es que me parece bastante molesto dar hacia atras para elegir otra opción, por el momento grafico todos los datos, alguna idea de como podria hacerlo, vi algunos ejemplos en jquery pero no lo pude hacer funcionar y ando algo confundido...


Código
  1. 	<?
  2. $idcliente=$_GET['adf'];
  3. $idequipo=$_GET['idequipo'];
  4.  
  5.  
  6.    $sql="SELECT limite_PH, limite_TDS, limite_CND, limite_SILICE, limite_DUREZA,temp_entrada,temp_salida,comentario, fecha FROM monitoreo where id_cliente=$idcliente and id_levantamiento_equipo=$idequipo GROUP BY fecha ASC " ;
  7.  
  8. $res=mysql_query($sql,$enlace);
  9. ?>
  10.  
Código
  1.     <script type="text/javascript" src="https://www.google.com/jsapi"> </script>
  2.     <script type="text/javascript">
  3.       google.load("visualization", "1", {packages:["corechart"]});
  4.       google.setOnLoadCallback(drawChart);
  5.       function drawChart() {
  6.         var data = google.visualization.arrayToDataTable([
  7.           ['Fecha', 'CND', 'TDS', 'PH','Silice','Dureza'],
  8.  
Código
  1. <?php
  2.  
  3. while($row = mysql_fetch_array($res))
  4.   {
  5.  
  6. echo "['".$row['fecha']."',".$row['limite_CND'].",".$row['limite_TDS'].",".$row['limite_PH'].",".$row['limite_SILICE'].",".$row['limite_DUREZA']."],";		
  7.  
  8.   }
  9.   ?>
Código
  1.    ]);
  2.     var options = {
  3.           title: 'Equipo:',
  4. 	  curveType: 'function',
  5.     legend: { position: 'bottom' }
  6.         };
  7.  
  8.         var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  9.         chart.draw(data, options);
  10.       }
  11.     </script>
Código
  1.  
  2.     <div id="chart_div" style="width: 100%; height: 100%;"></div>
  3.  
  4.  


los datos que me interesaria cambiar con los checkbox... vendrian a ser..

Código
  1.  ['Fecha', 'CND', 'TDS', 'PH','Silice','Dureza'],

y

Código
  1. echo "['".$row['fecha']."',".$row['limite_CND'].",".$row['limite_TDS'].",".$row['limite_PH'].",".$row['limite_SILICE'].",".$row['limite_DUREZA']."],";		
  2.  

y cambiando la sentencia de SQL...

saludos...

Título: Re: graficar google chart dinamico
Publicado por: engel lex en 28 Abril 2014, 22:31 pm
Usa ajax, jquery tiene las funciones de post y get para eso!

Busca en google jquery ya... no tengo ahorita el link a mano (es un .com.ar) pero ahi bien explican como usarlas

Título: Re: graficar google chart dinamico
Publicado por: basickdagger en 28 Abril 2014, 23:18 pm
gracias por la respuesta... pues bueno te comento lo que he hecho, agregue un select con las opciones y las cargo con ajax...

el problema esta en que no me re-dibuja el chart, en algunas paginas he visto que hay que iniciar

Código
  1.  google.load("visualization", "1", {packages:["corechart"]});
  2.  

pero estoy muy perdido...

asi tengo una parte de mi código...

Código
  1. <script>
  2. var xmlhttp;
  3. function loadDoc(string,url,cfunc)
  4. {
  5. if (window.XMLHttpRequest)
  6.   {
  7.   xmlhttp=new XMLHttpRequest();
  8.   }
  9. else
  10.   {
  11.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  12.   }
  13. xmlhttp.onreadystatechange=cfunc;
  14. xmlhttp.open("POST",url,true);
  15. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  16. xmlhttp.send(string);
  17. }
  18.  
  19. function elegir(str)
  20. {
  21.  
  22. loadDoc("q="+str+"&idc=<?php echo $idcliente.'&ide='.$idequipo; ?>","cargarGrafica.php",function()
  23.   {
  24.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  25.     {
  26.     document.getElementById("bloque").innerHTML=xmlhttp.responseText;
  27.     }
  28.   });
  29. }
  30.  
  31. </script>
  32.  

ejecuto cargarGrafica.php e imprimo la query(misma que pruebo en consola para verificar que no me da error),
que viene siendo...
Código
  1. $q=$_POST['q'];
  2. $idc=$_POST['idc'];
  3. $ide=$_POST['ide'];
  4.  
  5. $sql="SELECT $q, fecha FROM monitoreo where id_cliente=$idc and id_levantamiento_equipo=$ide GROUP BY fecha ASC " ;
  6. echo $sql;
  7. $res=mysql_query($sql,$enlace);
  8.  
  9.  
Código
  1. <script type="text/javascript" src="https://www.google.com/jsapi"> </script>
  2.     <script type="text/javascript">
  3.       google.load("visualization", "1", {packages:["corechart"]});
  4.       google.setOnLoadCallback(drawChart);
  5.       function drawChart() {
  6.         var data = google.visualization.arrayToDataTable([
  7.           ['Fecha','<?php echo $q; ?>'],
  8. <?php
  9. while($row = mysql_fetch_array($res))
  10.   {
  11.        echo "['".$row['fecha']."',".$row[$q]."],";
  12.   }
  13.   ?>
  14.    ]);
  15.     var options = {
  16.           title: 'Equipo:',
  17. 	  curveType: 'function',
  18.     legend: { position: 'bottom' }
  19.         };
  20.         var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  21.         chart.draw(data, options);
  22.       }
  23.     </script>
  24.  

Código
  1. <div id="chart_div" style="width: 100%; height: 100%;"></div>
  2.  


cabe aclarar que si cambio...
Código
  1. $q=$_POST['q'];
  2. $idc=$_POST['idc'];
  3. $ide=$_POST['ide'];
  4.  

por GET y le agrego directamente el valor a la url(que se supone cargo con ajax en post, para probar)....

Código:
xxx/yyy/cargarGrafica.php?q=limite_PH&idc=1&ide=1
//datos para probar la grafica

resulta que si me lo dibuja, entonces veo que mi problema esta al dibujar la grafica desde AJAX, ya ando algo confundido, quizá algo no me haya percatado aún, si tienen alguna sugerencia...

en cuanto a lo de jquery, las veces que lo he utilizado es para aplicar cambios en colores, background eventos onclick... igual si pueden guiarme por ese lado de como cambiar los valores de la grafica tambn seria una gran ayuda... saludos!

Título: Re: graficar google chart dinamico
Publicado por: ThinkByYourself en 29 Abril 2014, 11:25 am
No olvides sanitizar (creo que se dice) las entradas de PHP, no soy dado al SQLInjection, pero me parece estar viendo peligro en alguna línea, en la que pasas el parámetro tal como lo recibes a una variable, y de la variable directamente a la función del SQL. Yo usaría expresiones regulares para comprobar que no hay comillas o cosas raras, pero no tengo mucha idea, también lo digo... A lo mejor es una tontería (no he programado muchos servidores, más bien sólo pruebas baratas...), pero mira, mejor decirlo a riesgo de quedar como un inútil y que sea una tontería a que te lo tengas que encontrar más adelante y no sepas de dónde viene la cosa. Vamos, por si acaso. Saludos!

Título: Re: graficar google chart dinamico
Publicado por: basickdagger en 29 Abril 2014, 17:27 pm
gracias por tu respuesta, de hecho siempre lo hago solamente para llenar menos de código por eso lo coloque aquí así...

bueno pues les comento todo lo que sucedió... según leí al mandar los datos al chart google lo inicia desde el load en la página, de alguna manera mi código principal ya había cargado el mapa vacio, por lo que a al hora de enviarle los datos de nuevo, ya no lo redibujaba... mi solución (de por mientras xD) simplemente cree opciones con los diferentes modos de graficar... y con una simple URL envío todos los datos necesarios para que así me recargue la página y por lo tanto el dibujo tambien..

cualquier otra sugerencia será bien recibida..

 Saludos!


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines