 Autor
|
Tema: graficar google chart dinamico (Leído 4,815 veces)
|
basickdagger
 Desconectado
Mensajes: 650
System.out.println("this is weird as fuck");
|
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... <? $idcliente=$_GET['adf']; $idequipo=$_GET['idequipo']; $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 " ; ?>
<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([ ['Fecha', 'CND', 'TDS', 'PH','Silice','Dureza'],
<?php { echo "['".$row['fecha']."',".$row['limite_CND'].",".$row['limite_TDS'].",".$row['limite_PH'].",".$row['limite_SILICE'].",".$row['limite_DUREZA']."],"; } ?>
]); var options = { title: 'Equipo:', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
los datos que me interesaria cambiar con los checkbox... vendrian a ser.. ['Fecha', 'CND', 'TDS', 'PH','Silice','Dureza'],
y echo "['".$row['fecha']."',".$row['limite_CND'].",".$row['limite_TDS'].",".$row['limite_PH'].",".$row['limite_SILICE'].",".$row['limite_DUREZA']."],";
y cambiando la sentencia de SQL... saludos...
|
|
|
|
|
En línea
|
|
|
|
|
engel lex
|
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
Mensajes: 650
System.out.println("this is weird as fuck");
|
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 google.load("visualization", "1", {packages:["corechart"]});
pero estoy muy perdido... asi tengo una parte de mi código... <script> var xmlhttp; function loadDoc(string,url,cfunc) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("POST",url,true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(string); } function elegir(str) { loadDoc("q="+str+"&idc=<?php echo $idcliente.'&ide='.$idequipo; ?>","cargarGrafica.php",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("bloque").innerHTML=xmlhttp.responseText; } }); } </script>
ejecuto cargarGrafica.php e imprimo la query(misma que pruebo en consola para verificar que no me da error), que viene siendo... $q=$_POST['q']; $idc=$_POST['idc']; $ide=$_POST['ide']; $sql="SELECT $q, fecha FROM monitoreo where id_cliente=$idc and id_levantamiento_equipo=$ide GROUP BY fecha ASC " ; echo $sql;
<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([ ['Fecha','<?php echo $q; ?>'], <?php while($row = mysql_fetch_array($res)) { echo "['".$row['fecha']."',".$row[$q]."],"; } ?> ]); var options = { title: 'Equipo:', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
cabe aclarar que si cambio... $q=$_POST['q']; $idc=$_POST['idc']; $ide=$_POST['ide'];
por GET y le agrego directamente el valor a la url(que se supone cargo con ajax en post, para probar).... 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
Mensajes: 191
|
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
Mensajes: 650
System.out.println("this is weird as fuck");
|
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
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
DataGridView con Chart y Button (Solucionado)
« 1 2 »
.NET (C#, VB.NET, ASP)
|
¡Micronet!
|
15
|
23,787
|
28 Junio 2013, 21:34 pm
por CarballoUriel
|
|
|
|
Chart con Datagridview
.NET (C#, VB.NET, ASP)
|
¡Micronet!
|
2
|
4,940
|
28 Noviembre 2010, 16:37 pm
por .::IT::.
|
|
|
|
Fondo dinámico en blogger de google?
Desarrollo Web
|
flacc
|
2
|
4,023
|
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,708
|
9 Mayo 2012, 10:31 am
por |Miguel|
|
 |
