Sv Community El Salvador

Soporte y Tecnología => Programación => Web => Mensaje iniciado por: tekun en septiembre 07, 2013, 10:47:34 am

Título: [HELP] jquery + AJAX ejecutando una función
Publicado por: tekun en septiembre 07, 2013, 10:47:34 am
basados en este link
http://www.w3schools.com/php/php_ajax_database.asp

he aprendido como "refrescar" los datos de una página con datos de una DB sin "actualizar" ni cambiar de URL.... pero lo que quiero no es tan simple como el ejemplo,.... que dibuja un objeto <table> dentro de un <DIV>... sino que, lo que quiero es, actualizar los datos de un gráfico... para lo cual ya puedo utilizar esta   API highCharts  (http://www.highcharts.com/)


esta es la función de mi gráfico.... pero no se como unirla al ejemplo del AJAX.... yo soy nulo en web... soy aprendiz...

entonces, yo entiendo que mi código de abajo se ejecuta cuando se CARGA la página... mi idea con AJAX es incorporar un boton para cambiar los datos de la consulta... hacer una consulta a la DB y que me retorne los datos que estan en rojo de  la función de aya ABAJO y se ejecute esa misma función, para refrescar el gráfico...

COMO LOGRO ESO.... no se ni que es lo que quiero  x_x (en programación), para buscarlo en google, por eso es que no he buscado ahí

Citar
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({chart: {renderTo: "graf_solicitudes_promedios_etapas",type: "bar"}
                                     ,title: {text: "PROMEDIOS POR ETAPAS : 01 Ago - 31 Ago"}
                                     ,subtitle: {text: "Solicitudes Desembolsadas"}
                                     ,tooltip: {formatter: function() {return ""+this.series.name +": "+ this.y +"  días";}}
                                     ,plotOptions: {bar: {dataLabels: {enabled: true}}}
                                     ,legend: {layout: "vertical",align: "right",verticalAlign: "top",x: -100,y: 100,floating: true,borderWidth: 1,backgroundColor: "#FFFFFF",shadow: true}
                                     ,credits: {enabled: false}
                                     ,xAxis:{categories: ["Asignación Presolicitud","Presolicitud","Asignación trámite","Trámite","Comité","Digitación","Operaciones"]
                                     ,title: {text: null}}
                                     ,yAxis: {min: 0
                                        ,title: {text: "Cantidad de días",align: "high"}
                                        ,labels: {overflow: "justify"}}
                                        ,series: [{name: "CONSUMO", data :[0,2,0,0,0,1,1]}
                                                  ,{name: "HIPOTECARIO", data :[2,15,0,1,0,0,0]}
                                                  ,{name: "EMPRESA", data :[1,2,1,1,1,0,1]}
                                                  ]
                                        })
        ;})
    ;}
);

en otras palabras, lo que esta en rojo es lo que me retornara el PHP pero como lo meto a esta función y como la actualizo....
Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: Jaru en septiembre 07, 2013, 11:32:46 am
primero tenes que ver como vas a pedir la data, lo podes hacer con un metodo POST con datos JSON,
mandas los argumentos via POST que necesites para hacer la consulta con la function POST de jquery
en tu php validas la entrada (la sanitizas)
luego en tu php haces tu query y toda la paja
devolves los datos necesarios en JSON para dibujar tu gráfica
en el js, en en tu function success del POST que hiciste con Jquery, destruis el objeto de la gráfica
lo instancias de nuevo con las nuevas variables
llamas a la funcion que redibuja la gráfica nueva.

listo :)
Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: tekun en septiembre 07, 2013, 12:01:50 pm
gracias Naruto, has entendido bien lo que necesito y lo describes perfectamente...
pero esto es lo que no puedo hacer...

en el js, en en tu function success del POST que hiciste con Jquery, destruis el objeto de la gráfica
lo instancias de nuevo con las nuevas variables
llamas a la funcion que redibuja la gráfica nueva.

algún ejemplo? yo se que eso es lo que tengo que hacer pero no se como hacerlo..

Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: Jaru en septiembre 07, 2013, 12:56:17 pm
gracias Naruto, has entendido bien lo que necesito y lo describes perfectamente...
pero esto es lo que no puedo hacer...

algún ejemplo? yo se que eso es lo que tengo que hacer pero no se como hacerlo..


si tenes chance lo vemos en una hora.
Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: stoke en septiembre 07, 2013, 02:46:58 pm
Si estas comenzando con la web, te sugiero que utilices oto tipo de grafico que haya sido diseñado para actualizarse con AJAX

Mira este ejemplo

http://www.rgraph.net/docs/howto-using-ajax.html
Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: Colochozan en septiembre 07, 2013, 02:50:23 pm
http://api.jquery.com/jQuery.post/

y

http://api.jquery.com/jQuery.ajax/

ambos hacen lo mismo que quieres
Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: E-minero en septiembre 08, 2013, 02:41:59 am
@tekun, posiblemente te puedan ayudar estos dos post:

http://stackoverflow.com/questions/8058136/highcharts-data-series-issue-with-ajax-json-and-php (http://stackoverflow.com/questions/8058136/highcharts-data-series-issue-with-ajax-json-and-php)

http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts (http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts)

Lee las respuestas que estan chequeadas en verdecito! Espero te sirva!  :thumbsup:
Título: Re:[HELP] jquery + AJAX ejecutando una función
Publicado por: tekun en septiembre 09, 2013, 05:09:56 pm
YEEAAAHHHH

http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts (http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts)

gracias E-minero... me sirvió de mucho ese link....

pero como siempre pedalie TODO este día laboral para dar con una excelente respuesta... ya me funciona la parte más gruesa de mi nueva creación... ya se conecta a la db con un pequeño giro en la forma inicial...
pues no sabía como retornar los valores para que el gráfico se actualizara. los sampe en un DIV los datos de las X y en un DIV a parte los Y
Con un DOM a la página pude extraer los valorsillos y con un JS de JSON parsee tales datos para que el puto gráfico se actualizara....

son sólo tres lineas en lo que describo mi GRAN asaña pero desde las 8 le vole riata hasta las 4:50 me funciono...


Gracias Naruto, se que me hubieras demostrado otra forma de como hacerlo, pues destruír el gráfico y volverlo a hacer hubiera sido algo bueno, pero como siempre, no solo hay un camino para llegar a roma... Gracias por tu interés


ahora bien, tengo otro clavo...

en estos dorados tiempos año 2013, será que no hay una forma de que la Ñ y el acento se puedan reconocer de manera automática... digo porque mi proyecto se conecta a la db y extrae nombres de personas, dentro del cual esta UMAÑA y ese nombre aparece con simbolo raro en la Ñ

como hago?


naaaa ya encontre como...
ustedes son muy lentos en responder.... huevos es paja, toy bromeando

lo cambie así:
Código: [Seleccionar]
utf8_encode($resultados["descripcion"])