6

Buenas estoy realizando un formulario pero en este caso llenan cierto datos o escogen y se genera un grafico y abajo una tabla que es basicamente la descripción de ese grafico y es dinamico.

el problema es que cuando presiono la primera vez funciona bien pero cuando escogo otro tipo no se actualiza la tabla .y cuando doy varias veces el clic ahí recién se actualiza la tabla y me muestra .

me podrían ayudar.

EL PROBLEMA NO ES EL GRAFICO SINO LA TABLA QUE NO SE ACTUALIZA CUANDO PRESIONO EL BOTÓN

Ademas cuando ingreso a la pagina por defecto se muestra la tabla como podria hacer para que cuando ingrese no se vea la tabla y cuando presione clic ahi recién aparezca

ahora yo en el boton que esta en mi formulario es el siguiente.

<button type="button" name="btngenerargraficoporterritorio11" class="btn btn-primary" onclick="generargraficodetalleobservacion();">Generar Gráfico</button>

es decir que cuando presione va llamar a una funcion que es para el grafico

<script type="text/javascript">

    function generargraficodetalleobservacion(){

        var grafinicio=document.getElementById("txtgfinicio").value;

        var graffin=document.getElementById("txtgffin").value;

        var zona = document.getElementById("zonalabelidgraf").value;
        var agencia = document.getElementById("agencialabelidgraf").value;
        var tipoobservacion = document.getElementById("tiobselabelidgraf").value;
        var producto = document.getElementById("prodlabelidgraf").value;

        console.log(grafinicio);
        console.log(graffin);
        console.log(zona);
        console.log(agencia);
        console.log(tipoobservacion);
        console.log(producto);

        if(grafinicio=="")
        {
            alert("Ingrese la Fecha inicio");

        }
        if(graffin=="")
        {

            alert("Ingrese la Fecha Fin");
        }
        if(zona=="Seleccionar")
        {
                alert("Ingrese la Zona");

        }
        if(producto=="Seleccionar")
        {
            alert("Ingrese el Producto");
        }
        //listarUsuarios1();
        //$("#tableUsersss").empty().load("Tablahistoricografico.php");


        var options = {

            chart: {
                renderTo: 'containergrafico',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ' '
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y +'%';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y +'%';
                        }
                    },
                    showInLegend: true
                }
            },
            series: []
        };

        $.getJSON("data/detalleobservaciongrafico.php?finicio="+grafinicio+"&ffin="+graffin+"&zona="+zona+"&agencia="+agencia+"&tipoobservacion="+tipoobservacion+"&producto="+producto, function(json) {
                                                                                    options.series = json;
                                                                                    chart = new Highcharts.Chart(options);
                                                                                });
        listarUsuarios1();
                                                                            };

</script>

ahora yo para generar la tabla hago con este script

<script>
      /* Por lo que veo usas jQuery */
      function listarUsuarios1() {
         $.ajax({
           type: 'POST',
           url: 'Tablahistoricografico.php',
           dataType  : 'html',
           success: function(data){
             $('#tableUsersss').html(data);
           }
         });
      }  // listarUsuarios

      /* Segun prefieras o estes más familiazado usa este */

      $(function () {
        listarUsuarios1();
      }); 
      /* ó; deseable no dejes ambos solo uno */ 
      $(document).ready(function () {
        listarUsuarios1();
      }); 

</script>

que en mi pagina que llama es esta. TABLA HISTORICO

<?php
include("config.php");
session_start();
   /* Tu proceso de conexión, consulta y resultado */
$finicio = isset($_SESSION['finicio']) ? $_SESSION['finicio'] : '';
$ffin = isset($_SESSION['ffin']) ? $_SESSION['ffin'] : '';
$zona= isset($_SESSION['zona']) ? $_SESSION['zona'] : '';
$agencia = isset($_SESSION['agencia']) ? $_SESSION['agencia'] : '';
$tipoobservacion = isset($_SESSION['tipoobservacion']) ? $_SESSION['tipoobservacion'] : '';
$producto = isset($_SESSION['producto']) ? $_SESSION['producto'] : '';

