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;
}
?>
$(document).ready()