New question

Question:

Date: 23-05-2015 19:00:00 (In Spanish)

Actualizar un gráfico jpgraph de forma asíncrona[Resolved]

Hola comunidad, les hago una consulta a ver si me pueden ayudar un poco; estoy realizando un aplicación de votación. Para ello utilizo un form con radiobutton y luego al hacer submit, el valor de la opción seleccionada se almacena en una base de datos sqlite. Luego se muestra la cantidad de votos acumulados en un label. Todo esto se hace de forma asíncrona con jquery. Hasta acá todo bien, el problema es quiero mostrar los porcentajes con un gráfico; estoy utilizando jpgraph. Lo que no puedo hacer es que se actualice el gráfico de forma asíncrona, es decir, tengo que refrescar la página para ver el gráfico con los datos actualizados. También estuve viendo la documentación de jpgrahp y me ofrece un tips pero me da error. Espero que me puedan dar una mano. Gracias. Tags: Graphics - HTML - Javascript - JQuery - Question - SQLite Votes: 0 - Answers: 1 - Views: 12 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 29-05-2015 11:51:51 Este ejemplo es con campos de textos, es cuestión de que lo modifiques a tu aplicación... ya que no lo almacena en una base de datos, pero la idea ya esta... saludos.

    Espero que esto te ayude.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <form method="post" enctype="multipart/form-data" >
        <table>
            <tr>
                <td>Valor 1: <input type="text"  name="valor[]"></td>
            </tr>
            <tr>
                <td>Valor 2: <input type="text"  name="valor[]"></td>
            </tr>
            <tr>
                <td>Valor 3: <input type="text"  name="valor[]"></td>
            </tr>
            <tr>
                <td>Valor 4: <input type="text"  name="valor[]"></td>
            </tr>
            <tr>
                <td>Valor 5: <input type="text"  name="valor[]"></td>
            </tr>
            <tr>
                <td><input type="button" value="Enviar" id="button"></td>
            </tr>
        </table>
    </form>
    <div id="grafica"></div>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        $("#button").click(function(e) {
    		$("#grafica").html("");
    		$.ajax({
    			type: "POST",
    			url: "new_pie1.php",
    			data: $("form").serialize(),
    			success: function(datos){
    				$("#grafica").html("<img>");
    				 d = new Date();
    				$("#grafica img").attr("src", ""+datos+"?"+d.getTime()+"");				
    			}
    		});        
        });
    });
    
    </script>
    </body>
    </html>



    new_pie1.php
    require_once ('jpgraph/jpgraph.php');
    require_once ('jpgraph/jpgraph_pie.php');
    // Some data
    
    $data = array();
    
    #Acá se leen los datos que se manda en el formulario
    foreach($_POST['valor'] as $val){
    	$data[] = $val;
    }
    
    /*Debes de incluir tu consulta a tu base de datos para obtener tus resultados, no olvides que debes de asignarles colores igualmente a cada valor*/
    
    // Create the Pie Graph. 
    $graph = new PieGraph(350,250);
    
    $theme_class="DefaultTheme";
    //$graph->SetTheme(new $theme_class());
    
    // Set A title for the plot
    $graph->title->Set("A Simple Pie Plot");
    $graph->SetBox(true);
    
    // Create
    $p1 = new PiePlot($data);
    $graph->Add($p1);
    
    $p1->ShowBorder();
    $p1->SetColor('black');
    $p1->SetSliceColors(array('#1E90FF','#2E8B57','#ADFF2F','#DC143C','#BA55D3'));
    $NombreImagen = "imagen.jpg";
    if(file_exists($NombreImagen)){
    	unlink($NombreImagen);
    }
    
    $graph->Stroke($NombreImagen);
    echo $NombreImagen;
    
      Votes: 1 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In