$sql1 = "EXEC Sp_DetalleObservacion 2,'$finicio','$ffin','$zona','$agencia','$tipoobservacion','$producto','' ";
$result1 = sqlsrv_query($conn,$sql1) or die("Couldn't execut query");

   $sql= "EXEC Sp_DetalleObservacion 7,'','','','','','','' ";
  $result = sqlsrv_query($conn,$sql) or die("Couldn't execut query");    

   if(!$result){
       echo "Ocurrio un error en la consulta"; 
   }else{
       $tabla ="<table class='table table-bordered text-center'>";
       $tabla .="<thead>";
       $tabla .= "<tr>";
       $i = 0;
       while  ($data = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
          if ($i == 0) {
            foreach($data as $key => $value) {                
              $tabla .="<th scope='col' style='text-align: center;background-color: #054AC4;color: #fff'>" . utf8_decode($key) . "</th>";
            }
            $tabla .="</tr>";
            $tabla .="</thead>";

            $tabla .="<tbody>";
          } 
          $tabla .="<tr>";
          foreach($data as $key => $value) {                         
             $tabla .="<td>".utf8_encode($value)."</td>";
          }    
          $tabla .="</tr>";
          $i++;
       }
       $tabla .="</tbody>";
       $tabla .="</table>";
       echo $tabla;
   }       
?>

Imagen donde mando la sessión introducir la descripción de la imagen aquí

11
  • 2
    Te recomendaria hacer un debug en el success de tu getjson para ver que resultados estas obteniendo, tal vez el problema sea el nEw Highcharts.Chart(options), he visto que con este tipo de controles el recrearlos suelen romperse si los regeneras, en su lugar yo trataría de modificar las propiedades en lugar de crear una nueva instancia si ya existe.
    – Mike
    el 26 jul. 2018 a las 16:45
  • 1
    despues de leer un poco la documentacion de Highcharts tal vez debas utilizar el metodo Update en lugar de usar New highchart.chart, (si la instancia ya ha sido creada)
    – Mike
    el 26 jul. 2018 a las 16:53
  • 1
    tambien recuerda tener la consola abierta para hacer pruevas (f12) asi puedes ver si el jquery no ha explotado o dejado de funcionar (suele pasar)
    – Mike
    el 26 jul. 2018 a las 16:54
  • 1
    @Mike el problema no es el grafico sino el ajax de la tabla que genero que no se actualiza
    – PieroDev
    el 26 jul. 2018 a las 17:42
  • 1
    Para que la tabla no te carge al inicio, simplemente borra la llamada a la funcion dentro del $(document).ready()
    – alanfcm
    el 1 ago. 2018 a las 18:16

1 respuesta 1

2
+25

Aquí tienes un posible respuesta a tu pregunta.

Esta respuesta es un ejemplo adaptado ligeramente para es.stackoverflow, puedes desactivar o eliminar los fragmentos de código referentes este arreglo.

La versión final requiere un formulario con los input indicados en la pregunta para funcionar fuera de la simulación de ejemplo.

Para visualizar de forma correcta la solución, utilize el modo "Página completa" al ejecutar la solución desde stackoverflow

DESCRIPCIÓN

  • Se ha modificado los metodos getJSON por AJAX.
  • Se ha implementado el control de errores de las peticiones AJAX. La fn error informará en caso de error en el servidor, mostrando su código de respuesta y cuerpo de la misma.
  • Debe tener en cuenta, que para que el ejemplo funciones, los contenedores receptores de la tabla y el gráfico no pueden ser el mismo o contenerse unos a otros, o uno de ellos pisará al otro.
  • La tabla fue desactivada de forma inicial.
  • Se ha estructurado cada una de las funciones para que sean fáciles de entender y adaptar al código final.
  • El código se ha comentado e implementado junto a un ejemplo para es.stackoverflow.com

SOLUCIÓN

// Comentar fuera de es.stackoverflow
// El documento debe contener el formulario de recogida de datos para el gráfico
var es = {};es.stackoverflow = true;

// obtener
function obtener() {
  obtenerGrafico();
  obtenerTabla();
}

// renderizar gráfico
function renderizarGrafico(options) {
  console.log('Grafico');
  if(typeof chart === 'undefined') {
    console.log(' - Generando gráfico');
    chart = new Highcharts.Chart(options);
  }else{
    console.log(' - Actualizando gráfico');
    //chart.update(options);
  }
}

// renderizar tabla
function renderizarTabla(html) {
  console.log('Tabla!');
  console.log(' - Renderizando tabla');
  $('#tableUsersss').html(html);
}

// obtener gráfico
function obtenerGrafico(){
        
        // Obtengo la fecha de inicio del gráfico
        var grafinicio = (es.stackoverflow) ? '07/08/2018' :  document.getElementById("txtgfinicio").value;

        // Obtengo la fecha de final del gráfico
        var graffin= (es.stackoverflow) ? '07/08/2018' : document.getElementById("txtgffin").value;

        // Obtengo la zona
        var zona = (es.stackoverflow) ? 'zona-ej' : document.getElementById("zonalabelidgraf").value;
        
        // Obtengo la agencia
        var agencia = (es.stackoverflow) ? 'agencia-ej' : document.getElementById("agencialabelidgraf").value;
        
        // Obtengo el tipo de observación
        var tipoobservacion = (es.stackoverflow) ? 'observacion-ej' : document.getElementById("tiobselabelidgraf").value;
        
        // Obtengo el producto
        var producto = (es.stackoverflow) ? 'producto-ej' : document.getElementById("prodlabelidgraf").value;

        // Info de consola
        console.log('Datos del gráfico:');
        console.log(' - F Ini: ' + grafinicio);
        console.log(' - F Fin: ' + graffin);
        console.log(' - Zona: ' + zona);
        console.log(' - Agencia: ' + agencia);
        console.log(' - Observacion: ' + tipoobservacion);
        console.log(' - Producto: ' + producto);

        // Validación de datos
        if(!grafinicio)
        {
            alert("Ingrese la Fecha inicio");
            return true;
        }
        if(!graffin)
        {
            return true;
            alert("Ingrese la Fecha Fin");
        }
        if(!zona||zona=='Seleccionar')
        {
            alert("Ingrese la Zona");
            return true;
        }
        if(!producto||producto=="Seleccionar")
        {
            alert("Ingrese el Producto");
            return true;
        }


        // Opciones para generar el grafico
        var options = {

            chart: {
                renderTo: 'containergrafico',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ' '
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y +'%';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y +'%';
                        }
                    },
                    showInLegend: true
                }
            },
            series: []
        };
        
        // Datos de la petición
        // Url
        var url = "data/detalleobservaciongrafico.php";
        // data
        var data =
              "finicio="+grafinicio+
              "&ffin="+graffin+
              "&zona="+zona+
              "&agencia="+agencia+
              "&tipoobservacion="+tipoobservacion+
              "&producto="+producto;

        // Si es el ejemplo de stackoverflow no realizo la llamada a obtener gráfico,
        // en su lugar usaremos un ejemplo de la web de Highcharts para obtener la serie
        if(es.stackoverflow) {
            options.series = [{ data: [ ['EJ1', 25], ['EJ2', 80], ['EJ3', 50] ] }];
            renderizarGrafico(options);
        }else{
              
            // Usamos el método AJAX de jquery en vez GETJSON
            // Más información en caso de error
            $.ajax({
              dataType: "json",
              url: url,
              data: data,
              success: function(json){options.series = json; renderizarGrafico(options);},
              error: function(xhr) {
                // Control de errores más detallado
                console.log("Ups! Parece que tenemos problemas con la nave nodriza! No hemos podido obtener el gráfico.")
                console.log(" - resolution code:" + xhr.status);
                console.log(" - response:");
                console.log(xhr.responseText);
              }
            });
        }
}

// Obtener tabla
function obtenerTabla(){

        // Datos de la petición
        // Url
        var url = "Tablahistoricografico.php";    // Ojo, aquí no tienes data/... ¿Es correcto?
        // data
        // var data = "";                         // Aquí si necesio enviar algun dato, entiendo que se almacena en sesión segun tu ejemplo

        // Si es el ejemplo de stackoverflow no realizo la llamada a obtener la tabla
        // en su lugar incluire una tabla ejemplo en html
        if(es.stackoverflow) {
            renderizarTabla(" \
            <table style='width:100% border: 1px solid #000;'> \
            <tr> \
              <td>EJ1</td> \
              <td>25%</td> \
            </tr> \
            <tr> \
              <td>EJ2</td> \
              <td>80%</td> \
            </tr> \
            <tr> \
              <td>EJ</td> \
              <td>50%</td> \
            </tr> \
          </table> \
            ");
        }else{
              
            // Usamos el método AJAX de jquery en vez GETJSON
            // Más información en caso de error
            $.ajax({
              dataType: "html",
              url: url,
              //data: data,
              success: function(html){renderizarTabla(html);},
              error: function(xhr) {
                // Control de errores más detallado
                console.log("Ups! Parece que tenemos problemas con la nave nodriza! No hemos podido obtener la tabla!")
                console.log(" - resolution code:" + xhr.status);
                console.log(" - response:");
                console.log(xhr.responseText);
              }
            });
        }
}
table, th, td {
    border: 1px solid black;
    width: 100%;
}
<!-- highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!--Form -->
<!-- No implementado en el ejemplo -->

<!-- Boton generar gráfico -->
<button type="button" name="btngenerargraficoporterritorio11" class="btn btn-primary" onclick="obtener();">Generar Gráfico</button>

<!-- Contenedor del gráfico -->
<div id="containergrafico"></div>

<!-- Contenedor de la tabla -->
<div id="tableUsersss"></div>


<!-- 
  Nota: Un contenedor de gráfico debe ser independiente a uno de tabla, no puede uno contener a otro, o se superpondría el resultado
-->

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.