elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  graficar google chart dinamico 		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: graficar google chart dinamico  (Leído 5,055 veces)
basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
graficar google chart dinamico
« 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...
En línea
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: graficar google chart dinamico
« Respuesta #1 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
En línea
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: graficar google chart dinamico
« Respuesta #2 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!
En línea
ThinkByYourself

Desconectado Desconectado

Mensajes: 191


Ver Perfil
Re: graficar google chart dinamico
« Respuesta #3 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!
En línea
No te voy a engañar.
Todos hemos sido programados para normalizar la psicopatía de las élites económicas y políticas, y para realimentar su patrón de ciega codicia.
basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: graficar google chart dinamico
« Respuesta #4 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!
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
DataGridView con Chart y Button (Solucionado) « 1 2 »
.NET (C#, VB.NET, ASP) 		¡Micronet! 15 24,482 Último mensaje 28 Junio 2013, 21:34 pm
por CarballoUriel
Chart con Datagridview
.NET (C#, VB.NET, ASP) 		¡Micronet! 2 5,098 Último mensaje 28 Noviembre 2010, 16:37 pm
por .::IT::.
Fondo dinámico en blogger de google?
Desarrollo Web 		flacc 2 4,208 Último mensaje 24 Diciembre 2010, 18:29 pm
por flacc
ASP; Cómo uso datos de un XML para rellenar un gráfico con Chart
.NET (C#, VB.NET, ASP) 		|Miguel| 1 2,854 Último mensaje 9 Mayo 2012, 10:31 am
por |Miguel|
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines